This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).
ContextMenu
A Jetpack Compose ContextMenu component for displaying context menus.
Android
Expo UI ContextMenu matches the official Jetpack Compose Menu API and displays a context menu when a trigger element is long-pressed or clicked.
Note: Also known as DropdownMenu.
Installation
Terminal
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Usage
Basic context menu
BasicContextMenuExample.tsx
import { Host, ContextMenu, Button } from '@expo/ui/jetpack-compose'; export default function BasicContextMenuExample() { return ( <Host matchContents> <ContextMenu style={{ width: 150, height: 50 }}> <ContextMenu.Items> <Button onPress={() => console.log('Pressed Hello')}>Hello</Button> <Button variant="bordered" color="#ff0000" onPress={() => console.log('Pressed Love it')}> Love it </Button> </ContextMenu.Items> <ContextMenu.Trigger> <Button variant="bordered" onPress={() => {}}> Show Menu </Button> </ContextMenu.Trigger> </ContextMenu> </Host> ); }
API
import { ContextMenu } from '@expo/ui/jetpack-compose';
Components
Type: React.Element<ContextMenuProps>
Props of the ContextMenu component.
Type:
ReactNodeThe contents of the submenu are used as an anchor for the context menu. The children will be wrapped in a pressable element, which triggers opening of the context menu.
Type: React.Element<ContextMenuContentProps>
Type: React.Element<SubmenuProps>