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

ContextMenu

GitHub

Changelog

npm

A SwiftUI ContextMenu component for displaying context menus.

iOS

tvOS

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, Host } from '@expo/ui/swift-ui';

<Host style={{ width: 150, height: 50 }}>
  <ContextMenu>
    <ContextMenu.Items>
      <Button
        systemImage="person.crop.circle.badge.xmark"
        onPress={() => console.log('Pressed1')}>
        Hello
      </Button>
      <Button
        variant="bordered"
        systemImage="heart"
        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">
        Show Menu
      </Button>
    </ContextMenu.Trigger>
  </ContextMenu>
</Host>

See Official SwiftUI documentation for more information.

API

Components

`ContextMenu`

iOS

tvOS

Type: React.Element<ContextMenuProps>

ContextMenu allows you to create a context menu, which can be used to provide additional options to the user.

Props of the ContextMenu component.

ContextMenuProps

`activationMethod`

iOS

tvOS

Optional • Type: ActivationMethod

Determines how the context menu will be activated.

`children`

iOS

tvOS

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.

Inherited Props

CommonViewModifierProps

`Items`

iOS

tvOS

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

Items visible inside the context menu. It could be Section, Divider, Button, Switch, Picker or even ContextMenu itself for nested menus. Remember to use components from the @expo/ui/swift-ui library.

`Preview`

iOS

tvOS

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

The component visible above the menu when it is opened.

Deprecated Use ContextMenu component as Submenu instead.

`Submenu`

iOS

tvOS

Type: React.Element<SubmenuProps>

`Trigger`

iOS

tvOS

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

The component visible all the time that triggers the menu when tapped or long-pressed.

Types

`ActivationMethod`

iOS

tvOS

Literal Type: string

Activation method of the context menu.

singlePress: The context menu is opened with a single tap. Does not isolate the content.
longPress: The context menu is opened with a long press. On iOS additionally Highlights the content by blurring the background.

Acceptable values are: 'singlePress' | 'longPress'