how to make your own drop down react native

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