react-native: [0.45+] Changing zIndex dynamically not working on Android

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

react-native -v:

react-native-cli: 2.0.1
react-native: 0.46.0

node -v: v8.1.3
npm -v: 5.0.3
yarn --version: 0.27.5
Target Platform: both
Development Operating System: macOS Sierra
Build tools: both

Steps to Reproduce

In RN 0.44, I can dynamically change zIndex layout prop for Views on both Android & iOS. But after upgrading to 0.46, only iOS can work as expected, can’t make it work on Android.

Expected Behavior

zIndex could be changed dynamically on Android.

Actual Behavior

Here are screenshot on Android. By tapping on “Change top box” button, it’s expected that red box will overlap green & blue boxes, another tap should make green box overlap the others, and so on. This works on iOS, but not on Android.

zIndex bug on Android

Reproducible Demo

Please see this gist.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 25 (1 by maintainers)

Most upvoted comments

I have this problem on 0.45.1 and 0.46.4. I set zIndex of 100, position absolute. It work fine in iOS but not android.

pqthang97 on Jul 22, 2017

hack style: {elevation:0.01,zIndex:999}

9006 on Jul 14, 2017

@ethan605 this is an active issue, it’s just a duplicate. The zIndex solution is also not a workaround, it is the actual bug here. The behavior differs greatly, especially when it comes to handling presses in the zIndexed views.

Noitidart on Oct 13, 2017

I have the same issue here - with screencasts - and git clone’able super simple app - https://github.com/facebook/react-native/issues/8968#issuecomment-298992588

That comment links to stackoverflow - https://stackoverflow.com/questions/45021849/zindex-not-working-on-android-0-46-but-does-on-ios-and-even-uwp-windows

zIndex works perfectly as expected on iOS and even windows (UWP) but not on Android 😦

I am using 0.46.1

Noitidart on Jul 11, 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 Dec 16, 2017

@ethan605 Is there a fix for this? Why is this closed?

rtman on Oct 11, 2017

I am waiting for this one too …

hyochan35 on Aug 30, 2017