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

2 comments:

  1. 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
  2. Many people are searching for different services in IT in Chicago, and we found that people are always looking to hire Chicago app developers for their various business needs.

    ReplyDelete