react-native-simple-popover
react-native-simple-popover
provides a simple popover implementation and supports automatic popover placement.
Installation
$ npm install react-native-simple-popover
This package does not provide native modules and does not require linking and rebuilding your application.
API
<PopoverContainer>
Provides ability for child Popover
components to register and render inside this element. Child popovers are constrained
by this component and render above the children.
Props
Prop | Type | Default | Description |
---|---|---|---|
padding | Number | 0 |
Pads component area to constrain your popovers. |
children | ReactElements | null |
Element tree that you want your popovers to render in. |
<Popover>
Renders component with defined properties around the wrapped component.
Props
Prop | Type | Default | Description |
---|---|---|---|
component | Component | 0 |
Popover component to render. |
isVisible | Boolean | true |
Defines if popover is visible. |
arrowColor | Color | 'white' |
Popover's arrow color. |
arrowWidth | Number | 15 |
Popover's arrow width. |
arrowHeight | Number | 10 |
Popover's arrow height. |
placement | String | 'auto' |
Where popover should be placed related to the wrapped component. If 'auto' , all placement options are tried and first suitable placement option is picked. Supported placement options: 'left' , 'right' , 'top' , 'bottom' , 'auto' . |
children | ReactElement | null |
Element that you want your popover to point to. |
pointerEvents | String | 'box-none' |
Controls whether the View can be the target of touch event. Supported options: 'auto' , 'none' , 'box-none' and 'box-only' . |
offset | Object | { x: 0, y: 0 } |
Popover's offset setting. |
Example
Please check Example directory for an example project with the following implementation:
import React, { Component } from 'react';
import {
AppRegistry,
Button,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
import { Popover, PopoverContainer } from 'react-native-simple-popover';
class Example extends Component {
state = {
isPopoverVisible: true,
popoverPlacement: 'top',
};
render() {
return (
<PopoverContainer padding={20}>
<View style={styles.container}>
<Popover
placement={this.state.popoverPlacement}
arrowColor="#114B5F"
arrowWidth={16}
arrowHeight={8}
isVisible={this.state.isPopoverVisible}
component={() => (
<View style={styles.popoverContainer}>
<Text style={styles.popoverText}>
This is a very long popover text.
Container padding affects max width and height of this popover.
</Text>
</View>
)}
>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</Popover>
<View style={styles.buttons}>
<Button
title="Toggle Popover"
onPress={() => {
this.setState({ isPopoverVisible: !this.state.isPopoverVisible });
}}
/>
<Button
title="Toggle Placement"
onPress={() => {
this.setState({
popoverPlacement: this.state.popoverPlacement === 'top' ? 'bottom': 'top'
});
}}
/>
</View>
</View>
</PopoverContainer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
buttons: {
position: 'absolute',
flexDirection: 'row',
flex: 1,
top: 0,
left: 0,
marginTop: 20,
},
popoverContainer: {
backgroundColor: '#114B5F',
padding: 8,
borderRadius: 5,
},
popoverText: {
color: '#E4FDE1',
}
});
AppRegistry.registerComponent('Example', () => Example);