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