Skip to main content
Version: Next 🚧

Migrate from react-native-popup-menu

Menu takes the options as one actions array, and its children is the trigger. There's no MenuProvider to wrap the app in.

- import { Menu, MenuOption, MenuOptions, MenuProvider, MenuTrigger } from 'react-native-popup-menu';
+ import { Menu } from '@elik56a/react-native-pickers';

- <Menu onSelect={(value) => (value === 'save' ? save() : remove())}>
- <MenuTrigger text="Options" />
- <MenuOptions>
- <MenuOption value="save" text="Save" />
- <MenuOption value="delete">
- <Text style={{ color: 'red' }}>Delete</Text>
- </MenuOption>
- </MenuOptions>
- </Menu>
+ <Menu
+ actions={[
+ { label: 'Save', onPress: save },
+ { label: 'Delete', destructive: true, onPress: remove },
+ ]}
+ >
+ <Text>Options</Text>
+ </Menu>

Remove <MenuProvider> from your app root.

react-native-popup-menuReact Native Pickers
MenuTrigger / textthe trigger as children
MenuTrigger triggerOnLongPressopenOnLongPress
MenuOption textlabel
MenuOption onSelect / Menu onSelect(value)onPress on each action
MenuOption disableddisabled
a red MenuOption childdestructive: true
custom MenuOption childrenicon and description, or styles
renderer={renderers.SlideInMenu}presentation="sheet"
renderer={renderers.Popover} / rendererProps—
opened (controlled)—
onOpen / onCloseonOpen / onClose
customStylesstyles={{ trigger, menu, action, actionLabel }}

See all migration guides for other libraries.