Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native Picker
2.1.
Props of Picker
2.2.
Example of Picker
3.
Frequently Asked Questions
3.1.
Does picker have a default index value?
3.2.
How can you specify the width of a picker?
3.3.
What is the use of the alignItems attribute?
4.
Conclusion 
Last Updated: Mar 27, 2024
Easy

React Native Picker

Author Pradeep Kumar
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into React Native Picker. React Native Picker is a component that allows you to choose from a variety of options. If you are new to React Native and are yet to set up your environment for the language, you can check out this React Native Development.

React Native Picker

The React Native Picker component is used to select an item from a list of options. A dropdown choice is the same as this. When we need to present an alternative to choose from numerous possibilities, we utilize a picker. To use picker in your application, you need to import the Picker component from the react-native library.

Props of Picker

  • testID: In end-to-end tests, it's utilized to locate this view.
  • selectedValue: It returns the selected value.
  • onValueChange (itemValue, itemPosition): This function takes two parameters, itemPosition (i.e., the position of the item) and itemValue (i.e., the value of the item). This is invoked when an item is selected.
  • itemStyle: This is used to style each item of the picker.
  • enabled: When set to false, it is a Boolean property that disables the picker. If set to false, the user will be unable to make a choice.
  • prompt: It is used in Android as the title of the dialog in dialog mode.

Example of Picker

Now that we have learned what a Picker is, let's see the implementation of the same with the help of an example. In this example, we create a picker where the user can choose his/her favorite city from the list of cities. Upon choosing any particular city, the same will be displayed as the active value of the picker. The code for the App.js file is as follows:

App.js

import React, { Component } from 'react'  
import {StyleSheet,View, Text,Picker} from 'react-native'  
 
/*
In this example, we develop a picker that allows the user to select his or her preferred city from a list of options. The active value of the picker will be displayed when a specific city is selected. 

The list has the following options: New York, London, New Delhi, Tokyo, and Toronto. The list is variable and can be modified. State of the ReactNativePicker class stores the chosen index of the list. The default chosen index is set to zero. When the user selects an item, the chosen index will change to the index of the chosen item. 
*/

// default class, it extends Component
export default class ReactNativePicker extends Component {  
    // state stores the chosen index of the picker
    // the default value is zero
    state = {  
        choosen_index: 0  
    };  
  
    render() {  
        return (  
            <View style={containerStyles.container}>  
                <Text style={textStyles.textStyle}>Choose your Favorite City</Text>  
                <Picker style={pickerStyles.pickerStyle}  
                        selectedValue={this.state.city}  
                        onValueChange={(itemValue, itemPosition) =>  
                            this.setState({city: itemValue, choosen_index: itemPosition})}  
                    >  
                    <Picker.Item label="New York" value="newYork" />  
                    <Picker.Item label="London" value="london" />  
                    <Picker.Item label="New Delhi" value="newDelhi" />  
                    <Picker.Item label="Tokyo" value="tokyo" />  
                    <Picker.Item label="Toronto" value="toronto" />  
 
                </Picker>  
            </View>  
        );  
    }  
}  
 
/*
To make the User interactive look richer, CSS styles have been added to different components of the program. Different styles have been applied for the text, the container, and the picker.
*/

// styles for texts
const textStyles = StyleSheet.create({
  textStyle:{
    fontSize: 28,
  }
})
 
// styles for the container
const containerStyles = StyleSheet.create({
  container:{
    alignItems:'center',
    flex:1,
    justifyContent: 'center'
  }
})
 
// styles for the picker
const pickerStyles = StyleSheet.create ({  
    pickerStyle:{  
        width: "75%",  
        height: 100,  
        color: 'black',  
    }  
})   

Output:

                                                                   

Upon clicking on the dropdown menu, it will show a list of cities:

                                                                   

Now, you can select any city from the list, and the output will be displayed like:

                                                                    


Click on the following link to read further: Hooks in React JS

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

Does picker have a default index value?

The default index value of the picker is zero. It will change depending upon the item you choose from the dropdown menu.

How can you specify the width of a picker?

You can define a custom style for your picker. In that custom style, you can specify an attribute named "width" to adjust the width of the picker.

What is the use of the alignItems attribute?

It aligns the items. For example, if you set this attribute to "center," all the items following that style will be aligned centrally.

Conclusion 

In this article, we have extensively discussed React Native PickerWe hope that this blog has helped you enhance your knowledge regarding React Native Picker, and to learn more, check out our other article on React Native Switch.

If you want to learn more, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. Happy Coding!

Previous article
Activity Indicator in React Native
Next article
React Native Switch
Live masterclass