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