Why isn't zIndex working in React Native? - ios

Question

I've been trying to use the property zIndex on a ScrollView but it doesn't seem to be working. When I apply zIndex it looks like this:
As you can see, the ScrollView is being blocked by the input. I want the effect of having the ScrollView completely cover the other input when the suggestions come up, with zIndex. Here's what I have right now:
<View>
<Input
value={this.state.inputValue}
style={styles._input}
inputStyle={styles._text}
onChangeText={this.handleChangeText}
{...this.props}
/>
<View style={styles._spacing}></View>
{predictions.length ?
<ScrollView
style={styles._scroll}
>
{predictions.map(this.renderPrediction)}
</ScrollView>
: null}
</View>
Note that Input is a separate component that renders a specific TextInput. Also, this.renderPrediction returns this:
<Text
style={styles._text}
key={index}
onPress={this.handlePredictionPress.bind(null, prediction.description)}
>
{prediction.description}
</Text>
And finally here are my styles:
const styles = EStyleSheet.create({
input: StyleSheet.flatten([inputStyle]),
text: {
fontSize: 15,
},
spacing: {
height: 10
},
scroll: {
position: "absolute",
zIndex: 10,
width: "80%",
top: 50,
backgroundColor: "white"
}
});
Why isn't my zIndex attempt working and how can I get it to work as desired?

Answer 1

According to your image it looks like the zIndex is working as expected, the ScrollView is over the input. But the white background didn't catch.
Use contentContainerStyle for the background color behind the items.
<ScrollView style={styles._scroll} contentContainerStyle={styles._contentContainer} >
...
contentContainer: {backgroundColor: "white"}