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>
  );
}

A segmented control with Apple selected, next to Banana and Orange

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>
  );
}

An open menu picker listing Apple with a checkmark, Banana, and Orange

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>
  );
}

A wheel picker with Apple selected in the center band above Banana and Orange

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.

Expo UI lets you put any of the 89 modifiers for any view on Picker, but not all of them do something here.

70 change what you see on Picker.
6 have no visible effect on Picker.
13 work only in one place, such as a widget or a Grid.

Modifier	Why nothing happens
`accessibilityElement`	It joins the child views into one accessibility element, and Picker takes no child views.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and Picker takes no child views.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and Picker takes none.
`imageScale`	It changes only SF Symbols, and Picker shows none.
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and Picker does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

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)