Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Picker

A SwiftUI Picker component for selecting options from a list.

iOS
tvOS

GitHub

npm

Changelog

Bundled version:
~55.0.12

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

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

SegmentedPickerExample.tsx
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]);

  return (
    <Host matchContents>
      <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>
  );
}

Menu picker

MenuPickerExample.tsx
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 matchContents>
      <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.
WheelPickerExample.tsx
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 matchContents>
      <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

iOS
tvOS

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

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: (selection: T) => void

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

selection

iOS
tvOS
Optional • Type: T

The selected option's tag modifier value.

systemImage

iOS
tvOS
Optional • Type: SFSymbol

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

Inherited Props