When Dropdown opens, dropdown container not taking z index, its not on the top of the below view

[sagarkbluebenz]

Dropdown container forcing below content go down when opens dropdown. not able to apply z index

[pedrogs97]

Try this:

<View style={{ zIndex: 100 }}>
   <DropDownPicker {...} />
</View>

[carlossalasamper]

I have the same issue here

[lucasuracosta]

Same for me. It happens only when the dropdown opens to the bottom

[lucasuracosta]

Try this:

<View style={{ zIndex: 100 }}>
   <DropDownPicker {...} />
</View>

¡This worked for me!

[kongshu612]

Hi there,

            <TouchableOpacity style={_style} onPress={__onPress} onLayout={__onLayout} {...props} ref={onRef} pointerEvents={pointerEvents} disabled={disabled} testID={testID}>
                {_BodyComponent}
                {_ArrowComponent}
            </TouchableOpacity>
            {DropDownBodyComponent}
        </View>

Is it reasonable that we only apply the ZIndex to the DropDownBodyComponent?

[challme28]

<View style={{ zIndex: 100 }}>
<DropDownPicker {...} />

This hasn't work for me either

[devioand-aj]

I fixed this problem from #450 (comment)

[challme28]

Understanding the following helped me achieve the desired out in React Native
The way React Native zIndex hierarchy works is as follows:

<ComponentA>
  <Children1 zIndex={99}/>
  <Children2/>
<ComponentA/>
<ComponentB>
  <Children3/>
  <Children4 zIndex={9}/>
<ComponentB/>

Children1 will always render below Children3 and Children4. Children4 is able to render on top of Children3. Should Children3 have a Child with a zIndex equal to 999, it would still render below Children4.

[durgesh94]

Try this:

<View style={{ zIndex: 100 }}>
   <DropDownPicker {...} />
</View>

If trying this,
on android devices the list is not scrolling, working fine on iOS devices.

[Linh-Vo]

still didn't work on IOS

[sharived]

I'm still having this issue. If the dropDownDirection is Bottom then no matter where I set my zIndex it's always behind my other inputs. If I set it to Top it works fine. Very frustrating....

[hoon25]

If you're using the Dropdown component inside a FlatList, it seems that the height(z-index) is set according to the rendering order of the FlatList, and it cannot be changed using z-index. Although it's not a perfect solution, I resolved the issue by reversing the order of the FlatList's data and applying the {flexDirection: 'column-reverse'} property!