Reference version

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/ui

If 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

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: ColorValue

The color of the container holding the context menu items.

modifiers

Android
Optional • Type: ModifierConfig[]

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 }>

Android

Type: React.Element<SubmenuProps>

Trigger

Android

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