React Native - Picker - CodeHunger | Blog React Native

React Native – Picker

Post View Count : 1184

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>
    <Picker.Item label = "display member" value = "value member" />
</Picker>

Prop	Description
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).
selectedValue	Returns the selected value.
style	It is a picket style type.
testID	It is used to locate this view in end-to-end tests.
enabled	It 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.
mode	On 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.
prompt	It is used in Android with dialog mode as the title of the dialog.
itemStyle	It 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}
          onValueChange={
          (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" />
        </Picker>
      </View>
    );  
  } 
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column'
  },
  text: {
      fontSize: 20,
      alignSelf: 'center',
   }
});