Javatpoint Logo
Javatpoint Logo

React Native Picker

React Native Picker is component that is used to select an item from the multiple choices. This is the same as a Dropdown option. Picker is used when we need to provide an alternative to choose from multiple options.

It is used by importing the Picker component from the react-native library.

Props of Picker

Prop Description
onValueChange( itemValue, itemPosition) It is a callback prop, called when an item is selected. It takes two parameters (itemValue: then 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 A Boolean prop 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.

React Native Picker Example

In this example, we create three label items in Picker component. When selecting an item from Picker, it calls the onValueChange callback and set the selected item in the picker, and item index is read from itemPosition. The item's position is displayed in a Text component.

App.js

Output:

React Native Picker React Native Picker React Native Picker




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA