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