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: https://github.com/hossein-zare/react-native-dropdown-picker/issues/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]

https://github.com/hossein-zare/react-native-dropdown-picker/issues/248