Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

zIndex bug for absolute view

See original GitHub issue

Before I used the libary I could do in my scene:

<View>
   <View style={{position: 'absolute', zIndex: 20}}>
       <Autocomplete />
  </View>

  <Flatlist/>

</View>

The autocomplete can open above the list. now what happens is that the Flatlist is always above the Autocomplete view. if I swap the order of the components its works fine. (but in RN view it should be fine to use the zIndex as above)

Any idea why it happens? both iOS and Android so I guess it’s not related to something native.

Issue Analytics

State:
Created 4 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

grahammendickcommented, Sep 23, 2021

Hey @melkayam92 while working on something else I worked out what was wrong. The SceneView java class has to inherit from ReactViewGroup (instead of ViewGroup) to get the zIndex working. I’ve just released the fix in navigation-react-native v8.1.1

1reaction

melkayam92commented, Oct 21, 2019

I see.

I will check it in my real use case and let you know.

Top Results From Across the Web

z-index not working with position absolute - Stack Overflow

I faced this issue a lot when using position: absolute; , I faced this issue by using position: relative in the child element....

4 reasons your z-index isn't working (and how to fix it)

Z-index is a CSS property that allows you to position elements in layers on top of one another. It's super useful, and honestly...

Why your z-index isn't working - DEV Community ‍ ‍

By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set ......

zIndex + position:'absolute' breaks with dynamic components ...

When using any kind of zIndex value with position:'absolute', dynamic components (views in an array for example), will fall out of place or...

Fixes for CSS z-index not working - Weekend Projects

A common issue when design web layouts is making sure one element appears in front or behind another element. One way to stack...