How to Implement a Picker in React Native

Updated: September 21, 2022 By: Augustus One comment

In the old days, React Native core supports a built-in Picker component, but it is now deprecated, and you should no longer import it into your code. The replacement we use nowadays is the @react-native-picker/picker package.


If you are using Expo then just execute the command below to install the package:

npx expo install @react-native-picker/picker

If you confront the incompatible error (this is just a temporary error and will be fixed by the author of the package in a near future) when running the preceding command, try this:

npm i @react-native-picker/picker --legacy-peer-deps

For non-expo projects:

npm i @react-native-picker/picker

If some errors appear, try this:

npm i @react-native-picker/picker --legacy-peer-deps

If you are developing an app for iOS, you need to perform an extra command:

npx pod-install



The demo app we are going to build has a picker that lets the user select their country. When a country is selected, its name will be displayed in the Text component right below the picker.

Here’s how it works on iOS and Android:

Note: If you’re using Safari, this demo video might not work nicely or not start at all. Please use Chrome, Edge, Firefox, or another web browser instead.

The Code

This is the complete code for the example:

// App.js
import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";

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

function App() {
  const [country, setCountry] = useState('Unknown');

  return (
    <View style={styles.screen}>
      <Text style={styles.text}></Text>
        onValueChange={(value, index) => setCountry(value)}
        mode="dropdown" // Android only
        <Picker.Item label="Please select your country" value="Unknown" />
        <Picker.Item label="Australia" value="Australia" />
        <Picker.Item label="Belgium" value="Belgium" />
        <Picker.Item label="Canada" value="Canada" />
        <Picker.Item label="India" value="India" />
        <Picker.Item label="Japan" value="Japan" />
      <Text style={styles.text}>Your conuntry: {country}</Text>

export default App;

// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: 'yellow'
  text: {
    fontSize: 24,
  picker: {
    marginVertical: 30,
    width: 300,
    padding: 10,
    borderWidth: 1,
    borderColor: "#666",

// For more React Native tutorials
// Visit

Common Props

The table below lists the most used props of the Picker component:

onValueChangeAndroid, iOSThe callback function that fired when an item is selected
selectedValueAndroid, iOSValue matching value of one of the items (string, integer)
styleAndroid, iOSUsed for styling the picker
testIDAndroid, iOSUsed for testing
enabledAndroidWhether the picker is enabled or disabled
modeAndroid“dialog” or “dropdown”

You can see the full list of available props at the GitHub repo of the package.


We’ve covered the basics of implementing a picker, a common element that might appear a lot of times in many mobile apps. If you’d like to learn more about modern React Native, take a look at the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

Notify of
1 Comment
Inline Feedbacks
View all comments
2 years ago

It was very helpfull, thanks

Related Articles