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

Picker

A SwiftUI Picker component for selecting options from a list.

iOS

tvOS

GitHub

npm

Changelog

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

Example

<Picker modifiers={[pickerStyle('segmented')]}>
  <Text modifiers={[tag('option1')]}>Option 1</Text>
  <Text modifiers={[tag(0)]}>Option 3</Text>
</Picker>

PickerProps

`children`

iOS

tvOS

Optional • Type: React.ReactNode

The content of the picker. You can use Text components with tag modifiers to display the options.

`label`

iOS

tvOS

Optional • Literal type: union

A label displayed on the picker.

Acceptable values are: string | React.ReactNode

`onSelectionChange`

iOS

tvOS

Optional • Type:

(event: {
  nativeEvent: {
  selection: string | number
}
}) => void

Callback function that is called when an option is selected. Gets called with the selected tag value.

`selection`

iOS

tvOS

Optional • Literal type: union

The selected option's tag modifier value.

Acceptable values are: string | number | null

`systemImage`

iOS

tvOS

Optional • Type: SFSymbol

The name of the system image (SF Symbol). For example: 'photo', 'heart.fill', 'star.circle'

Inherited Props

CommonViewModifierProps