React Native Picker

Native picker component for react native, For select through some values.

Installation of React Native Picker

using npm

$ npm install @react-native-community/picker --save

using yarn

$ yarn add @react-native-community/picker

React Native Picker Usage

Now the important thing comes you have to import Picker from the library.

import {Picker} from '@react-native-community/picker';

next you have to create state which you can use by Picker

state = {
  language: 'male',
};

you can add picker component in your code.

<Picker
  selectedValue={this.state.gender}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({gender: itemValue})
  }>
  <Picker.Item label="male" value="male" />
  <Picker.Item label="female" value="female" />
</Picker>

Important useful Properties (props)

These are the props of the component Picker.

1. onValueChange –

Callback for when an item is selected.

parameters :

• itemValue: the value prop of the item that was selected
• itemPosition: the index of the selected item in this picker

2. selectedValue –

Value matching value of one of the items. Can be a string or an integer.

3. enabled –

If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.

4. mode –

This gives you control on how you want your picker to be, You want dialog or dropdown. It is on android.

• dialog : Show a modal dialog. This is the default.
• dropdown : Shows a dropdown anchored to the picker view

5. prompt –

It can provide title of picker on Android.

If you want any other topic you can comment down below.