1// How to install
2npm install --save react-native-material-dropdown
3
4// How to use
5import React, { Component } from 'react';
6import { Dropdown } from 'react-native-material-dropdown';
7
8class Example extends Component {
9  render() {
10    let data = [
11      {      value: 'Banana',    },
12      {      value: 'Mango',    },
13      {      value: 'Pear',    }];
14    
15    return (      
16      <Dropdown        
17      label='Favorite Fruit'        
18      data={data}      
19  		/>    
20		);  
21	}
22}

1// npm install react-native-select-dropdown
2// yarn add react-native-select-dropdown
3
4import SelectDropdown from 'react-native-select-dropdown'
5const countries = ["Egypt", "Canada", "Australia", "Ireland"]
6<SelectDropdown
7	data={countries}
8	onSelect={(selectedItem, index) => {
9		console.log(selectedItem, index)
10	}}
11	buttonTextAfterSelection={(selectedItem, index) => {
12		// text represented after item is selected
13		// if data array is an array of objects then return selectedItem.property to render after item is selected
14		return selectedItem
15	}}
16	rowTextForSelection={(item, index) => {
17		// text represented for each item in dropdown
18		// if data array is an array of objects then return item.property to represent item in dropdown
19		return item
20	}}
21/>

1/**
2 * Sample React Native App
3 * https://github.com/facebook/react-native
4 * @flow
5 */
6
7import React, { Component } from "react";
8import { Platform, StyleSheet, Text, View, Alert, YellowBox} from "react-native";
9import { Menu, MenuProvider, MenuOptions, MenuOption, MenuTrigger} from "react-native-popup-menu";
10
11export default class HomeActivity extends Component {
12
13  constructor(props) {
14     super(props);
15     YellowBox.ignoreWarnings([
16      'Warning: isMounted(...) is deprecated', 'Module RCTImageLoader'
17    ]);
18   }
19
20  render() {
21    return (
22      <MenuProvider style={{ flexDirection: "column", padding: 30 }}>
23        <Menu onSelect={value => alert(`You Clicked : ${value}`)}>
24
25          <MenuTrigger  >
26          <Text style={styles.headerText}>DropDown Menu</Text>
27          </MenuTrigger  >
28
29          <MenuOptions>
30            <MenuOption value={"Login"}>
31              <Text style={styles.menuContent}>Login</Text>
32            </MenuOption>
33            <MenuOption value={"Register"}>
34              <Text style={styles.menuContent}>Register</Text>
35            </MenuOption>
36            <MenuOption value={"Download"}>
37              <Text style={styles.menuContent}>Download</Text>
38            </MenuOption>
39            <MenuOption value={"Logout"}>
40              <Text style={styles.menuContent}>Logout</Text>
41            </MenuOption>
42            <MenuOption value={3} disabled={true}>
43              <Text style={styles.menuContent}>Disabled Menu</Text>
44            </MenuOption>
45          </MenuOptions>
46
47        </Menu>
48      </MenuProvider>
49    );
50  }
51}
52
53const styles = StyleSheet.create({
54    headerText: {
55    fontSize: 20,
56    margin: 10,
57    fontWeight: "bold"
58  },
59  menuContent: {
60    color: "#000",
61    fontWeight: "bold",
62    padding: 2,
63    fontSize: 20
64  }
65});