WebView is empty in React Native - react-native

Question

Problem. The WebView is empty in React Native. However, the link works.
The code :
import React from 'react';
import { StyleSheet, View, WebView } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View>
<View style={styles.statusBar} />
<WebView
source={{uri: 'https://lapommeculturelle.com'}}
renderError={() => alert('Merci de vérifier votre connexion Internet - Internet non disponible')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
statusBar: {
backgroundColor: "#1D3B57",
height: Constants.statusBarHeight,
}
});
For this project, I used Expo XDE. Thanks.

Answer 1

I believe you need to be specifying the height and width of the webview, as well as specifying the flex for the wrapping view.
Try this:
<View style={{flex:1}}>
<View style={styles.statusBar} />
<WebView
style={{height: 300, width: 300}}
source={{uri: 'https://lapommeculturelle.com'}}
renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
/>
</View>

Answer 2

At the bare minimum, you need a style for the View that wraps the rest of them.
I'd recommend <View style={{flex: 1}}> just to get you started.
In an ideal world, you'd make that a style associated with your container and be pulling it from your StyleSheet:
import React from 'react';
import { StyleSheet, Text, View, WebView, ActivityIndicator } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.statusBar} />
<WebView
source={{uri: 'https://lapommeculturelle.com'}}
renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
statusBar: {
backgroundColor: "#1D3B57",
height: Constants.statusBarHeight,
}
});

Answer 3

My fix for iOS, for some reason, is this style:
<WebView
// fixes warning when page has an iframe (about:srcdoc)
originWhitelist={['http://*', 'https://*', 'about:srcdoc']}
renderLoading={this._renderLoadingWebView}
scrollEnabled
source={{ uri }}
style={{ borderWidth: 1, borderColor: 'transparent' }}
/>
react-native-webview 7.5.2