This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

ContextMenu

GitHub

Changelog

npm

A Jetpack Compose ContextMenu component for displaying context menus.

Android

Note: Also known as DropdownMenu.

A context menu component that displays a menu when triggered, commonly used for actions and options.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

import { ContextMenu } from '@expo/ui/jetpack-compose';

<ContextMenu style={{ width: 150, height: 50 }}>
  <ContextMenu.Items>
    <Button
      elementColors={{ containerColor: '#0000ff', contentColor: '#00ff00' }}
      onPress={() => console.log('Pressed1')}>
      Hello
    </Button>
    <Button
      variant="bordered"
      color="#ff0000"
      onPress={() => console.log('Pressed2')}>
      Love it
    </Button>
    <Picker
      label="Doggos"
      options={['very', 'veery', 'veeery', 'much']}
      variant="menu"
      selectedIndex={selectedIndex}
      onOptionSelected={({ nativeEvent: { index } }) => setSelectedIndex(index)}
    />
  </ContextMenu.Items>
  <ContextMenu.Trigger>
    <Button variant="bordered" style={{ width: 150, height: 50 }}>
      Show Menu
    </Button>
  </ContextMenu.Trigger>
</ContextMenu>

See Official Jetpack Compose documentation for more information.

API

Components

`ContextMenu`

Android

Type: React.Element<ContextMenuProps>

Props of the ContextMenu component.

ContextMenuProps

`children`

Android

Type: ReactNode

The 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.

`color`

Android

Optional • Type: string

The color of the container holding the context menu items.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component

`style`

Android

Optional • Type: StyleProp<ViewStyle>

Optional styles to apply to the ContextMenu.

`Items`

Android

Type: React.Element<ContextMenuContentProps>

`Preview`

Android

Type: React.Element<{ children: ReactNode }>

`Submenu`

Android

Type: React.Element<SubmenuProps>

`Trigger`

Android

Type: React.Element<{ children: ReactNode }>