How to Implement a Picker in React Native (2021)

In this post, we are going to look into building a picker system using @react-native-picker/picker package.

Earlier days, the react-native core component used to support a built-in Picker component, but it is now deprecated, and you should no longer import it into your code.

We are going to look into a new way to use the picker component using this component which is available in github repo.




Lets get started


Step 1. Installation


For Expo Projects:


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

expo install @react-native-picker/picker



For non-expo projects:


npm i @react-native-picker/picker


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

npx pod-install


Step 2 : Example

Preview

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

Here’s how it works.


react-native-dropdown-picker



Step 3 : Adding the picker to App.js

To Add a picker



To add a picker of type dropdown . you can set the mode to dropdown . The supported types are 'dialog', 'dropdown'. Add the below code to App.js

<Picker
        selectedValue={gender}
        onValueChange={(value, index) => setGender(value)}
        mode="dropdown" // Android only
        style={styles.picker}
      >


Add some style to the picker



const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#F2F5FB'
  },
  headertext:{
    fontSize:20,
    color: '#000'
  },
  text: {
    fontSize: 16,
    color: '#000'
  },
  picker: {
    marginVertical: 30,
    width: 300,
    padding: 10,
    borderWidth: 1,
    borderColor: "#fff",
    color:"#000"
  },
});


The Code 

This is the complete code for the example(App.js):

// App.js
import "react-native-gesture-handler";

import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";

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

function App() {
  const [gender, setGender] = useState('Unknown');

  return (
    <View style={styles.screen}>
      <Text style={styles.headertext}>A Picker Demo by NintyZeros.com</Text>


      <Picker
        selectedValue={gender}
        onValueChange={(value, index) => setGender(value)}
        mode="dropdown" // Android only
        style={styles.picker}
      >
        <Picker.Item label="Select Gender" value="Unknown" />
        <Picker.Item label="Male" value="Male" />
        <Picker.Item label="Female" value="Female" />
        <Picker.Item label="Not Willing" value="NA" />
      </Picker>
      <Text style={styles.text}>You Selected: {gender}</Text>
    </View>
  );
}

export default App;

// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#F2F5FB'
  },
  headertext:{
    fontSize:20,
    color: '#000'
  },
  text: {
    fontSize: 16,
    color: '#000'
  },
  picker: {
    marginVertical: 30,
    width: 300,
    padding: 10,
    borderWidth: 1,
    borderColor: "#fff",
    color:"#000"
  },
});


Common Props 


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

NamePlatformDescription
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”

Conclusion


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.
 


Hey I'm Venkat
Developer, Blogger, Thinker and Data scientist. nintyzeros [at] gmail.com I love the Data and Problem - An Indian Lives in US .If you have any question do reach me out via below social media