Skip to main content
Version: Next 🚧

Migrate from @react-native-menu/menu

MenuView shows the system menu, so it needs a development build and its icons are SF Symbols and Android drawables. Menu is pure JavaScript: it runs in Expo Go and on the web, looks like your other pickers, and takes any icon node. Each action has its own onPress, so there's no switch on the event id.

- import { MenuView } from '@react-native-menu/menu';
+ import { Menu } from '@elik56a/react-native-pickers';

- <MenuView
- title="Note"
- onPressAction={({ nativeEvent }) => {
- if (nativeEvent.event === 'edit') edit();
- if (nativeEvent.event === 'delete') remove();
- }}
- actions={[
- { id: 'edit', title: 'Edit', image: 'pencil' },
- { id: 'delete', title: 'Delete', attributes: { destructive: true }, image: 'trash' },
- ]}
- >
+ <Menu
+ title="Note"
+ accessibilityLabel="Note options"
+ actions={[
+ { label: 'Edit', onPress: edit, icon: <PencilIcon /> },
+ { label: 'Delete', destructive: true, onPress: remove, icon: <TrashIcon /> },
+ ]}
+ >
<MoreIcon />
- </MenuView>
+ </Menu>
@react-native-menu/menuReact Native Pickers
actions[].id + onPressActiononPress on each action
actions[].title / subtitlelabel / description
actions[].image / imageColoricon: any node
actions[].titleColorstyles={{ actionLabel }}
attributes.destructive / attributes.disableddestructive / disabled
attributes.hiddenleave the action out of the array
state: 'on'selected: true (a ✓)
subactions / displayInline—
titletitle
shouldOpenOnLongPressopenOnLongPress
onOpenMenu / onCloseMenuonOpen / onClose
isAnchoredToRightalign="end"
themeVariantPickersProvider colorScheme

See all migration guides for other libraries.