React Native Tutorial
Core Concepts
Components and APIs
React Native Useful Resources
Selected Reading
Core Concepts
- React Native - Running Android
- React Native - Running IOS
- React Native - Router
- React Native - Debugging
- React Native - Animations
- React Native - Buttons
- React Native - HTTP
- React Native - Images
- React Native - ScrollView
- React Native - Text Input
- React Native - ListView
- React Native - Flexbox
- React Native - Styling
- React Native - Props
- React Native - State
- React Native - App
- React Native - Environment Setup
- React Native - Overview
Components and APIs
- React Native - AsyncStorage
- React Native - Geolocation
- React Native - Alert
- React Native - Text
- React Native - Switch
- React Native - Status Bar
- React Native - Picker
- React Native - ActivityIndicator
- React Native - Modal
- React Native - WebView
- React Native - View
React Native Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
React Native - Picker
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, apgnSelf: center , color: red } })
Output
![React Native Picker](/react_native/images/react_native_picker.jpg)
If you cpck on the name it prompts you all three options as −
![React Native Picker](/react_native/images/reactnative_picker.jpg)
And you can pick one of them and the output will be pke.
![React Native Picker](/react_native/images/reactnativepicker.jpg)