Sunday, October 21, 2018

React Native Picker Spinner DropDown Menu List Example - Android

In this tutorial, we are going to discuss how to create simple picker spinner dropdown menu list in react native application. Picker Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

React Native Picker Spinner DropDown Menu List Example - Android

In this example, we will create simple picker dropdown menu list, which allows to select an item from a drop down menu. I am displaying static data in Picker component and after selecting an item from Picker a Alert message will be shown.

React Native Picker Dropdown Menu Example :

Lets follow the below steps to create simple Picker spinner dropdown menu list in React Native.




Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.
import React, { Component } from "react";
import { Platform, StyleSheet, View, Button, Picker, Alert } from "react-native";

Step-4 : Create constructor in your HomeActivity class and call the super method inside constructor. Now using this.state we are defining the PickerSelectedVal as state. This state object  is used to store the Picker selected item value.
constructor(){
     super();
     this.state={
       PickerSelectedVal : ''
     }
   }

Step-5 : Create getSelectedPickerValue method to show the selected Picker item value with help of alert dialog box.
getSelectedPickerValue=()=>{
      Alert.alert("Selected country is : " +this.state.PickerSelectedVal);
}

Step-6 : Implement render method and return Picker and Button component wrapped by root View component.Specify the below parameters in Picker component as props, that helps to display picker dropdown menu list, when user clicks on Picker dropdown menu.
selectedValue: keeps current selected value.
onValueChange: Callback for when an item is selected and also update the state.
render() {
    return (
      <View style={styles.container}>
      <Picker
           selectedValue={this.state.PickerSelectedVal}
           onValueChange={(itemValue, itemIndex) => this.setState({PickerSelectedVal: itemValue})} >

           <Picker.Item label="India" value="India" />
           <Picker.Item label="USA" value="USA" />
           <Picker.Item label="China" value="China" />
           <Picker.Item label="Russia" value="Russia" />
           <Picker.Item label="United Kingdom" value="United Kingdom" />
           <Picker.Item label="France" value="France" />

         </Picker>

         <Button title="Get Selected Picker Value" onPress={ this.getSelectedPickerValue } />
      </View>
    );
  }

Step-7 : Apply the below style sheet design.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    margin :30
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple spinner dropdown menu using Picker component in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, View, Button, Picker, Alert } from "react-native";

export default class HomeActivity extends Component {

  constructor(){
     super();
     this.state={
       PickerSelectedVal : ''
     }
   }

   getSelectedPickerValue=()=>{
      Alert.alert("Selected country is : " +this.state.PickerSelectedVal);
    }


  render() {
    return (
      <View style={styles.container}>
      <Picker
           selectedValue={this.state.PickerSelectedVal}
           onValueChange={(itemValue, itemIndex) => this.setState({PickerSelectedVal: itemValue})} >

           <Picker.Item label="India" value="India" />
           <Picker.Item label="USA" value="USA" />
           <Picker.Item label="China" value="China" />
           <Picker.Item label="Russia" value="Russia" />
           <Picker.Item label="United Kingdom" value="United Kingdom" />
           <Picker.Item label="France" value="France" />

         </Picker>

         <Button title="Get Selected Picker Value" onPress={ this.getSelectedPickerValue } />
      </View>
    );
  }
  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    margin :30
  },
});

Screenshot :

React Native Picker Spinner DropDown Menu List Example - Android

React Native Picker Spinner DropDown Menu List Example - Android

React Native Picker Spinner DropDown Menu List Example - Android


React Native Picker Spinner DropDown Menu List Example - Android


This is about android spinner dropdown menu exampleThank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Download Link :



5 comments:

  1. How to remove Get Selected Picker Value button ?

    ReplyDelete
    Replies
    1. You need add one more function, where you need to remove update the PickerSelectedVal value of state to empty...
      this.state={ PickerSelectedVal : '' }

      Delete
  2. I already try this but i's not remove button.

    ReplyDelete
  3. how to get data from json for using picker at react native?
    give some example to solution in query..

    ReplyDelete