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

Picker

GitHub

Changelog

npm

A SwiftUI Picker component for selecting options from a list.

iOS

tvOS

A picker component that allows users to select from a list of options with different display styles.

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.

Segmented picker

import { Host, Picker } from '@expo/ui/swift-ui';

<Host matchContents>
  <Picker
    options={['$', '$$', '$$$', '$$$$']}
    selectedIndex={selectedIndex}
    onOptionSelected={({ nativeEvent: { index } }) => {
      setSelectedIndex(index);
    }}
    variant="segmented"
  />
</Host>

See official SwiftUI documentation for more information.

Wheel picker

The wheel variant is not available on Apple TV.

import { Host, Picker } from '@expo/ui/swift-ui';

<Host style={{ height: 100 }}>
  <Picker
    options={['$', '$$', '$$$', '$$$$']}
    selectedIndex={selectedIndex}
    onOptionSelected={({ nativeEvent: { index } }) => {
      setSelectedIndex(index);
    }}
    variant="wheel"
  />
</Host>

See official SwiftUI documentation for more information.

API

Component

`Picker`

iOS

tvOS

Type: React.Element<PickerProps>

Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.

PickerProps

`color`

iOS

tvOS

Optional • Type: ColorValue

Picker color. On iOS it only applies to the 'menu' variant.

`label`

iOS

tvOS

Optional • Type: string

A label displayed on the picker when in 'menu' variant inside a form section on iOS.

`onOptionSelected`

iOS

tvOS

Optional • Type:

(event: {
  nativeEvent: {
  index: number, 
  label: string
}
}) => void

Callback function that is called when an option is selected.

`options`

iOS

tvOS

Type: string[]

An array of options to be displayed in the picker.

`selectedIndex`

iOS

tvOS

Literal type: union

The index of the currently selected option.

Acceptable values are: number | null

`variant`

iOS

tvOS

Optional • Literal type: string • Default: 'segmented'

The variant of the picker, which determines its appearance and behavior. The 'inline' variant can only be used inside sections or lists. The 'palette' variant displays differently inside menus.

Note: The wheel variant is not available on tvOS.

Acceptable values are: 'wheel' | 'segmented' | 'menu' | 'inline' | 'palette'

Inherited Props

CommonViewModifierProps