Picker
A picker compatible with @react-native-picker/picker.
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
A Picker component with an API compatible with @react-native-picker/picker. It uses a SwiftUI wheel Picker on iOS, a Material 3 ExposedDropdownMenuBox on Android, and a native <select> element on web.
Under the hood this component wraps the platform-specific @expo/ui primitives:
- Android: Jetpack Compose ExposedDropdownMenuBox
- iOS: SwiftUI Picker with
pickerStyle('wheel')
If you need lower-level control, use those primitives directly.
Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Migrating from @react-native-picker/picker
- Update the import from
import { Picker } from '@react-native-picker/picker'toimport { Picker } from '@expo/ui/community/picker'. mode,prompt,dropdownIconColor,dropdownIconRippleColor,numberOfLines,selectionColor,itemStyle, andaccessibilityLabelprops are not supported.- On
Picker.Item, thestyleprop only appliescolor,backgroundColor,fontFamily, andfontSize. The top-levelcolorandfontFamilyprops are still supported as aliases for the correspondingstylevalues. enabledonPicker.Itemonly applies on Android.- The
reffocus()andblur()methods only have an effect on Android (open/close the dropdown). On iOS, the wheel picker is always visible.
Basic usage
import { useState } from 'react'; import { Text, View } from 'react-native'; import { Picker } from '@expo/ui/community/picker'; export default function PickerExample() { const [language, setLanguage] = useState('java'); return ( <View> <Picker selectedValue={language} onValueChange={value => setLanguage(value)}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> <Picker.Item label="Objective C" value="objc" /> <Picker.Item label="Swift" value="swift" /> </Picker> <Text>Selected: {language}</Text> </View> ); }
Per-item styling and state
Pass a style to Picker.Item to control color, backgroundColor, fontFamily, and fontSize per item, and enabled={false} to disable specific items on Android.
fontFamily accepts iOS font names (for example, 'Menlo') on iOS, and Compose generic families ('monospace', 'serif', 'sansSerif', 'cursive') or fonts loaded with expo-font on Android.
import { useState } from 'react'; import { Platform } from 'react-native'; import { Picker } from '@expo/ui/community/picker'; const monospace = Platform.select({ ios: 'Menlo', android: 'monospace' }); const serif = Platform.select({ ios: 'Georgia', android: 'serif' }); export default function StyledPickerExample() { const [language, setLanguage] = useState('java'); return ( <Picker selectedValue={language} onValueChange={value => setLanguage(value)}> <Picker.Item label="Java" value="java" style={{ color: '#e11d48', fontFamily: monospace, fontSize: 14 }} /> <Picker.Item label="JavaScript" value="js" style={{ color: '#2563eb', fontFamily: serif, fontSize: 18 }} enabled={false} /> <Picker.Item label="Objective C" value="objc" style={{ color: '#059669', fontFamily: monospace, fontSize: 16 }} /> <Picker.Item label="Swift" value="swift" style={{ color: '#d97706', fontFamily: serif, fontSize: 30 }} enabled={false} /> </Picker> ); }
Imperative focus and blur (Android)
Use a ref to programmatically open and close the dropdown on Android. On iOS, these methods are no-ops because the wheel picker is always visible.
import { useRef, useState } from 'react'; import { Button } from 'react-native'; import { Picker, type PickerRef } from '@expo/ui/community/picker'; export default function RefPickerExample() { const [language, setLanguage] = useState('java'); const pickerRef = useRef<PickerRef>(null); return ( <> <Button title="Open and close after 2s" onPress={() => { pickerRef.current?.focus(); setTimeout(() => pickerRef.current?.blur(), 2000); }} /> <Picker ref={pickerRef} selectedValue={language} onValueChange={setLanguage}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> <Picker.Item label="Objective C" value="objc" /> <Picker.Item label="Swift" value="swift" /> </Picker> </> ); }
API
import { Picker } from '@expo/ui/community/picker';
Components
Type: React.Element<PickerProps<T>>
A drop-in replacement for @react-native-picker/picker on web.
Renders a native <select> element.
ReactNodePicker.Item children that define the available options.
(itemValue: T, itemIndex: number) => voidCallback when an item is selected. Called with (itemValue, itemIndex).
TThe currently selected value. Must match the value of one of the Picker.Item children.
Type: React.Element<ComponentType<PickerItemProps>>
stringText color for the item. Equivalent to setting color in the style prop.
stringCustom font family for the item. Equivalent to setting fontFamily in the style prop.
StyleProp<TextStyle>Style applied to the item label. Only the following values take effect:
color, backgroundColor, fontFamily, and fontSize. When also set
via the top-level color or fontFamily props, values from style win.