Picker

Expo UI Picker matches the official SwiftUI Picker API and supports all picker styles via the pickerStyle modifier.

Segmented picker

import { useState } from 'react';
import { Host, Picker, Text } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const options = ['Apple', 'Banana', 'Orange'];

export default function SegmentedPickerExample() {
  const [selectedTag, setSelectedTag] = useState(options[0]);

  // Segmented and wheel pickers stretch to the width they are given, so they
  // collapse under `matchContents`.
  return (
    <Host style={{ flex: 1 }}>
      <Picker
        modifiers={[pickerStyle('segmented')]}
        label="Select a fruit"
        selection={selectedTag}
        onSelectionChange={selection => {
          setSelectedTag(selection);
        }}>
        {options.map(option => (
          <Text key={option} modifiers={[tag(option)]}>
            {option}
          </Text>
        ))}
      </Picker>
    </Host>
  );
}

import { useState } from 'react';
import { Host, Picker, Text } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const options = ['Apple', 'Banana', 'Orange'];

export default function MenuPickerExample() {
  const [selectedTag, setSelectedTag] = useState(options[0]);

  return (
    <Host style={{ flex: 1 }}>
      <Picker
        modifiers={[pickerStyle('menu')]}
        label="Select a fruit"
        selection={selectedTag}
        onSelectionChange={selection => {
          setSelectedTag(selection);
        }}>
        {options.map(option => (
          <Text key={option} modifiers={[tag(option)]}>
            {option}
          </Text>
        ))}
      </Picker>
    </Host>
  );
}

Wheel picker

The wheel variant is not available on Apple TV.

import { useState } from 'react';
import { Host, Picker, Text } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

const options = ['Apple', 'Banana', 'Orange'];

export default function WheelPickerExample() {
  const [selectedTag, setSelectedTag] = useState(options[0]);

  return (
    <Host style={{ flex: 1 }}>
      <Picker
        modifiers={[pickerStyle('wheel')]}
        label="Select a fruit"
        selection={selectedTag}
        onSelectionChange={selection => {
          setSelectedTag(selection);
        }}>
        {options.map(option => (
          <Text key={option} modifiers={[tag(option)]}>
            {option}
          </Text>
        ))}
      </Picker>
    </Host>
  );
}

API

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

Component

`Picker`

Type: React.Element<PickerProps<T>>

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`

Optional • Type: React.ReactNode

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

`label`

Optional • Literal type: union

A label displayed on the picker.

Acceptable values are: string | React.ReactNode

`onSelectionChange`

Optional • Type: (selection: T) => void

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

`selection`

Optional • Type: T

The selected option's tag modifier value.

`systemImage`

Optional • Type: SFSymbol

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

Inherited props

CommonViewModifierProps

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version. The Universal and Drop-in version does not accept modifiers.

Modifiers for Picker

Modifiers for any view

Sources

The original Expo docs for this page:

Picker (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/picker.md)
Picker (Universal) (source-of-truth/versions/v57.0.0/sdk/ui/universal/picker.md)
Picker (Drop-in) (source-of-truth/versions/v57.0.0/sdk/ui/drop-in-replacements/picker.md)