1 <Picker
2        selectedValue={selectedValue}
3        style={{ height: 50, width: 150 }}
4        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
5      >
6        <Picker.Item label="Java" value="java" />
7        <Picker.Item label="JavaScript" value="js" />
8      </Picker>

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}

1import React, { Component } from "react";
2import { Picker, View, Text, StyleSheet } from "react-native";
3
4export default class CategoryScreen extends Component {
5  state = {
6    selectedcat: "",
7    category: [
8      {
9        itemName: "Samsung M20"
10      },
11      {
12        itemName: "Nokia"
13      },
14      {
15        itemName: "Apple"
16      },
17      {
18        itemName: "Samsung M23"
19      },
20      {
21        itemName: "Samsung M24"
22      },
23      {
24        itemName: "Samsung M25"
25      }
26    ]
27  };
28
29  async onValueChangeCat(value) {
30    this.setState({ selectedcat: value });
31  }
32
33  render() {
34    return (
35      <View style={styles.viewStyle}>
36        <View style={{ flex: 0.3 }}>
37          <Text style={styles.textStyle}>Categories</Text>
38        </View>
39        <View style={{ flex: 0.7, fontSize: 14 }}>
40          <Picker
41            itemStyle={styles.itemStyle}
42            mode="dropdown"
43            style={styles.pickerStyle}
44            selectedValue={this.state.selectedcat}
45            onValueChange={this.onValueChangeCat.bind(this)}
46          >
47            {this.state.category.map((item, index) => (
48              <Picker.Item
49                color="#0087F0"
50                label={item.itemName}
51                value={item.itemName}
52                index={index}
53              />
54            ))}
55          </Picker>
56        </View>
57      </View>
58    );
59  }
60}
61
62const styles = StyleSheet.create({
63  viewStyle: {
64    flex: 1,
65    alignSelf: "center",
66    flexDirection: "row",
67    width: "92%",
68    justifyContent: "space-between",
69    alignItems: "center"
70  },
71  itemStyle: {
72    fontSize: 10,
73    fontFamily: "Roboto-Regular",
74    color: "#007aff"
75  },
76  pickerStyle: {
77    width: "100%",
78    height: 40,
79    color: "#007aff",
80    fontSize: 14,
81    fontFamily: "Roboto-Regular"
82  },
83  textStyle: {
84    fontSize: 14,
85    fontFamily: "Roboto-Regular"
86  }
87});
88

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});