Updated April 6, 2023
Introduction to React Native Picker
React Native picker in React native is a library component, which allows us to design multi-select with writing very less HTML code; basically, it is like dropdown or dialog boxes where end users can select one of the listing items from the options, it has several options for representing our multi-select either in the dropdown or in the form of dialog, the biggest benefit of using react native picker is it will suits any small large or medium devices because we can easily design our multiselect according to the size of the devices by using style params, it also allows us to design each option of multiselect differently.
Syntax:
In the below syntax, we can see we are passing a few items, and for those items, we have set labels and values. These labels and values are the attributes to display and for actual value, respectively.
<Picker selectedValue = {selected value of string or numeric to } onValueChange = {function to call on change }>
<Picker.Item label = "name visible to end user" value = "unique id1" />
<Picker.Item label = "name visible to end user" value = "unique id2" />
<Picker.Item label = "name visible to end user" value = "unique id3" />
</Picker>Attributes of React Native Picker
The attributes are given below:
- selectedValue: This is the value which has been selected by the end-user from the multiple options. This attribute can be string or numeric.
- onValueChange: This is the function which will get called on value change. So in case, we want to perform any operation on a selection of dropdown multi-option, we can perform inside this function.
- Item: This attribute defines the multiple options which will be seen in the dropdown to the end-users. For example, you have seen select your city from multiple city options.
- Label: label defined the name of option which is visible to the end-user.
- Value: This is the value which uniquely identifies each element; it will go in submit a request, or this value will be considered as the actual value of the visible Label option.
- style: If we want to display our picker in a customized way or way how you wanted for your product, then you can use this attribute. So basically, this attribute will be used where we wanted to put any costume design for our application of picker. For example, we can change color, looks, or how the dropdown should open. In case if you want to adjust your multiselect option in your android app, you can design it here.
- enabled: This field will be used when we want to disable multiple option dropdown in the picker. It’s basically boolean value properties; here, if its value will be false, it will disable the dropdown, and if its value is true, dropdown will be enabled. By default, its value will be true, which means by default, a dropdown will be visible if we do not pass any value for it.
- mode: For this attribute, we can pass to value either “dialog” or “dropdown.”Basically, in android, there will be two options either you want to show multiple select in a dialog box or in the form of the dropdown. In case if you do not pass a value for this attribute, it will be dialog only. In Android, according to your app look and feel, you can decide these parameters.
- prompt: In case if you pass dialog as value for mode option, then it will display a dialog box with multiselect option; here, we can define prompt value for displaying the name of the dialog box. So basically, whatever value we set for prompt it will be visible as the name of the dialog box for multiselect.
- itemStyle: Here, with the help of this attribute, we can set some designs for each option of multiselect. For example, if we have a multi-select option for your favorite sports(like cricket,football, hockey, etc.) and you wanted to put a different icon and color for each sport, then we can use itemStyle.
Examples to Implement React Native Picker
Below are the examples of React Native Picker:
Example #1
In the below example, we are creating a dropdown multiselect where we are showing a sports list, and we can select the sport which we like.
Code:
//importing all react native core libraries to use into our application.
import React, { Component } from "react";
import { StyleSheet, Picker, View } from "react-native";
class App extends Component {
state = {
indexvalue: 0
};
render() {
return (
<View>
<div>
<Picker
style={customeStyles.pickerCustomeStyle}
selectedValue={this.state.sports}
onValueChange={(valueOfItem, positionOfItem) =>
this.setState({ sports: valueOfItem, indexvalue: positionOfItem })
}
>
<Picker.Item label="Select your favourite sport" value="cr" />
<Picker.Item label="Cricket" value="cr" />
<Picker.Item label="Football" value="fb" />
<Picker.Item label="hockey" value="hc" />
</Picker>{" "}
</div>
</View>
);
}
}
const customeStyles = StyleSheet.create({
pickerCustomeStyle: {
height: 50,
width: "80%",
color: "green",
justifyContent: "center"
}
});
export default App;Output:
Example #2
In this example, we are disabling the multiselect option by passing the enabled value as false. In the example below, we can see initially we have set the value of enabled as true, and inside the picker component, we are making it as {!this.state.enable}, which makes it enabled as false. Please see the below example with the output screen.
Code:
import React, { Component } from "react";
import { StyleSheet, Picker, View } from "react-native";
class App extends Component {
state = {
indexvalue: 0,
enable: true
};
render() {
return (
<View>
<div>
<Picker
style={customeStyles.pickerCustomeStyle}
selectedValue={this.state.sports}
onValueChange={(valueOfItem, positionOfItem) =>
this.setState({ sports: valueOfItem, indexvalue: positionOfItem })
}
enabled={!this.state.enable}
>
<Picker.Item label="Disabled multiselect" value="cr" />
<Picker.Item label="Cricket" value="cr" />
<Picker.Item label="Football" value="fb" />
<Picker.Item label="hockey" value="hc" />
</Picker>{" "}
</div>
</View>
);
}
}
const customeStyles = StyleSheet.create({
pickerCustomeStyle: {
height: 50,
width: "80%",
color: "green",
justifyContent: "center"
}
});
export default App;Output:
Example #3
In this example, we are writing style for inner items. Here we are putting different colors for different sports items of multiselect. We made pink,red, and black for cricket, football, and hockey, respectively. This example will be very useful for working on any real-world application where you may need to put different views for different items. Please follow the below example and screen of output where we are showing different items of multiselect into a different color.
Code:
import React, { Component } from "react";
import { StyleSheet, Picker, View } from "react-native";
class App extends Component {
state = {
indexvalue: 0
};
render() {
return (
<View>
<div>
<Picker
style={customeStyles.pickerCustomeStyle}
selectedValue={this.state.sports}
onValueChange={(valueOfItem, positionOfItem) =>
this.setState({ sports: valueOfItem, indexvalue: positionOfItem })
}
>
<Picker.Item
label="Select sport you like"
color="green"
value="cr"
/>
<Picker.Item label="Cricket" color="pink" value="cr" />
<Picker.Item label="Football" color="red" value="fb" />
<Picker.Item label="hockey" color="black" value="hc" />
</Picker>{" "}
</div>
</View>
);
}
}
const customeStyles = StyleSheet.create({
pickerCustomeStyle: {
height: 50,
width: "80%",
color: "green",
justifyContent: "center"
}
});
export default App;Output:
Conclusion
From this tutorial, we learned about Picker of react native, and its implementations, and its available attribute for designing a beautiful dropdown or dialog-based UI in react native apps.
Recommended Articles
This is a guide to React Native Picker. Here we discuss the attributes of React Native Picker and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
