dropdown react native code example
Example 1: picker change event react native
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
Example 2: react native dropdown
npm install --save react-native-material-dropdown
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}
/>
);
}
}
Example 3: how to make your own drop down react native
import React, { Component } from "react";
import { Picker, View, Text, StyleSheet } from "react-native";
export default class CategoryScreen extends Component {
state = {
selectedcat: "",
category: [
{
itemName: "Samsung M20"
},
{
itemName: "Nokia"
},
{
itemName: "Apple"
},
{
itemName: "Samsung M23"
},
{
itemName: "Samsung M24"
},
{
itemName: "Samsung M25"
}
]
};
async onValueChangeCat(value) {
this.setState({ selectedcat: value });
}
render() {
return (
<View style={styles.viewStyle}>
<View style={{ flex: 0.3 }}>
<Text style={styles.textStyle}>Categories</Text>
</View>
<View style={{ flex: 0.7, fontSize: 14 }}>
<Picker
itemStyle={styles.itemStyle}
mode="dropdown"
style={styles.pickerStyle}
selectedValue={this.state.selectedcat}
onValueChange={this.onValueChangeCat.bind(this)}
>
{this.state.category.map((item, index) => (
<Picker.Item
color="#0087F0"
label={item.itemName}
value={item.itemName}
index={index}
/>
))}
</Picker>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
viewStyle: {
flex: 1,
alignSelf: "center",
flexDirection: "row",
width: "92%",
justifyContent: "space-between",
alignItems: "center"
},
itemStyle: {
fontSize: 10,
fontFamily: "Roboto-Regular",
color: "#007aff"
},
pickerStyle: {
width: "100%",
height: 40,
color: "#007aff",
fontSize: 14,
fontFamily: "Roboto-Regular"
},
textStyle: {
fontSize: 14,
fontFamily: "Roboto-Regular"
}
});