zIndex not working

[ankit-abylle]

I am using this component but the dropdown menu is not showing properly.

<DropDownPicker
zIndex={1000}
open={isopen}
value={value}
items={items}
setOpen={setisOpen}
onChangeValue={(value) =>console.log(value)}
setItems={setItems}
setValue={setValue}
dropDownContainerStyle={{ zIndex:10000,backgroundColor:'white',elevation:1000}} />

[ankit-abylle]

I am using this in expo React native application.

[mikehardy]

#376

[ankit-abylle]

Hi @mikehardy Thanks for the reply.
but the other dropdown are different packages that i am replacing currently.
Also I tried removing all other Picker then also its the same .

[mikehardy]

There's a distinct lack of ability to help without a complete example https://stackoverflow.com/help/minimal-reproducible-example

The strategy I showed you can actually toggle the zIndexing of the entire app if needed so I believe it should not matter what other packages you are trying to use

[ankit-abylle]

@mikehardy Thanks Let me try the above steps you mentioned .
If found issue will create a example.

[KhanhDuy-123]

<View style={{zIndex: 1000}}>
<DropDownPicker
open={isopen}
value={value}
items={items}
setOpen={setisOpen}
onChangeValue={(value) =>console.log(value)}
setItems={setItems}
setValue={setValue}
dropDownContainerStyle={{ zIndex:10000,backgroundColor:'white',elevation:1000}} />

i succeeded to wrap the view outside @ankit-abylle

[ankit-abylle]

@KhanhDuy-123 Thanks for the reply.
I tried with this but faced the same issue . Don't know why zIndex is not working for me.
At last I switched to react-native-picker-select.
This package worked for both android and ios.

[hossein-zare]

@ankit-abylle
@KhanhDuy-123 Your solution only works on iOS.

Solution:

const isAndroid = Platform.OS === 'android';

<View style={! isAndroid && {zIndex: 100}}>
  <DropDownPicker
    ...
    dropDownContainerStyle={{backgroundColor:'white'}}
    zIndex={100} />
</View>

<View style={! isAndroid && {zIndex: 50}}>
  <DropDownPicker
    ...
    dropDownContainerStyle={{backgroundColor:'white'}}
    zIndex={50} />
</View>

You should also read https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/tutorials/multiple-pickers

As @mikehardy has said, Consider reproducing your issue in a Snack.

There's a distinct lack of ability to help without a complete example https://stackoverflow.com/help/minimal-reproducible-example

The strategy I showed you can actually toggle the zIndexing of the entire app if needed so I believe it should not matter what other packages you are trying to use

[chuantran3796]

ios: zIndex, android: elevation. it woking

[ospfranco]

Even with the wrapping view with zIndex, it doesn't seem to be working for me

Any suggestion how to fix this?

[ospfranco]

Putting a zIndex value on the bottom one fixes this

[Linh-Vo]

still didn't work on IOS

[Everkers]

In android sit the z-index of the element that you want it to appear above to -1