Showing popover from an element
For the simplest usage, just pass your Touchable
into the from
prop. The Popover
will automatically be shown when the Touchable
is pressed.
import React from 'react';
import Popover from 'react-native-popover-view';
function App() {
return (
<Popover
from={(
<TouchableOpacity>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
)}>
<Text>This is the contents of the popover</Text>
</Popover>
);
}
Note that if you pass an onPress
or ref
prop to the Touchable
it will be overwritten.
Showing popover from an element (advanced)
For more advanced usage, pass in a function that returns any React element. You control which element the popover anchors on (using the sourceRef
) and when the popover will be shown (using the showPopover
callback). In this example, the Popover
will appear to originate from the text inside the popover, and will only be shown when the Touchable
is held down.
import React from 'react';
import Popover from 'react-native-popover-view';
function App() {
return (
<Popover
from={(sourceRef, showPopover) => (
<View>
<TouchableOpacity onLongPress={showPopover}>
<Text ref={sourceRef}>Press here to open popover!</Text>
</TouchableOpacity>
</View>
)}>
<Text>This is the contents of the popover</Text>
</Popover>
);
}
Showing popover from an element (allow manual dismiss)
You can control visibility yourself instead of letting the Popover
manage it automatically by using the isVisible
and onRequestClose
prop. This would allow you to manually dismiss the Popover
. onRequestClose
is called when the user taps outside the Popover
. If you want to force the user to tap a button inside the Popover
to dismiss, you could omit onRequestClose
and change the state manually.
import React, { useState, useEffect } from 'react';
import Popover from 'react-native-popover-view';
function App() {
const [showPopover, setShowPopover] = useState(false);
useEffect(() => {
setTimeout(() => setShowPopover(false), 2000);
}, []);
return (
<Popover
isVisible={showPopover}
onRequestClose={() => setShowPopover(false)}
from={(
<TouchableOpacity onPress={() => setShowPopover(true)}>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
)}>
<Text>This popover will be dismissed automatically after 2 seconds</Text>
</Popover>
);
}
Showing popover from a reference to an element
If you need even more control (e.g. having the Popover
and Touchable
in complete different parts of the node heiarchy), you can just pass in a normal ref
.
import React, { useRef, useState } from 'react';
import Popover from 'react-native-popover-view';
function App() {
const touchable = useRef();
const [showPopover, setShowPopover] = useState(false);
return (
<>
<TouchableOpacity ref={touchable} onPress={() => setShowPopover(true)}>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
<Popover from={touchable} isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
<Text>This is the contents of the popover</Text>
</Popover>
</>
);
}
Showing popover from a predetermined position
If you already know the exact location of the place you want the Popover
to anchor, you can create a Rect(x, y, width, height)
object, and show from that Rect
. Note that Rect(x, y, 0, 0)
is equivalent to showing from the point (x, y)
.
import React, { useState } from 'react';
import Popover, { Rect } from 'react-native-popover-view';
function App() {
const [showPopover, setShowPopover] = useState(false);
return (
<>
<TouchableOpacity onPress={() => setShowPopover(true)}>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
<Popover from={new Rect(5, 100, 20, 40)} isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
<Text>This is the contents of the popover</Text>
</Popover>
</>
);
}
Showing popover centered on the screen
If you just want the popover to be centered on the screen, not anchored to anything, you can omit the from
prop altogether.
import React, { useState } from 'react';
import Popover from 'react-native-popover-view';
function App() {
const [showPopover, setShowPopover] = useState(false);
return (
<>
<TouchableOpacity onPress={() => setShowPopover(true)}>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
<Popover isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
<Text>This popover will stay centered on the screen, even when the device is rotated!</Text>
</Popover>
</>
);
}
Showing popover in a specific direction
Normally, the Popover
will automatically pick the direction it pops out based on where it would fit best on the screen, even showing centered and unanchored if the contents would be compressed otherwise. If you would like to force a direction, you can pass in the placement
prop.
import React from 'react';
import Popover, { PopoverPlacement } from 'react-native-popover-view';
function App() {
return (
<Popover
placement={PopoverPlacement.BOTTOM}
from={(
<TouchableOpacity>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
)}>
<Text>This is the contents of the popover</Text>
</Popover>
);
}
Showing popover as a tooltip
Normally, the popover creates a background that dims the content behind it. You can also show a tooltip without fading the background. Read more about the available modes below. Note that when using TOOLTIP
mode, you must control the visiblity manually (onRequestClose
will never be called).
import React, { useRef, useState } from 'react';
import Popover, { PopoverMode, PopoverPlacement } from 'react-native-popover-view';
function App() {
const [showPopover, setShowPopover] = useState(false);
return (
<Popover
mode={PopoverMode.TOOLTIP}
placement={PopoverPlacement.TOP}
isVisible={showPopover}
from={(
<TouchableOpacity onPress={() => setShowPopover(true)}>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
)}>
<>
<Text>This is the contents of the popover</Text>
<TouchableOpacity onPress={() => setShowPopover(false)}>
<Text>Dismiss</Text>
</TouchableOpacity>
</>
</Popover>
);
}
Using class components
If you are not using functional components and hooks yet, you can still use class components in almost every case outlined above. Here is an example of using a class component and a ref
, which is slightly different when using class components.
import React, { createRef } from 'react';
import Popover from 'react-native-popover-view';
class App extends React.Component {
constructor(props) {
super(props);
this.touchable = createRef();
this.state = {
showPopover: false
}
}
render() {
return (
<>
<TouchableOpacity ref={this.touchable} onPress={() => this.setState({ showPopover: true })}>
<Text>Press here to open popover!</Text>
</TouchableOpacity>
<Popover
from={this.touchable}
isVisible={this.state.showPopover}
onRequestClose={() => this.setState({ showPopover: false })}>
<Text>This is the contents of the popover</Text>
</Popover>
</>
);
}
}
Version 0.6 brought some large changes, increasing efficiency, stability, and flexibility. For React Navigation users, there is a new prop, showInPopover
, that you might want to pass to createPopoverStackNavigator
if you want to customize when to show stack views in a Popover. This replaces PopoverNavigation.shouldShowInPopover
. See the new setup instructions below for details.
I have rebuilt most of the library from the ground up for improved handling of changing screen sizes on tablets (split-screen mode), a redesigned automatic placement algorithm, TypeScript, and ES6 compatibility.