React Native Picker

What is Picker in React Native?

The React Native Picker component chooses an item from various options. This is equivalent to a dropdown menu item. When we must choose among several possibilities, we utilise a picker. A part that gives users access to the system user interface to select from various alternatives.

A picker component for React Native called react-native-picker imitates the native select interface on Android and iOS. It emulates the native chosen interface, but it also gives developers the option to modify it in any way they see fit. The developer is free to transmit styles to alter the interface's appearance and feel. react-native-picker is feature-rich and comes with many props, making it highly adaptable and effective.

Supported Version

Installation

For React Native v0.60 and above (Autolinking)

There is no requirement to launch the linking process because auto-linking is supported by react-native@0.60 and higher. React-native-windows@0.64 and above support auto-linking.

iOS

For connecting pods, CocoaPods for iOS requires the following extra step :

Android

No more action is necessary.

Windows

Usage in Windows without auto-linking requires the following extra steps :

Add the ReactNativePicker project to your solution.

Right-click the Solution icon in Solution Explorer and choose Add > Existing project to open the solution in Visual Studio. D:\dev\RNTest\node_modules\@react-native-picker\picker\windows\ReactNativePicker\ReactNativePicker.vcxproj

windows/myapp.sln

Your main application project should now include a reference to ReactNativePicker. In Visual Studio: Choose Add > Reference from the context menu of the main application project. Try ReactNativePicker from Solution projects.

app.cpp

To the headers included at the beginning of the file, add #include "winrt/ReactNativePicker.h". Before InitializeComponent(); include PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider());

MacOS

For connecting of pods, CocoaPods for iOS requires the following extra step :

Only if you are using a version of React Native lower than 0.60, the next steps are required.

Mostly automatic installation

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

Manual installation

iOS :

1. Right-click Libraries in the project navigator of XCode. Add Files to [the name of your project]
2. Add RNCPicker.xcodeproj to node_modules/ @react-native-picker/picker.
3. Choose your project in XCode's project navigator. Include libRNCPicker.a in the build phases of your project.
4. (Cmd+R) Run your project.

Android :

1. Open (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. Add the following lines in the end of android/settings.gradle:

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

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)<

React Native Picker Usage

Picker from @react-native-picker/picker is imported :

Use the useState hook to create a state that the Picker will use :

Now make use of the Picker component in the following way :

Provide ref to Picker to open/close the picker programmatically on Android (enabled starting with version 1.16.0+) :

React Native Picker Props

Steps to Create React Native Picker

Step 1 : Create File

The App.js folder will be utilised in this case as a presentational element.

App.js

Step 2 : Logic

The user state variable is used for controlling the picker. The updateUser function will be triggered when a user is picked.

PickerExample.js

Output

When you click on the name, you are given the following three choices :

You can choose one of them, and the result will be as follows :

FAQ's

How to Use the Picker Component with Expo Version 37?

The 37th version of Expo SDK's managed workflow does not support this component. The Picker from react-native should be imported.

Does the Picker have RTL Support?

You need to amend AndroidManifest.xml to include android:supportsRtl="true"

How to Modify the Color of the Dropdown Triangle?

In Android, dropdownIconColor and dropdownIconRippleColor both provide the colour of the dropdown triangle and its ripple, respectively. The input value must be one that the react-native processColor function accepts.