zIndex is broken across ScrollViews #23614
Description
🐛 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.