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({});
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]}>
Youn can try this way. it works for me
<View style={{zIndex: 2000}}>
<DropDownPicker />
</View>
<View style={{zIndex: 1000}}>
<DropDownPicker />
</View>
</>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.