React-native: zIndex not properly working in List

Created on 18 Nov 2017 · 9Comments · Source: facebook/react-native

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

Ran Commands Locked

Source

TheNoim

👍11 ❤2

Most helpful comment

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

TheNoim on 13 Feb 2018

👍6

All 9 comments

@janicduplessis I was wondering if this is related to some other z-index issues you were looking at? Your help is much appreciated!!
It seems that z-Index and elevation are ignored inside VirtualList and its sub classes.

yossisal on 29 Nov 2017

Any progress so far?

TheNoim on 15 Dec 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

stale[bot] on 13 Feb 2018

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

TheNoim on 13 Feb 2018

👍6

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}