Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zIndex not properly working in List #16878

Closed
TheNoim opened this issue Nov 18, 2017 · 9 comments
Closed

zIndex not properly working in List #16878

TheNoim opened this issue Nov 18, 2017 · 9 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@TheNoim
Copy link

TheNoim commented Nov 18, 2017

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:)

  1. Make a list (FlatList or Array.map, it happens with both)
  2. The renderItem should get an onPress event
  3. 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

@yossisal
Copy link

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

@TheNoim
Copy link
Author

TheNoim commented Dec 15, 2017

Any progress so far?

@stale
Copy link

stale bot commented Feb 13, 2018

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 13, 2018
@TheNoim
Copy link
Author

TheNoim commented Feb 13, 2018

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

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 13, 2018
@react-native-bot
Copy link
Collaborator

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 ContributeWhat to Expect from Maintainers

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 24, 2018
@TheNoim TheNoim mentioned this issue Mar 29, 2018
3 tasks
@ethanyuwang
Copy link

Having the same issue here

@SurajMDurgad
Copy link

Even I'm having the same issue!

@SophieCooperman
Copy link

SophieCooperman commented May 13, 2018

Having same issue using react-native 0.55.3

@AugustoAleGon
Copy link

Same Issue in version 0.57.5

@facebook facebook locked as resolved and limited conversation to collaborators Feb 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

7 participants