React native - z-index in dropdown doesnt work

Question

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

Answer 1

I think zIndex only applies to siblings... so the nested menu won't pop "out" over its parent's siblings using it. You could probably apply descending zIndex's on the DropDown elements, so that each element can overlay the fields below it.

<DropDown style={{zIndex: 10}} />
<DropDown style={{zIndex: 9}} />

Also, if you add a style prop to your custom component, you'll need to use it for it to take effect:

So instead of:

export default function DropDown({ options }) {
...
<TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>

You'd have:

export default function DropDown({ options, style }) {
...
<TouchableOpacity onPress={toggleDropdown} style={[styles.dropdownBox, style]}>