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.