中文网
🌐 Nodejs.cn
首页指南EAS参考学习

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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:

If you need lower-level control, use those primitives directly.

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.

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, 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.

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

Components

Picker

Android
iOS
Web

Type: React.Element<PickerProps<T>>

A drop-in replacement for @react-native-picker/picker on web. Renders a native <select> element.

Props for the Picker component. Compatible with @react-native-picker/picker.

PickerProps

children

Android
iOS
Web
Optional • Type: ReactNode

Picker.Item children that define the available options.

enabled

Android
iOS
Web
Optional • Type: boolean

Whether the picker is enabled.

onValueChange

Android
iOS
Web
Optional • Type: (itemValue: T, itemIndex: number) => void

Callback when an item is selected. Called with (itemValue, itemIndex).

ref

Android
iOS
Web
Optional • Type: Ref<PickerRef>

Ref handle exposing focus() and blur() methods.

selectedValue

Android
iOS
Web
Optional • Type: T

The currently selected value. Must match the value of one of the Picker.Item children.

style

Android
iOS
Web
Optional • Type: StyleProp<ViewStyle>

Style applied to the picker container.

testID

Android
iOS
Web
Optional • Type: string

Test identifier.

Picker.Item

Android
iOS
Web

Type: React.Element<ComponentType<PickerItemProps>>

Props for the Picker.Item component. Compatible with @react-native-picker/picker.

PickerItemProps

color

Android
iOS
Web
Optional • Type: string

Text color for the item. Equivalent to setting color in the style prop.

enabled

Android
Optional • Type: boolean

Whether the item is enabled.

fontFamily

Android
iOS
Web
Optional • Type: string

Custom font family for the item. Equivalent to setting fontFamily in the style prop.

label

Android
iOS
Web
Optional • Type: string

Display text for the item.

style

Android
iOS
Web
Optional • Type: 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.

testID

Android
iOS
Web
Optional • Type: string

Test identifier.

value

Android
iOS
Web
Optional • Type: T

Value passed to onValueChange when this item is selected.

Types

PickerItemValue

Android
iOS
Web

Literal Type: union

Acceptable values are: string | number | null

PickerRef

Android
iOS
Web

Ref handle for the Picker component. Compatible with @react-native-picker/picker.

PropertyTypeDescription
blur() => void
Only for: 
Android

Programmatically closes the picker.

focus() => void
Only for: 
Android

Programmatically opens the picker.