Extensible popup menu component for React Native.
Target platforms are both Android and iOS.
Installation
npm install react-native-popup-menu --save
Demo
![](./android.demo.gif)
Basic Usage
Wrap your application inside MenuContext
and then simply use Menu
component where you need it. Below you can find simple examples.
For more detailed documentation check API.
import React from 'react';
import { Text, AppRegistry } from 'react-native';
import Menu, {
MenuContext,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
export const App = () => (
<MenuContext style={{flexDirection: 'column', padding: 30}}>
<Text>Hello world!</Text>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2}>
<Text style={{color: 'red'}}>Two</Text>
</MenuOption>
<MenuOption value={3} disabled={true} text='Three' />
</MenuOptions>
</Menu>
</MenuContext>
);
export default class ControlledExample extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = { opened: true };
}
onOptionSelect(value) {
alert(`Selected number: ${value}`);
this.setState({ opened: false });
}
render() {
return (
<MenuContext
style={{flexDirection: 'column', padding: 30}}>
<Text>Hello world!</Text>
<Menu
opened={this.state.opened}
onBackdropPress={() => this.setState({ opened: false })}
onSelect={value => this.onOptionSelect(value)}>
<MenuTrigger
onPress={() => this.setState({ opened: true })}
text='Select option'/>
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2}>
<Text style={{color: 'red'}}>Two</Text>
</MenuOption>
<MenuOption value={3} disabled={true} text='Three' />
</MenuOptions>
</Menu>
</MenuContext>
);
}
}
import { ..., renderers} from 'react-native-popup-menu';
export const App = () => (
<MenuContext style={{flexDirection: 'column', padding: 30}}>
<Text>Hello world!</Text>
<Menu renderer={renderers.SlideInMenu}>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption onSelect={() => alert('option one')} text='One' />
<MenuOption onSelect={() => alert('option two')} text='Two' />
</MenuOptions>
</Menu>
</MenuContext>
);
Documentation