Dropdowns overflow on eachother

[1mehdifaraji]

When Using multiple dropdowns they overflow on eachother .

"react": "17.0.2"
"react-native": "0.66.1"
"react-native-dropdown-picker": "^5.2.3"

[1mehdifaraji]

Solved the issue with onOpen handler and using elevation and zIndex and active state :

const [active, setActive] = React.useState(0);

// Location dropdown
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState(null);
const [items, setItems] = React.useState([
{label: 'تهران', value: 'teh'},
{label: 'اصفهان', value: 'esf'},
{label: 'تبریز', value: 'tab'},
{label: 'ارومیه', value: 'urm'},
]);

// MainCategory Dropdown
const [mainCatOpen, setMainCatOpen] = React.useState(false);
const [mainCatValue, setMainCatValue] = React.useState(null);
const [mainCatItems, setMainCatItems] = React.useState([
{label: 'موبایل', value: 'mobile'},
{label: 'مسکن', value: 'estate'},
{label: 'ماشین', value: 'car'},
]);

// Sub Category Dropdown
const [subCatOpen, setSubCatOpen] = React.useState(false);
const [subCatValue, setSubCatValue] = React.useState(null);
const [subCatItems, setSubCatItems] = React.useState([
{label: 'تهران', value: 'teh'},
{label: 'اصفهان', value: 'esf'},
{label: 'تبریز', value: 'tab'},
{label: 'ارومیه', value: 'urm'},
]);
`

<View
style={{
elevation: active === 1 ? 99 : 1,
zIndex: active === 1 ? 99 : 1,
}}>
<DropDownPicker
disabled={active === 3 || active === 2}
onOpen={() => setActive(1)}
onClose={() => setActive(0)}
placeholder="شهر"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
placeholderStyle={{color: '#666'}}
textStyle={{
fontFamily: 'Vazir-Regular',
color: darkmode ? 'white' : 'black',
fontSize: 17,
}}
style={{
marginTop: 10,
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: darkmode ? '#545454' : '#ccc',
borderRadius: 15,
}}
dropDownContainerStyle={{
backgroundColor: darkmode ? '#101419' : 'white',
borderColor: darkmode ? '#545454' : '#ccc',
borderRadius: 20,
}}
arrowIconStyle={{
backgroundColor: 'white',
borderRadius: 20,
}}
tickIconStyle={{
backgroundColor: 'white',
borderRadius: 20,
}}
/>

<View
style={{
elevation: active === 2 ? 99 : 1,
zIndex: active === 2 ? 99 : 1,
}}>
<DropDownPicker
onClose={() => setActive(0)}
disabled={active === 3 || active === 1}
onOpen={() => setActive(2)}
onChangeValue={c => {
c === 'mobile'
? setSubCatItems([
{label: 'اندروید', value: 'android'},
{label: 'آیفون', value: 'iphone'},
])
: c === 'estate'
? setSubCatItems([
{label: 'اجاره', value: 'rent'},
{label: 'فروش', value: 'buy'},
])
: setSubCatItems([
{label: 'ایرانی', value: 'iran'},
{label: 'خارجی', value: 'abroad'},
{label: 'کلکسیونی', value: 'collection'},
{label: 'بنز', value: 'benz'},
{label: 'بی ام و', value: 'bmw'},
]);
}}
placeholder="دسته بندی"
open={mainCatOpen}
value={mainCatValue}
items={mainCatItems}
setOpen={setMainCatOpen}
setValue={setMainCatValue}
setItems={setMainCatItems}
placeholderStyle={{color: '#666'}}
textStyle={{
fontFamily: 'Vazir-Regular',
color: darkmode ? 'white' : 'black',
fontSize: 17,
}}
style={{
marginTop: 10,
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: darkmode ? '#545454' : '#ccc',
borderRadius: 15,
}}
dropDownContainerStyle={{
backgroundColor: darkmode ? '#101419' : 'white',
borderColor: darkmode ? '#545454' : '#ccc',
borderRadius: 20,
}}
arrowIconStyle={{
backgroundColor: 'white',
borderRadius: 20,
}}
tickIconStyle={{
backgroundColor: 'white',
borderRadius: 20,
}}
/>

<View
style={{
elevation: active === 3 ? 99 : 1,
zIndex: active === 3 ? 99 : 1,
}}>
<DropDownPicker
onClose={() => setActive(0)}
disabled={active === 1 || active === 2}
onOpen={() => setActive(3)}
placeholder="زیردسته"
open={subCatOpen}
value={subCatValue}
items={subCatItems}
setOpen={setSubCatOpen}
setValue={setSubCatValue}
setItems={setSubCatItems}
placeholderStyle={{color: '#666'}}
textStyle={{
fontFamily: 'Vazir-Regular',
color: darkmode ? 'white' : 'black',
fontSize: 17,
}}
style={{
marginTop: 10,
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: darkmode ? '#545454' : '#ccc',
borderRadius: 15,
}}
dropDownContainerStyle={{
backgroundColor: darkmode ? '#101419' : 'white',
borderColor: darkmode ? '#545454' : '#ccc',
borderRadius: 20,
}}
arrowIconStyle={{
backgroundColor: 'white',
borderRadius: 20,
}}
tickIconStyle={{
backgroundColor: 'white',
borderRadius: 20,
}}
/>