1npm i react-native-popover-view

or

1yarn add react-native-popover-view

1import Popover from 'react-native-popover-view'
2
3...
4  render (
5    <Popover
6      isVisible={this.state.isVisible}>
7      <CustomElement />
8    </Popover>
9  )

If neither fromRect or fromView are provided, the popover will float in the center of the screen.

rect is an object with the following properties: {x: number, y: number, width: number, height: number}. You can create the object yourself, or import Popover, { Rect } from 'react-native-popover-view and create a rect by calling new Rect(x, y, width, height).

Likewise, size is an object with the following properties: {width: number, height: number}. You can create the object yourself, or import Popover, { Size } from 'react-native-popover-view and create a rect by calling new Size(width, height).

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)

1import React, { Component } from 'react';
2import Popover from 'react-native-popover-view';
3import {
4  AppRegistry,
5  StyleSheet,
6  Text,
7  TouchableHighlight,
8  View,
9} from 'react-native';
10
11class PopoverExample extends Component {
12  state = {
13    isVisible: false
14  }
15
16  showPopover() {
17    this.setState({isVisible: true});
18  }
19
20  closePopover() {
21    this.setState({isVisible: false});
22  }
23
24  render() {
25    return (
26      <View style={styles.container}>
27        <TouchableHighlight ref={ref => this.touchable = ref} style={styles.button} onPress={() => this.showPopover()}>
28          <Text>Press me</Text>
29        </TouchableHighlight>
30
31        <Popover
32          isVisible={this.state.isVisible}
33          fromView={this.touchable}
34          onRequestClose={() => this.closePopover()}>
35          <Text>I'm the content of this popover!</Text>
36        </Popover>
37      </View>
38    );
39  }
40});
41
42var styles = StyleSheet.create({
43  container: {
44    flex: 1,
45    alignItems: 'center',
46    justifyContent: 'center',
47    backgroundColor: 'rgb(43, 186, 180)',
48  },
49  button: {
50    borderRadius: 4,
51    padding: 10,
52    marginLeft: 10,
53    marginRight: 10,
54    backgroundColor: '#ccc',
55    borderColor: '#333',
56    borderWidth: 1,
57  }
58});
59
60AppRegistry.registerComponent('PopoverExample', () => PopoverExample);

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 fromView not working

First, make sure that the ref is defined prior to showing the Popover. If you set the Popover's isVisible prop to true while the variable passed into fromView is undefined, the Popover will show centered on the screen.

If you pass in a fromView prop, but the Popover still shows centered on the screen on an Android device, try adding these props to the component whose ref you passed in to fromView:

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

1.x to 2.0

• onClose has been renamed to onRequestClose (for clarity and consistency with normal RN Modals)
• New mode prop replaces showInModal. Replace showInModal={false} with mode={Popover.MODE.JS_MODAL}
• doneClosingCallback has been renamed onCloseComplete
• New backgroundStyle prop replaces showBackground. Replace showBackground={false} with backgroundStyle={{ backgroundColor: 'transparent' }}
• Fix in version 2.0 means that verticalOffset may no longer be needed, so if you are using it be sure to test

1.0 to 1.1

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.