[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

1. react-native -v:

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

1. node -v: v8.1.3

2. npm -v: 5.0.3

3. yarn --version: 0.27.5

4. Target Platform: both

5. Development Operating System: macOS Sierra

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

Reproducible Demo

Please see this gist.

[pqthang97]

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.

[9006]

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