React Native

React Native – Picker

React Native Picker is a component for selection between different choices same as a Dropdown. React Native Picker is component which is used to select an item from the multiple choices. 

To Import Picker in Code
import { Picker } from 'react-native'
Render Using
    <Picker.Item label = "display member" value = "value member" />
onValueChange( itemValue, itemPosition)It is a callback prop and called when an item is selected. It takes two parameters (itemValue: the item (value) which is selected, itemPosition: the position (index) of a selected item).
selectedValueReturns the selected value.
styleIt is a picket style type.
testIDIt is used to locate this view in end-to-end tests.
enabledIt is a Boolean prop which makes picker disable when set to false. If it is set to false, the user cannot be able to make a selection.
modeOn Android, it specifies how to display the selections items when the users click on the picker. It has the “dialog” and “dropdown” properties. The dialog is default mode and shows as a modal dialog. The dropdown displays the picker as dropdown anchor view.
promptIt is used in Android with dialog mode as the title of the dialog.
itemStyleIt styles each item of the picker labels.
import React from 'react';
import { Picker, View, StyleSheet, Text } from 'react-native';
export default class App extends React.Component {
  state = {choosenLabel: '', choosenindex: ''}
  render() {
    return (
      <View style={styles.container}>
        <Text style = {styles.text}>{this.state.choosenLabel}</Text>
        <Text style = {styles.text}>{this.state.choosenindex}</Text>
        <Picker style={{borderColor:'black'}} selectedValue={this.state.choosenLabel}
          (itemValue, itemIndex) => this.setState({
               choosenLabel: itemValue})
            <Picker.Item label = "Hello" value = "1" />
            <Picker.Item label = "React" value = "2" />
            <Picker.Item label = "Native" value = "3" />
            <Picker.Item label = "Tutorial" value = "4" />
            <Picker.Item label = "from" value = "5" />
            <Picker.Item label = "codehunger" value = "6" />
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column'
  text: {
      fontSize: 20,
      alignSelf: 'center',
Picker Item

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button