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 :
Also Read :
React Native Show JSON ListView click item value on another Activity Screen iOS Android Example
React Native User Registration using PHP MySQL Database PART-1 – Creating PHP API
How to Call Another Class Function From Default Class in React Native
React Native Create Auto Image Slider Gallery Android iOS with Page Indicator
React Native Create JSON Parsing GridView iOS Android Tutorial
