There We have a scenario to choose single option from multiple options, how we can handle this in React Native. 

How to display multiple option to user in React Native?

React Native Picker Component is used to hanlde this type of scenarios. By using Picker we can display multiple option drop down. This is similar to Android spinner widget.

 

Syntax

<Picker>
    <Picker.Item label = "label here" value = "value here" />
</Picker>

 

Props

 

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.

 

Example

import React, {Component} from 'react';

import {StyleSheet, View, Text} from 'react-native';

import {Picker} from 'react-native';

 

export default class PickerExample extends Component {

  state = {

    choosenIndex: 0,

  };

 

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.header}>

          <Text>Picker Example</Text>

        </View>

        <View style={styles.body}>

          <Text style={styles.textStyle}>Picker Your Platform</Text>

          <Picker

            style={styles.pickerStyle}

            selectedValue={this.state.language}

            onValueChange={(itemValue, itemPosition) =>

              this.setState({language: itemValue, choosenIndex: itemPosition})

            }>

            <Picker.Item label="React Native" value="RN" />

            <Picker.Item label="Flutter" value="Flu" />

            <Picker.Item label="Xamarin" value="Xam" />

          </Picker>

          <Text style={styles.textStyle}>

            {' '}

            {'Selected Index =' + this.state.choosenIndex}

          </Text>

        </View>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,

  },

  header: {

    alignItems: 'center',

    padding: 10,

    backgroundColor: 'cyan',

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,

  },

  textStyle: {

    margin: 24,

    fontSize: 25,

    fontWeight: 'bold',

    textAlign: 'center',

  },

  pickerStyle: {

    borderWidth: 2,

    height: 30,

    width: '80%',

    color: 'white',

    justifyContent: 'center',

  },

});

 

 

Output

React Native Picker

 

Display Picker in React NAtive

 


Subscribe For Daily Updates