...

Big Data - React Native

Back to Course

Lesson Description


Lession - #1043 React Native Picker


Here, 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
React Native Picker If you click on the name it prompts you all three names options as −

React Native Picker And you can pick one of them and the output will be look like.

React Native Picker