BasicDropdownMenuExample.tsx import {
Host ,
DropdownMenu ,
DropdownMenuItem ,
OutlinedButton ,
Text ,
Icon ,
} from '@expo/ui/jetpack-compose' ;
import { useState } from 'react' ;
const homeIcon = require ( './assets/home.xml' ) ;
export default function BasicDropdownMenuExample ( ) {
const [ isExpanded, setIsExpanded] = useState ( false ) ;
return (
< Host matchContents >
< DropdownMenu expanded = { isExpanded} onDismissRequest = { ( ) => setIsExpanded ( false ) } >
< DropdownMenu.Trigger >
< OutlinedButton onClick = { ( ) => setIsExpanded ( true ) } > Show Menu </ OutlinedButton >
</ 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 > ) ;
}
RNTriggerDropdownMenuExample.tsx import {
Host ,
DropdownMenu ,
DropdownMenuItem ,
Text as ComposeText ,
RNHostView ,
} from '@expo/ui/jetpack-compose' ;
import { useState } from 'react' ;
import { Pressable , Text } from 'react-native' ;
export default function RNTriggerDropdownMenuExample ( ) {
const [ isExpanded, setIsExpanded] = useState ( false ) ;
return (
< Host matchContents >
< DropdownMenu expanded = { isExpanded} onDismissRequest = { ( ) => setIsExpanded ( false ) } >
< DropdownMenu.Trigger >
< RNHostView matchContents >
< Pressable onPress = { ( ) => setIsExpanded ( true ) } style = { {
alignSelf: 'flex-start' ,
paddingHorizontal: 16 ,
paddingVertical: 10 ,
borderRadius: 8 ,
backgroundColor: '#9B59B6' ,
} } >
< Text style = { { color: 'white' , fontWeight: '600' } } > RN Pressable Trigger </ Text >
</ Pressable >
</ RNHostView >
</ DropdownMenu.Trigger >
< DropdownMenu.Items >
< DropdownMenuItem onClick = { ( ) => setIsExpanded ( false ) } >
< DropdownMenuItem.Text >
< ComposeText > Item 1 </ ComposeText >
</ DropdownMenuItem.Text >
</ DropdownMenuItem >
< DropdownMenuItem onClick = { ( ) => setIsExpanded ( false ) } >
< DropdownMenuItem.Text >
< ComposeText > Item 2 </ ComposeText >
</ DropdownMenuItem.Text >
</ DropdownMenuItem >
</ DropdownMenu.Items >
</ DropdownMenu >
</ Host > ) ;
}
Type: React.Element < DropdownMenuProps >
Props of the DropdownMenu component.
The 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.
Optional • Type:
ColorValue The color of the container holding the dropdown menu items.
Optional • Type: boolean
Whether the dropdown menu is expanded (visible).
Optional • Type: ModifierConfig[]
Modifiers for the component.
Optional • Type: ( ) => void
Callback 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.
Optional • Type:
StyleProp< ViewStyle > Optional styles to apply to the DropdownMenu.
Type: React.Element < DropdownMenuItemProps>
A dropdown menu item component that wraps Compose's DropdownMenuItem.
Should be used inside DropdownMenu.Items or ExposedDropdownMenu.
Type: React.Element < {
children: ReactNode
} >
Container for items displayed in the dropdown menu.
Children should be DropdownMenuItem components or other native views.
Type: React.Element < {
children: ReactNode
} >
Preview content shown during long press (iOS only).
Type: React.Element < {
children: ReactNode
} >
Container for the trigger element that opens the dropdown menu.
