React Native Dropdown Example

Demo:

The react native dropdown provide a popup to select a particular value from a list. In this tutorial we will use the dropdown library to add this feature. Download Source code from below.

STEPS TO CREATE A REACT NATIVE PROJECT:

Step 1-> To create your project run this command:
sudo npm install -g react-native-cli
Step 2->
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Step 3->
Install DropDown library in your project:
npm install --save react-native-material-dropdown
Step 4->
Link this library with your native project
react-native link react-native-material-dropdown
Now you can start work on your React native project

HomeScreen.js

import React, {Component} from 'react'
import {View,Text, StyleSheet, StatusBar} from 'react-native'
import {Dropdown} from 'react-native-material-dropdown'


export default class HomeScreen extends Component{
    onChangeText = this.onChangeText.bind(this);


onChangeText(text){
        this.setState({
            selected:text,
        })
      }
    render(){      


return(
            <View style={styles.container}>
                <StatusBar backgroundColor='#FF7043'></StatusBar>
                <View style={styles.containerHeader}>
                <Text style={styles.headerTxt}>HomeScreen</Text>
                </View>
                <View style={styles.mainContainer}>
                <Dropdown data={data} baseColor='#FF5722' itemColor='grey' selectedItemColor='#FF5722'
                containerStyle={styles.dropdownStyle} pickerStyle={styles.dropdownPicker}
                valueExtractor={({value})=> value}
                onChangeText={this.onChangeText}
                rippleCentered={true}
                rippleInsets={{ top: 4, bottom: 4 }}
                label= "Select Country"
                ></Dropdown>
                </View>
                </View>


)
    }
}


const styles = StyleSheet.create({
    container:{
        flex:1
    },


containerHeader:{
        height:40,
        width:'100%',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#FF5722'
    },


headerTxt:{
        color:'white',
    },


mainContainer:{
        alignItems:'center',
        width:'100%',
        height:'100%',
        backgroundColor:'white',
        justifyContent:'center'
    },


dropdownContainer:{
        width:200,
        borderColor:'green',


},


dropdownStyle:{
        width:200,
        borderColor:'green',
        margin: 0, padding: 0,
    },


dropdownPicker:{
        backgroundColor:'#EAEAEA',
        width:200,
        height:200,
        margin: 0, padding: 0,
    },


})


const data =[
    {value:'Afghanistan'},
    {value:'Albania'},
    {value:'Algeria'},
    {value:'Australia'},
    {value:'Bangladesh'},
    {value:'Brazil'},
    {value:'Canada'},
    {value:'Cuba'},
    {value:'Denmark'},
    {value:'France'},
    {value:'India'},
]