DropdownMenu
A Jetpack Compose DropdownMenu component for displaying dropdown menus.
Expo UI DropdownMenu matches the official Jetpack Compose Menu API and displays a dropdown menu when a trigger element is pressed.
Installation
- 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 dropdown menu
import { Host, DropdownMenu, Button, Text, Icon } from '@expo/ui/jetpack-compose'; import { useState } from 'react'; export default function BasicDropdownMenuExample() { const [isExpanded, setIsExpanded] = useState(false); return ( <Host matchContents> <DropdownMenu expanded={isExpanded} onDismissRequest={() => setIsExpanded(false)}> <DropdownMenu.Trigger> <Button variant="bordered" onPress={() => setIsExpanded(true)}> Show Menu </Button> </DropdownMenu.Trigger> <DropdownMenu.Items> <DropdownMenuItem onClick={() => { setIsExpanded(false); console.log('Home pressed'); }}> <DropdownMenuItem.Text> <Text>Home</Text> </DropdownMenuItem.Text> <DropdownMenuItem.LeadingIcon> <Icon source={homeIcon} size={24} /> </DropdownMenuItem.LeadingIcon> </DropdownMenuItem> </DropdownMenu.Items> </DropdownMenu> </Host> ); }
API
import { DropdownMenu } from '@expo/ui/jetpack-compose';
Components
Type: React.Element<DropdownMenuProps>
Props of the DropdownMenu component.
ReactNodeThe contents of the submenu are used as an anchor for the dropdown menu. The children will be wrapped in a pressable element, which triggers opening of the dropdown menu.
() => voidCallback fired when the menu requests to be dismissed (e.g. tapping outside).
Must be provided when expanded is true to allow the menu to close.
Type: React.Element<DropdownMenuItemProps>
A dropdown menu item component that wraps Compose's DropdownMenuItem.
Should be used inside ContextMenu.Items.
Type: React.Element<{
children: ReactNode
}>
Container for items displayed in the dropdown menu.
Children should be DropdownMenuItem components or other native views.