React Native - Picker

---

---

In this chapter, we will create simple Picker with two available options.

Step 1: Create File

Here, the App.js folder will be used as a presentational component.

App.js

 import React from 'react' import PickerExample from './PickerExample.js' const App = () => { return ( <PickerExample /> ) } export default App 

Step 2: Logic

this.state.user is used for picker control.

The updateUser function will be triggered when a user is picked.

PickerExample.js

 import React, { Component } from 'react'; import { View, Text, Picker, StyleSheet } from 'react-native' class PickerExample extends Component { state = {user: ''} updateUser = (user) => { this.setState({ user: user }) } render() { return ( <View> <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}> <Picker.Item label = "Steve" value = "steve" /> <Picker.Item label = "Ellen" value = "ellen" /> <Picker.Item label = "Maria" value = "maria" /> </Picker> <Text style = {styles.text}>{this.state.user}</Text> </View> ) } } export default PickerExample const styles = StyleSheet.create({ text: { fontSize: 30, alignSelf: 'center', color: 'red' } }) 

Output

If you click on the name it prompts you all three options as −

And you can pick one of them and the output will be like.