https://github.com/garrettmac/react-native-popover
https://github.com/garrettmac/react-native-popover
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/garrettmac/react-native-popover
- Owner: garrettmac
- Created: 2017-05-15T18:07:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-28T03:24:09.000Z (almost 8 years ago)
- Last Synced: 2024-10-06T01:23:19.736Z (8 months ago)
- Language: JavaScript
- Size: 2.02 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## react-native-popover
[](https://npmjs.org/package/react-native-popover "View this project on npm")
[](https://npmjs.org/package/react-native-popover "View this project on npm")
[](https://npmjs.org/package/react-native-popover "View this project on npm")
A `` 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.
## Install
```shell
npm i --save react-native-popover
```
## Usage
```jsx
'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 (
Press me
I'm the content of this popover!
);
}
});
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](https://github.com/facebook/react-native/issues/131#issuecomment-77764928)
However, as an alternative, I recommend you use [@brentvatne](https://github.com/brentvatne)'s [react-native-overlay](https://github.com/brentvatne/react-native-overlay) library to wrap `` and bring it to the front no matter where it sits in the render tree.
## Props
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](https://github.com/jeanregisser/react-native-popover/blob/master/Transition.js) API in order to show the modal. See [default show handler](https://github.com/jeanregisser/react-native-popover/blob/754a87b0befccfe534774f3166765732a99bfddf/Popover.js#L185-L192).
customHideHandler | function | Yes | | Custom hide animation handler - uses a [react-tween-state wrapper](https://github.com/jeanregisser/react-native-popover/blob/master/Transition.js) API in order to hide the modal. See [default hide handler](https://github.com/jeanregisser/react-native-popover/blob/754a87b0befccfe534774f3166765732a99bfddf/Popover.js#L193-L200).
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](https://github.com/brentvatne)'s [Transition.js mixin](https://github.com/brentvatne/react-native-modal/blob/8020a920e7f08a0f1acd6ce897fe888fa39a51bf/Transitions.js).
---
**MIT Licensed**
# react-native-popover