dropdown list conflict with below View

[saaspeter]

Hi: When I use this good lib, I encounter a problem, see below picture:

the View is under the select dropdown list, they are conflicted. The component's version is: 5.4.6. The code like this:
"< View style={styles.pickerView} >
<DropDownPicker containerStyle={styles.pickerStyles}
style={{ backgroundColor: "crimson" }}
open={open}
value={drugDose.unitType}
items={items}
mode={"SIMPLE"}
textStyle={{ fontSize: 17 }}
setOpen={setOpen}
setValue={handleSlectChange}
setItems={setItems}
/>
</ View>
< View style={styles.footerView}>
< Text text="Generally, the dosage instructions... " />
</ View>"

I tried to add zIndex=1000 in DropDownPicker or add zIndex=1000 in its parent's View style (pickerView), but they all don't take effect in IOS simulator. My solution is to set zIndex=-1 in its below text view: styles.footerView, but I don't think it is a good solution, I think there should has a property in DropDownPicker to control the overlap problem. (unfortunately zIndex don't work), Is there any good solution?

(I found this issue: #103, but the solution link in it cannot find this section: "zindex-conflicts-untouchable-items-overlapping-pickers")

[AtulCube]

same here

[AtulCube]

[Awnish-10]

i have 2 DropDownPicker one below another adding this styling property fixes overlap problem for me
containerProps={{
style: {
zIndex: open ? 10 : 1,
},
}}
my entire custom component looks like
import React, { useState } from 'react';

import { StyleSheet } from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';
import { horizontalScale, verticalScale, scale } from '../../utils/scaling';

export default function CustomDropdown({ value, setValue, items }) {
const [open, setOpen] = useState(false);

return (
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
theme="DARK"
style={styles.container}
containerProps={{
style: {
zIndex: open ? 10 : 1,
},
}}
/>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#1A1C24',
borderRadius: scale(24),
paddingVertical: verticalScale(8),
paddingHorizontal: horizontalScale(16),
color: '#FEFEFE',
fontSize: scale(14),
fontWeight: '600',
},
});

[IuriKintschev]

same problem here.

Unfortunately the solution above didn't work for me.

[Awnish-10]

@IuriKintschev
you can refer to this example
https://codesandbox.io/s/xenodochial-hopper-vmjfsf?file=/src/CustomDropdown.js

[ferdiamg]

Just went like this as props for <DropDownPicker>:

zIndex={3000}
zIndexInverse={1000}

and it was solved.

[saaspeter]

Thank you all, I switched another simple component. [react-native-picker-select], so I close this issue.

[mauriciofullana]

#248