This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Picker

A picker compatible with @react-native-picker/picker.

Android

iOS

Web

Included in Expo Go

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

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If 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' to import { Picker } from '@expo/ui/community/picker'.
mode, prompt, dropdownIconColor, dropdownIconRippleColor, numberOfLines, selectionColor, itemStyle, and accessibilityLabel props are not supported.
On Picker.Item, the style prop only applies color, backgroundColor, fontFamily, and fontSize. The top-level color and fontFamily props are still supported as aliases for the corresponding style values.
enabled on Picker.Item only applies on Android.
The ref focus() and blur() methods only have an effect on Android (open/close the dropdown). On iOS, the wheel picker is always visible.

Basic usage

PickerExample.tsx

import { useState } from 'react';
import { Text, useColorScheme, View } from 'react-native';
import { Picker } from '@expo/ui/community/picker';

export default function PickerExample() {
  const [language, setLanguage] = useState('java');
  const colorScheme = useColorScheme();

  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 style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
        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.

StyledPickerExample.tsx

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.

RefPickerExample.tsx

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';

No API data file found, sorry!