Multiple Picker dropdown gets hidden below another Picker component in Android

[sudhirkumarojhaa]

Describe the bug
A clear and concise description of what the bug is.
When the dropdown is opened. It gets behind another picker component below it.

To Reproduce
Steps to reproduce the behavior:


Create an expo snack:
https://snack.expo.io/

Expected behavior
A clear and concise description of what you expected to happen.
the visible dropdown should override every other component

Screenshots
If applicable, add screenshots to help explain your problem.

Supposed to work like this in both platforms
iOS screenshot

Works like this in Android which is an issue

Info (please complete the following information):

• OS: [iOS, Android]
• Package version [e.g. 22]

Additional context
Add any other context about the problem here.

[hossein-zare]

Hello,

Please read zIndex conflicts.
https://github.com/hossein-zare/react-native-dropdown-picker#zindex-conflicts-untouchable-items-overlapping-pickers

[hossein-zare]

#32

[kaurrJaspreet]

I am still getting this issue

[kaurrJaspreet]

anyone can share the sample code please?

[hossein-zare]

Hello @jaspreetjk
https://snack.expo.io/@hossein-zare/823437

If this doesn't help you, You can share your own code snippet with the containerStyle prop.

[turch]

@hossein-zare
https://snack.expo.io/4PUy_IzLh

Your snippet, modified to show the bug.

[hossein-zare]

@turch

DropDownPicker wrapped by <View style={{backgroundColor: '...'}}>
Remove the backgroundColor from the parent element.
#40 (comment)

Multiple Pickers
<DropDownPicker zIndex={5000} />
<DropDownPicker zIndex={4000} />
<DropDownPicker zIndex={3000} />

<View
    style={{
        ... // No backgroundColor

        ...(Platform.OS !== 'android' && {
            zIndex: 20
        })
    }}
>
    <DropDownPicker ... />
</View>
<View
    style={{
        ... // No backgroundColor

        ...(Platform.OS !== 'android' && {
            zIndex: 10
        })
    }}
>
    <DropDownPicker ... />
</View>

https://github.com/hossein-zare/react-native-dropdown-picker#zindex-conflicts-untouchable-items-overlapping-pickers

[turch]

Ah my bad, I saw the thing about the background color but missed the increasing zIndex.

From reading some other issue report, not being able to use background color is a React Native issue, correct?

[hossein-zare]

Yes, There are some other properties that cause unexpected behaviors.

[sudhirkumarojhaa]

Hi Hoseein

I have integrated the Dropdown picker in the flatlist so it is rendering it multiple times. In the android the dropdown overalps with the rest of the content which is not dropdown. I have added all the zindex and others which are laid in the REadme. Can you help

[yogendrajs]

hi @hossein-zare, I see how zIndex works for multiple pickers at this page - https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/tutorials/multiple-pickers
but, if a dropdowns is dependent on another dropdown (where disabled prop is being used), zIndex & zIndexInverse don't seem to work for me, can you please help?