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

Demo:
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.

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

Download source code from here

4 comments:

  1. Nice article and it’s really helpful content for us, keep sharing like this more informational article. If you a looking Leading Mobile App Development Company
    in Delhi NCR. Visit: Mobile App Development Company

    ReplyDelete
  2. Appsinvo is the India-based Top Mobile App Development Company. It is known for its Quality assurance and one of the best iOS and Android Mobile App Development Company in India

    ReplyDelete
  3. Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site. For more info:- React native App Development

    ReplyDelete