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 not properly working in List

See original GitHub issue

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

 Environment:
  OS:  macOS High Sierra 10.13.1
  Node:  8.9.1
  Yarn:  1.3.2
  npm:  5.5.1
  Watchman:  4.9.0
  Xcode:  Xcode 9.0 Build version 9A235
  Android Studio:  3.0 AI-171.4408382

Packages: (wanted => installed)
  react: 16.0.0-alpha.12 => 16.0.0-alpha.12
  react-native: 0.50.3 => 0.50.3

  Target Platform: iOS (11.2)

Steps to Reproduce

(Write your steps here:)

Make a list (FlatList or Array.map, it happens with both)
The renderItem should get an onPress event
The onPress event changes the style to a high zIndex and position absolute

Expected Behavior

(Write what you thought would happen.) I expect that the component with the high zIndex is over every other component.

Actual Behavior

(Write what happened. Add screenshots!) It seems like it ignores the zIndex property. The behavior is exactly like I would not apply any zIndex. I can remove the zIndex and I get the same result. Google Drive Link to a screenshot.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.) Github Demo Project It is an expo project, but It happens also on an ejected rn project. This is just an extract out of my current rn project. Expo Link Google Drive Video which show the issue

Issue Analytics

State:
Created 6 years ago
Reactions:13
Comments:9

Top GitHub Comments

7reactions

react-native-botcommented, Feb 24, 2018

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

6reactions

TheNoimcommented, Feb 13, 2018

Z-Index is a very important prop for structuring your ui, so I think this definitely should get fixed.

Top Results From Across the Web

Why does z-index not work? - Stack Overflow

The z-index property only works on elements with a position value other than static (e.g. position: absolute; , position: relative; ...

CSS Z-Index Not Working? How to Fix It Using Stack Order

The z-index property of CSS is a tricky one. It won't work easily by itself if you don't know how to use it...

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 ......

Fixes for CSS z-index not working - Weekend Projects

Fixes for CSS z-index not working · Table of contents · What is z-index? · The stacking context · Fix 1 - check...

9999 Isn't Working (How to Use z-index in CSS) - YouTube

Is your z-index not working ? Are you confused why sometimes, no matter what you do, you can't place one element on top...