I am developing the application which requires the creation of custom dropdown menu any help with the refrences.
2
-
what do you mean by custom, like you make your own dropdown or use some library?Gaurav Roy– Gaurav Roy2020-01-23 06:17:28 +00:00Commented Jan 23, 2020 at 6:17
-
Make your own dropdown.reactNative94– reactNative942020-01-23 06:46:43 +00:00Commented Jan 23, 2020 at 6:46
Add a comment
|
3 Answers
Try this below example which I create using react Native Picker
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"
}
});
Change this according to your requirement. Feel free for doubts.
2 Comments
reactNative94
Thankyou, will try to implement this kind of behaviour.
Rex Omiv
The react native picker is deprecated but you can use one of the community packages as stated in the docs reactnative.dev/docs/0.65/picker
Use https://www.npmjs.com/package/react-native-modal-dropdown
Compatible with both iOS and Android. Auto position. (Won't be covered or clipped by the edge of screen.) Zero configuration. (Options are needed of course or a loading indicator will show.) Highly customizable. Controllable with API by code. (Show/Hide/Select) Change everything into a dropdown list trigger.
1 Comment
reactNative94
Yeah I also saw thi library but just wanted try if could make my own else I will be using this library. Thankyou.
if you are looking for a searchable dropdown i recommend
react-native-element-dropdown this really helpful .You can search in your list very easily
https://www.npmjs.com/package/react-native-element-dropdown
