I am trying to create a basic dropdown in React Native.

I have created a dropdown component:

//Dropdown

import React, { useState } from "react";

import {

  StyleSheet,

  Text,

  View,

  TouchableOpacity,

  Platform,

} from "react-native";

import { Feather } from "@expo/vector-icons";

import Responsive from "../responsive";

export default function DropDown({ options }) {

  const [isOpen, setIsOpen] = useState(false);



  const toggleDropdown = () => {

    setIsOpen((prev) => !prev);

  };



  return (

    <TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>

      <Text style={styles.selectedText}>Round</Text>

      <Feather name="chevron-down" size={24} />

      {isOpen && (

        <View style={styles.menu}>

          {options.map((item) => (

            <Text style={styles.option} key={item}>

              {item}

            </Text>

          ))}

        </View>

      )}

    </TouchableOpacity>

  );

}



const styles = StyleSheet.create({

  dropdownBox: {

    backgroundColor: "#FDCD3C",

    width: Responsive.width(364),

    alignSelf: "center",

    flexDirection: "row",

    height: Responsive.height(50),

    alignItems: "center",

    justifyContent: "space-between",

    paddingHorizontal: Responsive.width(15),

    // position: "absolute",

    borderRadius: 6,

    elevation: Platform.OS === "android" ? 50 : 0,

    marginVertical: Responsive.height(10),

    zIndex: 0,

  },

  selectedText: {

    fontFamily: "airbnb-bold",

    // color: "#fff",

    fontSize: Responsive.font(15),

  },

  menu: {

    position: "absolute",

    backgroundColor: "#fff",

    width: Responsive.width(364),

    paddingHorizontal: Responsive.width(15),

    paddingVertical: Responsive.height(10),

    // height: Responsive.height(20),

    // bottom: 0,

    top: Responsive.height(55),

    zIndex: 2,

    elevation: 2,

  },

  option: {

    height: Responsive.height(20),

  },

});



DropDown.defaultProps = {

  options: [],

  additionalStyles: {},

};

but I have a problem with the zIndex

the first dropdown is hiding under the second dropdown

I tried to play with the z-index in both places but it has not worked

Does anyone have an idea how I can solve this issue?

//Dropdowns container

import React from "react";

import { StyleSheet, Text, View } from "react-native";

import GradientBackground from "../../../shared/GradientBackground";

import ListTable from "../components/ListTable";

import DropDown from "../../../shared/DropDown";

import Responsive from "../../../responsive";

export default function PriceList() {

  return (

    <GradientBackground>

      <View>

        <DropDown

          options={[

            "BR",

            "PS",

            "OV",

            "PR",

            "RAD",

            "AC",

            "EM",

            "MQ",

            "BAG",

            "HS",

            "CU",

            "TRI",

          ]}

        />

        <DropDown options={["1.50 - 1.99 carat"]} />

        {/* <ListTable /> */}

      </View>

    </GradientBackground>

  );

}



const styles = StyleSheet.create({});