Any view that is a sibling of a WebView in Android gets removed if it's zIndex is higher than that of the WebView and the WebView has the property startInLoadingState.
In the below code, simply removing the zIndex attribute of the sibling style fixes the issue.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
WebView,
View,
} from 'react-native';
export default class webviewloader extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.sibling}>Test sibling view</Text>
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
startInLoadingState
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
sibling: {
zIndex: 1,
},
});
AppRegistry.registerComponent('webviewloader', () => webviewloader);
Description
Any view that is a sibling of a WebView in Android gets removed if it's zIndex is higher than that of the WebView and the WebView has the property startInLoadingState.
Reproduction
In the below code, simply removing the zIndex attribute of the sibling style fixes the issue.
Solution
May be related to #8968
Additional Information