How to Add a Material Design Dropdown in React Native Compatible for both iOS and Android

Picker component of react native is used for showing drop down menu in apps. If you are not satisfied with the picker component then you can use react native material dropdown component which works well on both Android and iOS platforms.

The drop down component follows material design with ripple effects. You can install react native material drop down using the following command:
npm install –save react-native-material-dropdown

The following snippet shows the normal use of the drop down component in react native.

import React, { Component } from 'react';
import { Dropdown } from 'react-native-material-dropdown';

class Example extends Component {
  render() {
    let data = [{
      value: 'Banana',
    }, {
      value: 'Mango',
    }, {
      value: 'Pear',
    }];

    return (
      <Dropdown
        label='Favorite Fruit'
        data={data}
      />
    );
  }

In the following react native dropdown menu example, I have data set with different value and label.

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

class MyClass extends Component {

  constructor(props){
    super(props);
    this.state={
    data: [{
      value: 'Fruit',
      label: 'Banana'
    }, {
      value: 'Vegetable',
      label: 'Tomato'
    }, {
      value: 'Fruit',
      label: 'Pear'
    }],
    value: ''
    }
  }

  componentDidMount() {
  const value = this.state.data[0].value;
  this.setState({
  value
  });
  }
  render() {
    return (
      <View style={styles.container}>
        <Dropdown
        value={this.state.label}
        data={this.state.data}
        pickerStyle={{borderBottomColor:'transparent',borderWidth: 0}}
        dropdownOffset={{ 'top': 0 }}
        containerStyle = {styles.dropdown}
        onChangeText={(value)=> {this.setState({
          value
        });}}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  dropdown: {
    width: '80%',
  }
});

export default MyClass;

The output of react native example is as given below: