Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Wednesday, June 12, 2019

react native dropdown example  react native picker dropdown example react native dropdown menu example

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.


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 

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'}, ]

Download source code from here