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.
// 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
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.
| 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 |
-
import Menu, {MenuOptions, MenuOption, MenuTrigger} from 'react-native-popup-menu'; const triggerCustomStyle = { triggerOuterWrapper: { width: 50, alignItems: 'center', ju
-
调用系统打电话、发短信、发邮件、打开网址功能 https://github.com/anarchicknight/react-native-communications 快速检索列表（按首字母） https://github.com/johanneslumpe/react-native-selectablesectionlistview 图表组件 https://github.com/tomaut
-
React Native 项目常用第三方组件汇总： React-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-i
-
调用系统打电话、发短信、发邮件、打开网址功能 https://github.com/anarchicknight/react-native-communications 快速检索列表（按首字母） https://github.com/johanneslumpe/react-native-selectablesectionlistview 图表组件 https://github.com/tomaut
-
常用三方组件: loadash -- 低版本系统 一些函数不支持. performance-now -- performance.now().更加专业，专门测试执行时间 moment -- 管理日期和时间的工具 react-native-code-push -- 热更新组件 react-native-i18n -- 国际化组件 react-native-device-info -- 设备信息 bu
-
以下是React Native的链接，有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View：https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条：https://js.coach/react-native/react-native-sleek-loa
-
React Native 项目常用第三方组件汇总： react-native-animatable 动画 react-navigation github : https://reactnavigation.org/docs/intro/ 路由组件 react-native-carousel && react-native-swiper 轮播 react-native-countdown
-
React-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 react-na
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
-
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Ima
-
本文向大家介绍react-native setState，包括了react-native setState的使用技巧和注意事项，需要的朋友参考一下 示例 要在应用程序中更改视图，可以使用setState-这将重新渲染您的组件及其任何子组件。setState在新状态和先前状态之间执行浅表合并，并触发组件的重新呈现。 setState 接受键值对象或返回键值对象的函数 键值对象 功能 使用函数对于基于
-
诸葛io移动统计支持React Native插件，以下为集成方法。 1. 环境准备 1.1. iOS环境 iOS 8.0+ 代码支持iOS8.0的系统 pod 1.0+ iOS系统的集成依赖于cocoaPod工具 1.2. Android环境 Android SDK 16+ 代码支持Android 16+ 1.3. React Native环境 react-native 0.50+ react-n