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.
npm i --save react-native-popover'use strict';varReact=require('react');varPopover=require('react-native-popover');var{ AppRegistry, StyleSheet, Text, TouchableHighlight, View,}=require('react-native');varPopoverExample=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(<Viewstyle={styles.container}><TouchableHighlightref='button'style={styles.button}onPress={this.showPopover}><Textstyle={styles.buttonText}>Press me</Text></TouchableHighlight><PopoverisVisible={this.state.isVisible}fromRect={this.state.buttonRect}onClose={this.closePopover}><Text>I'm the content of this popover!</Text></Popover></View>);}});varstyles=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);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.
| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| isVisible | bool | Yes | false | Show/Hide the popover |
| fromRect | rect | No | {} | Rectangle at which to anchor the popover |
| displayArea | rect | Yes | screen rect | Area where the popover is allowed to be displayed |
| placement | string | Yes | '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. |
| onClose | function | Yes | Callback to be fired when the user taps the popover | |
| customShowHandler | function | Yes | Custom show animation handler - uses a react-tween-state wrapper API in order to show the modal. See default show handler. | |
| customHideHandler | function | Yes | Custom 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}
The code supporting animations was inspired and adapted from @brentvatne's Transition.js mixin.
MIT Licensed
