Home

Awesome

react-native-popover

npm version npm version npm licence

A <Popover> component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas and contributions are very welcome.

Demo

Install

npm i --save react-native-popover

Usage

'use strict';

var React = require('react');
var Popover = require('react-native-popover');
var {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = require('react-native');

var PopoverExample = React.createClass({
  getInitialState() {
    return {
      isVisible: false,
      buttonRect: {},
    };
  },

  showPopover() {
    this.refs.button.measure((ox, oy, width, height, px, py) => {
      this.setState({
        isVisible: true,
        buttonRect: {x: px, y: py, width: width, height: height}
      });
    });
  },

  closePopover() {
    this.setState({isVisible: false});
  },

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight ref='button' style={styles.button} onPress={this.showPopover}>
          <Text style={styles.buttonText}>Press me</Text>
        </TouchableHighlight>

        <Popover
          isVisible={this.state.isVisible}
          fromRect={this.state.buttonRect}
          onClose={this.closePopover}>
          <Text>I'm the content of this popover!</Text>
        </Popover>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgb(43, 186, 180)',
  },
  button: {
    borderRadius: 4,
    padding: 10,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: '#ccc',
    borderColor: '#333',
    borderWidth: 1,
  },
  buttonText: {
  }
});

AppRegistry.registerComponent('PopoverExample', () => PopoverExample);

Displaying the popover on top of other elements

React Native doesn't support directly setting a zIndex on a view. What is recommended instead is to rearrange your view hierarchy and put the popover last at the root of your app. See facebook/react-native#131

However, as an alternative, I recommend you use @brentvatne's react-native-overlay library to wrap <Popover /> and bring it to the front no matter where it sits in the render tree.

Props

PropTypeOptionalDefaultDescription
isVisibleboolYesfalseShow/Hide the popover
fromRectrectNo{}Rectangle at which to anchor the popover
displayArearectYesscreen rectArea where the popover is allowed to be displayed
placementstringYes'auto'How to position the popover - top | bottom | left | right | auto. When 'auto' is specified, it will determine the ideal placement so that the popover is fully visible within displayArea.
onClosefunctionYesCallback to be fired when the user taps the popover
customShowHandlerfunctionYesCustom show animation handler - uses a react-tween-state wrapper API in order to show the modal. See default show handler.
customHideHandlerfunctionYesCustom hide animation handler - uses a react-tween-state wrapper API in order to hide the modal. See default hide handler.

rect is an object with the following properties: {x: number, y: number, width: number, height: number}

Credits

The code supporting animations was inspired and adapted from @brentvatne's Transition.js mixin.


MIT Licensed