• Simple: By default the popover will float in the center of the screen, but if you choose to anchor it to a view (like a Touchable) or to a point on the screen, it will automatically find the best placement to accommodate the popover content.
• Customizable: Tweak everything, including the popover and arrow style, placement heuristics, animation configuration, and more.
• Adaptable: Popover adapts to changing content size, screen size, and orientation, and will move to accomidate the on-screen keyboard for text input into the popover.

1npm i react-native-popover-view

or

1yarn add react-native-popover-view

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.

1import React from 'react';
2import Popover from 'react-native-popover-view';
3
4function App() {
5  return (
6    <Popover
7      from={(
8        <TouchableOpacity>
9          <Text>Press here to open popover!</Text>
10        </TouchableOpacity>
11      )}>
12      <Text>This is the contents of the popover</Text>
13    </Popover>
14  );
15}

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.

1import React from 'react';
2import Popover from 'react-native-popover-view';
3
4function App() {
5  return (
6    <Popover
7      from={(sourceRef, showPopover) => (
8        <View>
9          <TouchableOpacity onLongPress={showPopover}>
10            <Text ref={sourceRef}>Press here to open popover!</Text>
11          </TouchableOpacity>
12        </View>
13      )}>
14      <Text>This is the contents of the popover</Text>
15    </Popover>
16  );
17}

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.

1import React, { useState, useEffect } from 'react';
2import Popover from 'react-native-popover-view';
3
4function App() {
5  const [showPopover, setShowPopover] = useState(false);
6
7  useEffect(() => {
8    setTimeout(() => setShowPopover(false), 2000);
9  }, []);
10
11  return (
12    <Popover
13      isVisible={showPopover}
14      onRequestClose={() => setShowPopover(false)}
15      from={(
16        <TouchableOpacity onPress={() => setShowPopover(true)}>
17          <Text>Press here to open popover!</Text>
18        </TouchableOpacity>
19      )}>
20      <Text>This popover will be dismissed automatically after 2 seconds</Text>
21    </Popover>
22  );
23}

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 hierarchy), you can just pass in a normal ref.

1import React, { useRef, useState } from 'react';
2import Popover from 'react-native-popover-view';
3
4function App() {
5  const touchable = useRef();
6  const [showPopover, setShowPopover] = useState(false);
7
8  return (
9    <>
10      <TouchableOpacity ref={touchable} onPress={() => setShowPopover(true)}>
11        <Text>Press here to open popover!</Text>
12      </TouchableOpacity>
13      <Popover from={touchable} isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
14        <Text>This is the contents of the popover</Text>
15      </Popover>
16    </>
17  );
18}

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).

1import React, { useState } from 'react';
2import Popover, { Rect } from 'react-native-popover-view';
3
4function App() {
5  const [showPopover, setShowPopover] = useState(false);
6
7  return (
8    <>
9      <TouchableOpacity onPress={() => setShowPopover(true)}>
10        <Text>Press here to open popover!</Text>
11      </TouchableOpacity>
12      <Popover from={new Rect(5, 100, 20, 40)} isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
13        <Text>This is the contents of the popover</Text>
14      </Popover>
15    </>
16  );
17}

Showing popover without anchor

If you just want the popover to be floating on the screen, not anchored to anything, you can omit the from prop altogether.

1import React, { useState } from 'react';
2import Popover from 'react-native-popover-view';
3
4function App() {
5  const [showPopover, setShowPopover] = useState(false);
6
7  return (
8    <>
9      <TouchableOpacity onPress={() => setShowPopover(true)}>
10        <Text>Press here to open popover!</Text>
11      </TouchableOpacity>
12      <Popover isVisible={showPopover} onRequestClose={() => setShowPopover(false)}>
13        <Text>This popover will stay centered on the screen, even when the device is rotated!</Text>
14      </Popover>
15    </>
16  );
17}

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.

1import React from 'react';
2import Popover, { PopoverPlacement } from 'react-native-popover-view';
3
4function App() {
5  return (
6    <Popover
7      placement={PopoverPlacement.BOTTOM}
8      from={(
9        <TouchableOpacity>
10          <Text>Press here to open popover!</Text>
11        </TouchableOpacity>
12      )}>
13      <Text>This is the contents of the popover</Text>
14    </Popover>
15  );
16}

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).

1import React, { useRef, useState } from 'react';
2import Popover, { PopoverMode, PopoverPlacement } from 'react-native-popover-view';
3
4function App() {
5  const [showPopover, setShowPopover] = useState(false);
6
7  return (
8    <Popover
9      mode={PopoverMode.TOOLTIP}
10      placement={PopoverPlacement.TOP}
11      isVisible={showPopover}
12      from={(
13        <TouchableOpacity onPress={() => setShowPopover(true)}>
14          <Text>Press here to open popover!</Text>
15        </TouchableOpacity>
16      )}>
17      <>
18        <Text>This is the contents of the popover</Text>
19        <TouchableOpacity onPress={() => setShowPopover(false)}>
20          <Text>Dismiss</Text>
21        </TouchableOpacity>
22      </>
23    </Popover>
24  );
25}

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.

1import React, { createRef } from 'react';
2import Popover from 'react-native-popover-view';
3
4class App extends React.Component {
5  constructor(props) {
6    super(props);
7
8    this.touchable = createRef();
9    this.state = {
10      showPopover: false
11    }
12  }
13
14  render() {
15    return (
16      <>
17        <TouchableOpacity ref={this.touchable} onPress={() => this.setState({ showPopover: true })}>
18          <Text>Press here to open popover!</Text>
19        </TouchableOpacity>
20        <Popover
21          from={this.touchable}
22          isVisible={this.state.showPopover}
23          onRequestClose={() => this.setState({ showPopover: false })}>
24          <Text>This is the contents of the popover</Text>
25        </Popover>
26      </>
27    );
28  }
29}

All props are optional

The from prop can be:

• A React element. If that element has an onPress prop, that prop will be be used to open the Popover.
• A ref object created using useRef in function components or createRef in class components.
• A function that takes two ordered argument, a ref and a showPopover callback, and returns a React element. Pass the ref argument to ref prop of the element that will be the source of the Popover (the view that the arrow will point to), and call showPopover callback to trigger the popover (or pass to the onPress prop or similar of a component). You can also ignore the showPopover argument and control visibility using the isVisible prop.
• A point: { x: number, y: number }. In React Native coordinate system, (0, 0) is the top left of the screen.
• A rectangle: { x: number, y: number, width: number, height: number }. The popover arrow will be pinned to the edges of the rectangle.

If no from is provided, the popover will float in the center of the screen.

The Popover can show in three modes:

• Popover.MODE.RN_MODAL ('rn-modal')
• Popover.MODE.JS_MODAL ('js-modal')
• Popover.MODE.TOOLTIP ('tooltip')

RN Modal (Default)

In all cases, start by passing the debug={true} prop to the Popover, to see if the debug output can help you figure out the issue.

Show from a ref not working

If on an Android device, try adding these props to the component whose ref you passed in to from:

• renderToHardwareTextureAndroid={true}
• collapsable={false}

4.x to 5.0

Pull requests are welcome; if you find that you are having to bend over backwards to make this work for you, feel free to open an issue or PR! Of course, try to keep the same coding style if possible and I'll try to get back to you as soon as I can.

Use yarn build to build the dist folder (compile TypeScript to JavaScript), and use yarn watch to continuously build on save.