react-native-popup-menu
# react-native-popup-menu [](https://www.npmjs.com/package/react-native-popup-menu) Extensible popup menu component for React Native for Android, iOS and (unofficially) UWP and react-native-web. Features: * Simple to use popup/context menu * Multiple modes: animated, not animated, slide in from bottom or popover * By default opening and closing animations * Optional back button handling * Easy styling * Customizable on various levels - menu options, positioning, animations * Can work as controlled as well as uncontrolled component * Different lifecycle hooks * RTL layout support Community driven features: * Support for UWP, react-native-web and react-native-desktop * Typescript definitions We thank our community for maintaining features that goes over our scope. | Context Menu, Slide-in Menu | Popover | |---|---| ||| ## Installation ``` npm install react-native-popup-menu --save ``` If you are using **older RN versions** check our compatibility table. ## Basic Usage Wrap your application inside `MenuProvider` and then simply use `Menu` component where you need it. Below you can find a simple example. For more detailed documentation check [API](./doc/api.md). ```js // your entry point import { MenuProvider } from 'react-native-popup-menu'; export const App = () => ( <MenuProvider> <YourApp /> </MenuProvider> ); // somewhere in your app import { Menu, MenuOptions, MenuOption, MenuTrigger, } from 'react-native-popup-menu'; export const YourComponent = () => ( <View> <Text>Hello world!</Text> <Menu> <MenuTrigger text='Select action' /> <MenuOptions> <MenuOption onSelect={() => alert(`Save`)} text='Save' /> <MenuOption onSelect={() => alert(`Delete`)} > <Text style={{color: 'red'}}>Delete</Text> </MenuOption> <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' /> </MenuOptions> </Menu> </View> ); ``` ## Documentation - [Examples](doc/examples.md) - [API](doc/api.md) - [Extension points](doc/extensions.md) ## Contributing Contributions are welcome! Just open an issues with any idea or pull-request if it is no-brainer. Make sure all tests and linting rules pass. ## React Native Compatibility We keep compatibility on best effort basis. First table describes what minimal version of RN (or React) is needed to use version of popup menu. | popup-menu version | min RN (React) version | | ------------------ | -------------- | | 0.13 | 0.55 (16.3.1) | | 0.9 | 0.40 | | 0.8 | 0.38 | | 0.7 | 0.18 | Second is other way round - which minimal version of popup-menu is required to work well with RN (or React version) | RN (React) version | popup-menu version | | ------------------ | -------------- | | 0.81+ (SafeAreaView depecation, see [#301](https://github.com/instea/react-native-popup-menu/issues/301)) | 0.19 | | 0.78 (19.0) | 0.18 |