zIndex is broken across ScrollViews

[acb]

🐛 Bug Report

zIndex is broken when you have a ScrollView between your two different zIndexes. 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 just switch the container of the green box to a ScrollView, the zIndex breaks:

<View style={styles.background}>
   <View style={styles.redBox}></View>
   <ScrollView>
        <View style={styles.greenBox}></View>
    </ScrollView>
</View>

Expected Behavior

Components inside of a ScrollView 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>
                <ScrollView>
                    <View style={styles.greenBox}></View>
                </ScrollView>
            </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.

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

[JKCooper2]

See https://github.com/facebook/react-native/issues/23615#issuecomment-466717338

[acb]

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

[tmaly1980]

@acb Why did you close this? I'm experiencing this issue too.

[Monstrik]

I'm experiencing this issue too.

[acb]

@tmaly1980 I guess this can be re-opened -- it's pretty similar to https://github.com/facebook/react-native/issues/23615, which has a snack that's an easier reproduction.

Personally I gave up on doing what I was trying to do with z-index and found another approach so I haven't been following these cases at all.

[tmaly1980]

@acb I can't speak for others still experiencing this issue, but I was able to fix my issue by applying zIndex to both sibling and shared ancestor components.

[mohfoad]

@tmaly1980 Hi, you told you was able to fix zindex issue between scrollviews. How did you fix it? I am appreciate if you can help me. Thanks

[purskills]

scrollview is not working for me too on android. it works on ios.

[aditya1711]

any fixes/ alternatives or workaround for this? How were you able to fix this?

@acb I can't speak for others still experiencing this issue, but I was able to fix my issue by applying zIndex to both sibling and shared ancestor components.

[aditya1711]

for me it works in in scrollView i provide in contentContainerStyle={{flex:1}}.

[mohfoad]

@aditya1711 HI, Thanks for your reply. I am not sure you tested it in 2 different ScrollViews. I am going to implement drag/drop between two scrollviews but one directional dragging item was hiden by alternative target scrollview. Could you verify for my actions?

[aditya1711]

@aditya1711 HI, Thanks for your reply. I am not sure you tested it in 2 different ScrollViews. I am going to implement drag/drop between two scrollviews but one directional dragging item was hiden by alternative target scrollview. Could you verify for my actions?

I am unable to completely understand what you said, but I think you can have different flex values for both scroll views. But I doubt zIndex works as expected with siblings of different parents. Please try it out and let us know. I also will be prepare a better implementation of my functionality if that works.

[fabOnReact]

<ScrollView style={{ zIndex: 3}} />

can you close? I tested on android

https://snack.expo.io/@fabrizio.bertoglio/supportive-graham-crackers

[mohfoad]

@fabriziobertoglio1987 Hey, you tested it in only one scrollview. I mean drag/drop between two scrollviews.

[stale[bot]]

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[bot]]

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.

[wanxue0804]

RN 0.62.2 also having this issue , Any solution for this issue?

[Developeranees]

same issue

[srikargunnam]

Scrollview with zIndex, and position absolute works someitmes and fails sometimes, still facing this issue.

[shanutthankachan]

same issue