zIndex does not work with dynamic components on Android #8968
Description
I am trying to render elements conditionally where each element has different zIndex style property.
Using folowing code in Android emulator with react-native 0.30.0.
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Demo extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
showGreen: true,
};
}
render() {
return (
<View style={{flex: 1, padding: 20}}>
<View style={[styles.item, {zIndex: 3, backgroundColor: 'red'}]}>
<Text>zIndex: 3</Text>
</View>
{this.state.showGreen &&
<View style={[styles.item, {zIndex: 2, backgroundColor: 'green'}]}>
<Text>zIndex: 2</Text>
</View>
}
<View style={[styles.item, {zIndex: 1, backgroundColor: 'blue'}]}>
<Text>zIndex: 1</Text>
</View>
<View style={styles.button}>
<Text onPress={() => this.setState({ showGreen: !this.state.showGreen })}>
Toggle green
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
item: {
marginTop: -20,
height: 50,
paddingTop: 22,
},
button: {
backgroundColor: 'gray',
marginTop: 30,
}
});Initial screen looks like expected:
When I click 'Toggle green' button to dynamically show/hide green element it hides blue element instead and furthermore element's text is missing:
When I click the button again, red and green elements remains visible and the toggle button jumps down.