React-native: Changing zIndex style properties do not work on android

Created on 30 Aug 2017  路  5Comments  路  Source: facebook/react-native

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

  1. react-native -v: react-native-cli: 2.0.1, react-native: 0.47.2
  2. node -v: v8.2.1
  3. npm -v: 5.3.0
  4. yarn --version: No

Then, specify:

  • Target Platform: Android

  • Development Operating System: Linux

  • Build tools: Android SDK

Steps to Reproduce

  1. Make two or more overlapping component with different zIndex style properties. It's work.
  2. Change the zIndex property dynamically, e.g. by switch event. Not works.

Expected Behavior

When change zIndex properties, overlapping of visible objects will change.

Actual Behavior

On android platform, changing the zIndex property does not change overlaping order of the visible components.

On iOS emulator this works correctly.

Reproducible Demo

https://snack.expo.io/B1uniKNY-

Locked

All 5 comments

This is a known issue - Please read the issues at #8968 and #14854

Looks like potential fix is: #15203 and may land in rc-.48.2

Thanks for the detailed issue! 0.48 was released today, it should fix this issue.

This issue didn't get fixed. Still facing the same problem on android. I'm using 0.48.2.

On 0.48.0 and 0.48.2 it's works.

Whether I put a dynamic value (using this.state) or a static value, whenever I apply zIndex to my Component, it just disappears.

Here is my Component's styles:

mainContainer: {
    height:130,
    position:'absolute',
    zIndex:5
}
Was this page helpful?
0 / 5 - 0 ratings