This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 56).
Picker
A single-selection input with menu and wheel appearances.
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
Picker is a single-selection input. You can use <Picker.Item label value /> children to declare options so that the parent Picker reads them and renders a platform-appropriate dropdown or rotor.
The universal Picker is independent of @expo/ui/community/picker, which remains a compat shim for @react-native-picker/picker. Prefer this universal Picker for new code unless you specifically need the RN-Picker API surface.
Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Usage
Menu appearance (default)
import { useState } from 'react'; import { Host, Row, Picker, Spacer, Text } from '@expo/ui'; const FLAVOURS = [ { label: 'Vanilla', value: 'vanilla' }, { label: 'Chocolate', value: 'chocolate' }, { label: 'Strawberry', value: 'strawberry' }, ]; export default function PickerMenuExample() { const [value, setValue] = useState('vanilla'); return ( <Host style={{ flex: 1 }}> <Row alignment="center" spacing={12} style={{ padding: 16 }}> <Text>Flavour:</Text> <Spacer flexible /> <Picker selectedValue={value} onValueChange={setValue}> {FLAVOURS.map(f => ( <Picker.Item key={f.value} label={f.label} value={f.value} /> ))} </Picker> </Row> </Host> ); }
Wheel appearance
appearance="wheel" renders an inline scrollable rotor on iOS. On Android and web, this falls back to the platform's default dropdown (Material 3 doesn't ship a wheel-style picker).
import { useState } from 'react'; import { Host, Column, Picker } from '@expo/ui'; const FLAVOURS = [ { label: 'Vanilla', value: 'vanilla' }, { label: 'Chocolate', value: 'chocolate' }, { label: 'Strawberry', value: 'strawberry' }, ]; export default function PickerWheelExample() { const [value, setValue] = useState('chocolate'); return ( <Host style={{ flex: 1 }}> <Column spacing={8} style={{ padding: 16 }}> <Picker selectedValue={value} onValueChange={setValue} appearance="wheel"> {FLAVOURS.map(f => ( <Picker.Item key={f.value} label={f.label} value={f.value} /> ))} </Picker> </Column> </Host> ); }
API
import { Picker } from '@expo/ui';
Component
Type: React.Element<PickerProps<T>>
A single-selection input.
Declare options via <Picker.Item label value /> children.
Props for the Picker component, a single-selection input.
PickerAppearance • Default: 'menu'Visual appearance of the picker.
See PickerAppearance.
ReactNode<Picker.Item> children that declare the available options.
TThe currently selected value.
Must match the value of one of the <Picker.Item> children.
Interfaces
Internal: extracted item data from <Picker.Item> children.
| Property | Type | Description |
|---|---|---|
| label | string | - |
| value | T | - |
Types
Literal Type: string
Visual appearance of the picker.
'menu'— Compact button that opens a popup/dropdown on tap. Cross-platform default.'wheel'— Scrollable rotor UI that's always visible inline. iOS only; on Android and web this falls back to the platform's default dropdown.
Acceptable values are: 'wheel' | 'menu'
Literal Type: union
The type of values a Picker.Item can carry.
Acceptable values are: string | number