React native – z-index in dropdown doesnt work Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React native – z-index in dropdown doesnt work without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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?

enter image description here

//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

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]}>
We are here to answer your question about React native – z-index in dropdown doesnt work - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji