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

[ethan605]

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.

[Noitidart]

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

[9006]

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

[Noitidart]

Thanks @ruwusu very much for sharing a work around. I tried it but it didn't work. May you please help me understand the hack. I even tried zIndex of 999 but it still wouldn't work.

[ethan605]

Thanks to @ruwusu, it seems that the elevation trick could work for now. There's only a problem with shadow effects with elevation, but that's better than not working.

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

[linnett]

elevation is certainly a decent work-around, thanks for that. It does not solve the problem with zIndex in Android. Defo a bug I can reproduce

[phips28]

we have the same issue on android (works on iOS). any news how to fix this on android?

[hyochan35]

I am waiting for this one too ..

[rtman]

Same here

_Sent from my Google Nexus 5 using FastHub_

[syardumi]

+1

[arcollector]

use elevation property, set it to 1 for example and you must put the container at the same level,

<View style={{flexDirection:'row'}}>
  <View style={{height:100,width:100,backgroundColor:'red'}} />
  <View style={{...StyleSheet.absoluteFillObject,left:50,height:100,width:100,backgroundColor:'green',elevation:1,zIndex:1}} />
  <View style={{height:100,width:100,backgroundColor:'blue'}} />
</View>

[rtman]

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

[metinsut]

still not working, please can someone take care of this issue.

[Noitidart]

I think it was closed because I think the similar/same issue is addressed here - https://github.com/facebook/react-native/issues/8968

[heynext]

same here

[ethan605]

@rtman
Firstly, it seems that the issue is no more active with RN team
Secondly, the workaround solution (using zIndex) is acceptable

[Noitidart]

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

[rtman]

@Noitidart right that's what I thought was happening. I just noticed in react-native 0.49 release there is a bugfix to zIndex, hopefully that fixes the issue. Will have a look soon.

[Noitidart]

I'm praying it's fixed in 0.49 too :) Long standing bug and never had a feasible workaround. :(

[ethan605]

@Noitidart @rtman thanks for your feedbacks. I've closed this due to a long time of inactivity. Now reopen to raise it again. Hope that a proper fix will be provided soon.

[Noitidart]

Thank you sir. I think you were right to close this though as it's a duplicate of that issue. I don't know if that patch fixes this though, we'll know in a bit, as soon as that patch releases.

[Noitidart]

Hey all I just tried using 0.49.3 and a fix landed! Yahoo. Try it again it might work, let us know.

[rtman]

Agreed 0.49.3 fixes my issue

_Sent from my Google Nexus 5 using FastHub_

[stale[bot]]

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.

[AugustoAleGon]

Same mistake!
In my case in order to use a drop down menu on Android. I have to remove all the index for Android.
So basically I have in the style something like:

...Platform.select({
ios: {
zIndex: 1000
}
})

and for the component that I want to show first I have to use:

zIndex: 100000

I know it is ridiculous but It works!