zIndex broken when containers have a background color

[acb]

🐛 Bug Report

zIndex is broken when you have a component that has a container that has a background color. For example, given code like

render() {
    return <View style={styles.background}>
        <View style={styles.redBox}></View>
        <View>
            <View style={styles.greenBox}></View>
        </View>
    </View>
}

let styles = StyleSheet.create({
    background: {
        backgroundColor: "blue",
        height: "100%"
    },
    greenBox: {
        backgroundColor: "green",
        width: 100,
        height: 100,
        zIndex: 2
    },
    redBox: {
        height: 300,
        width: 300,
        backgroundColor: "red",
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 1
    },
});

you get a view that makes sense, blue background, then red box, then green box on top.

However, if you add a background color to the green box's container the zIndex breaks:

<View style={styles.background}>
   <View style={styles.redBox}></View>
   <View style={{backgroundColor: "yellow"}}>
        <View style={styles.greenBox}></View>
    </View>
</View>

Expected Behavior

Components inside of a container with a background color should still respect zIndex.

Code Example

import React, { Component } from 'react';
import {
    View,
    ScrollView,
    StyleSheet,
 } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styles.background}>
                <View style={styles.redBox}></View>
                <View style={{backgroundColor: "yellow"}}>
                    <View style={styles.greenBox}></View>
                </View>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    background: {
        backgroundColor: "blue",
        height: "100%"
    },
    greenBox: {
        backgroundColor: "green",
        width: 100,
        height: 100,
        zIndex: 2
    },
    redBox: {
        height: 300,
        width: 300,
        backgroundColor: "red",
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 1
    },
});

Environment

Environment:
OS: Windows 10
Node: 9.3.0
Yarn: 1.3.2
npm: 4.6.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Packages: (wanted => installed)
react: 16.3.2 => 16.3.2
react-native: ^0.55.4 => 0.55.4

It's worth noting that on iOS not even the working example I give here works, it doesn't show the green box above the red one ever.

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[ericlewis]

zIndex is only relative to the parent element, so in this case, the view you are setting to yellow is the parent (the background color is irrelevant), therefore, it is working correctly. If you set the zIndex of the parent element, it will work properly.

[acb]

@ericlewis then why does it work in the first example? The green box shows on top in the first example, but then when you change the background color in the second example (literally the only code change) the green box no longer renders on top of the red box.

I can toggle back and forth between the green box rendering on top of the red one or not just by adding or removing the backgroundColor: "yellow" on the green box's parent so it certainly seems relevant.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[ericlewis]

@acb I tried the first example on iOS and it definitely does not work. There is an optimization for collapse layout components, so my guess is that perhaps that is occurring here, and accidentally allowing zIndex to look correct.

[JKCooper2]

I believe it's working correctly and the behaviour is due to the stacking context
Repro: https://snack.expo.io/@jkcooper/zindex-stacking-context
Details on zIndex stacking context: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Edit: Have updated the snack, looks like the issue is a platform disparity between android and ios. Toggle between the two platforms and you'll see on android zIndex pushes the green over. I don't understand zIndex stacking well enough to know which is the correct behaviour

[acb]

Yeah I think the fact that green renders on top at all is the bug, unfortunately...

[ngdlmk]

zIndex is not working for RN 0.61.5 on android but working well on IOS

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[nickarora]

I'm similarly seeing unexpected behavior with zindex on android with 0.61.5 as well

[jonybar9]

Having a similar problem.
Really wierd

[akshgods]

same issue

[bittu1028]

same issue

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.