brandonsueur / picker

Picker is a cross-platform UI component for selecting an item from a list of options.

@react-native-picker/picker

Android	iOS	PickerIOS	Windows	MacOS

Supported Versions

@react-native-picker/picker	react-native
>= 1.2.0	0.60+ or 0.59+ with Jetifier
>= 1.0.0	0.57

For Managed Workflow users using Expo 37

This component is not supported in the managed workflow for expo sdk 37. Please import the Picker from react-native. See more info here

Getting started

$ npm install @react-native-picker/picker --save

or

$ yarn add @react-native-picker/picker

For [email protected] or above

As [email protected] or above supports autolinking, so there is no need to run linking process. Read more about autolinking here.

iOS

CocoaPods on iOS needs this extra step

npx pod-install

Android

No additional step is required.

Windows

Add the ReactNativePicker project to your solution.

1. Open the solution in Visual Studio 2019
2. Right-click Solution icon in Solution Explorer > Add > Existing Project Select D:\dev\RNTest\node_modules\@react-native-picker\picker\windows\ReactNativePicker\ReactNativePicker.vcxproj

windows/myapp.sln

Add a reference to ReactNativePicker to your main application project. From Visual Studio 2019:

Right-click main application project > Add > Reference... Check ReactNativePicker from Solution Projects.

pch.h

Add #include "winrt/ReactNativePicker.h".

app.cpp

Add PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); before InitializeComponent();.

MacOS

CocoaPods on MacOS needs this extra step (called from the MacOS directory)

pod install

Mostly automatic installation (react-native < 0.60)

$ react-native link @react-native-picker/picker

Manual installation (react-native < 0.60)

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @react-native-picker/picker and add RNCPicker.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open application file (android/app/src/main/java/[...]/MainApplication.java)

• Add import com.reactnativecommunity.picker.RNCPickerPackage; to the imports at the top of the file
• Add new RNCPickerPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':@react-native-picker_picker'
   project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-picker/picker/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(path: ':@react-native-picker_picker')
   

MacOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @react-native-picker/picker and add RNCPicker.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Usage

Picker

Renders the native picker component on iOS and Android. Example:

Usage

Import Picker from @react-native-picker/picker

import {Picker} from '@react-native-picker/picker';

Create state which will be used by the Picker

state = {
  language: 'java',
};

Add Picker like this:

<Picker
  selectedValue={this.state.language}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({language: itemValue})
  }>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Props

• Inherited View props...

• onValueChange
• selectedValue
• style
• testID
• enabled
• mode
• prompt
• itemStyle

---

Reference

Props

onValueChange

Callback for when an item is selected. This is called with the following parameters:

• itemValue: the value prop of the item that was selected
• itemPosition: the index of the selected item in this picker

Type	Required
function	No

---

selectedValue

Value matching value of one of the items. Can be a string or an integer.

Type	Required
any	No

---

style

Type	Required
pickerStyleType	No

---

testID

Used to locate this view in end-to-end tests.

Type	Required
string	No

---

enabled

If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.

Type	Required	Platform
bool	No	Android, Windows

---

mode

On Android, specifies how to display the selection items when the user taps on the picker:

• 'dialog': Show a modal dialog. This is the default.
• 'dropdown': Shows a dropdown anchored to the picker view

Type	Required	Platform
enum('dialog', 'dropdown')	No	Android

---

dropdownIconColor

On Android, specifies color of dropdown triangle. Input value should be hexadecimal string

Type	Required	Platform
string	No	Android

---

prompt

Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

Type	Required	Platform
string	No	Android

---

itemStyle

Style to apply to each of the item labels.

Type	Required	Platform
text styles	No	iOS, Windows

PickerIOS

Props

• Inherited View props...

• itemStyle
• onValueChange
• selectedValue

---

Reference

Props

itemStyle

Type	Required
text styles	No

---

onValueChange

Type	Required
function	No

---

selectedValue

Type	Required
any	No