React Native Picker Spinner DropDown List iOS Android Example

React Native Picker also known as Spinner in android and iOS applications is used to show and pick a single value from a Set of Values. The Picker by default shows a single value and when user clicks on it it will pop up a dialog box window with multiple values. So in this tutorial we would going to create a react native application with simple Picker with multiple values and get the selected Picker Spinner item on button click using and Show in Alert message.

Contents in this project React Native Picker Spinner DropDown List:

1. Import StyleSheet, Alert, View, Button and Picker component in your project.

2. Create a State named as PickerValueHolder in constructor(). This state is used to store the Picker selected item value.

3. Create a function named as GetSelectedPickerItem(). This function is call on button onPress event. Inside this function we would print the Picker Spinner DropDown List selected item value on scree using Alert Message. We would direct print the State PickerValueHolder in alert.

4. Create a Root View in render’s return block. This View is used as the Parent View and our Button and Picker component will be add inside it.

5. Create Picker component in Root View.

selectedValue : Show the selected Value inside Picker after selection of a value.

onValueChange : Store the Picker Item value on State .User can also store the Item Index value.

Picker.Item : Is used to show the Items inside the Picker.

label : Label is what user sees on their screen.

value : What value user want to select on selected item.

6. Add Button component in Root View after Picker. We would call the GetSelectedPickerItem() function on Button onPress event.

7. Create Style for Root View.

8. Complete source code for App.js File :

Screenshot in Android device :

Picker Spinner DropDown List

Screenshots in iOS device :

11 Comments

  1. 1. How to make custom styles for picker (elements)

    2. How to render the picker item dynamically when my items are available in mysql db, simple ex. like country names, state name, city name, etc.

  2. Hi, Can we load Dynamic JSON data on changing the value of picker element? Could you please help me with that..

  3. hi admin, how to set (text: picker) in one row?

  4. How to set image along with text in label ?

Leave a Reply

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