React Native Picker also known as Spinner in android and iOS applications is used to show and pick a single value from a Set of Values. The Picker by default shows a single value and when user clicks on it it will pop up a dialog box window with multiple values. So in this tutorial we would going to create a react native application with simple Picker with multiple values and get the selected Picker Spinner item on button click using and Show in Alert message.
Contents in this project React Native Picker Spinner DropDown List:
1. Import StyleSheet, Alert, View, Button and Picker component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button, Picker } from 'react-native'; |
2. Create a State named as PickerValueHolder in constructor(). This state is used to store the Picker selected item value.
|
1 2 3 4 5 6 7 8 9 10 |
constructor(){ super(); this.state={ PickerValueHolder : '' } } |
3. Create a function named as GetSelectedPickerItem(). This function is call on button onPress event. Inside this function we would print the Picker Spinner DropDown List selected item value on scree using Alert Message. We would direct print the State PickerValueHolder in alert.
|
1 2 3 4 |
GetSelectedPickerItem=()=>{ Alert.alert(this.state.PickerValueHolder); } |
4. Create a Root View in render’s return block. This View is used as the Parent View and our Button and Picker component will be add inside it.
|
1 2 3 4 5 6 7 8 9 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
5. Create Picker component in Root View.
selectedValue : Show the selected Value inside Picker after selection of a value.
onValueChange : Store the Picker Item value on State .User can also store the Item Index value.
Picker.Item : Is used to show the Items inside the Picker.
label : Label is what user sees on their screen.
value : What value user want to select on selected item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
render() { return ( <View style={styles.MainContainer}> <Picker selectedValue={this.state.PickerValueHolder} onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} > <Picker.Item label="React Native" value="React Native" /> <Picker.Item label="Java" value="Java" /> <Picker.Item label="Html" value="Html" /> <Picker.Item label="Php" value="Php" /> <Picker.Item label="C++" value="C++" /> <Picker.Item label="JavaScript" value="JavaScript" /> </Picker> </View> ); } |
6. Add Button component in Root View after Picker. We would call the GetSelectedPickerItem() function on Button onPress event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
render() { return ( <View style={styles.MainContainer}> <Picker selectedValue={this.state.PickerValueHolder} onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} > <Picker.Item label="React Native" value="React Native" /> <Picker.Item label="Java" value="Java" /> <Picker.Item label="Html" value="Html" /> <Picker.Item label="Php" value="Php" /> <Picker.Item label="C++" value="C++" /> <Picker.Item label="JavaScript" value="JavaScript" /> </Picker> <Button title="Get Selected Picker Value" onPress={ this.GetSelectedPickerItem } /> </View> ); } |
7. Create Style for Root View.
|
1 2 3 4 5 6 7 8 9 10 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', margin: 20 } }); |
8. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button, Picker } from 'react-native'; export default class App extends Component<{}> { constructor(){ super(); this.state={ PickerValueHolder : '' } } GetSelectedPickerItem=()=>{ Alert.alert(this.state.PickerValueHolder); } render() { return ( <View style={styles.MainContainer}> <Picker selectedValue={this.state.PickerValueHolder} onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} > <Picker.Item label="React Native" value="React Native" /> <Picker.Item label="Java" value="Java" /> <Picker.Item label="Html" value="Html" /> <Picker.Item label="Php" value="Php" /> <Picker.Item label="C++" value="C++" /> <Picker.Item label="JavaScript" value="JavaScript" /> </Picker> <Button title="Get Selected Picker Value" onPress={ this.GetSelectedPickerItem } /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', margin: 20 } }); |
Screenshot in Android device :
Screenshots in iOS device :
1. How to make custom styles for picker (elements)
2. How to render the picker item dynamically when my items are available in mysql db, simple ex. like country names, state name, city name, etc.
Rohit i will soon publish a new tutorial covering both above topics 🙂
Hi, Can we load Dynamic JSON data on changing the value of picker element? Could you please help me with that..
Yes Pooja we can dynamically change the JSON on selecting the picker item all you have to do is after selecting the picker value just sending a webcall with selecting item on server , this tutorial would help you on to send https://reactnativecode.com/click-filter-json-selected-listview-data-android-ios/
hi admin, how to set (text: picker) in one row?
John you need to put both views inside individual view and then put them both views inside a root view.
sorry, can you give example?
thank you, I understand already
Welcome John 🙂 .
How to set image along with text in label ?
Yash you want to put the text above image ?