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 'wheel', 'inline', 'palette' and 'menu' variants are iOS only, the 'radio' variant is Android only. 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