feat(loading): Changed loading/error rendering (#612)

src/WebView.android.tsx

@@ -244,13 +244,6 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     }
 
     const webViewStyles = [styles.container, styles.webView, style];
-    if (
-      this.state.viewState === 'LOADING'
-      || this.state.viewState === 'ERROR'
-    ) {
-      // if we're in either LOADING or ERROR states, don't show the webView
-      webViewStyles.push(styles.hidden);
-    }
 
     if (source && 'method' in source) {
       if (source.method === 'POST' && source.headers) {

src/WebView.ios.tsx

@@ -346,13 +346,6 @@ class WebView extends React.Component<IOSWebViewProps, State> {
     }
 
     const webViewStyles = [styles.container, styles.webView, style];
-    if (
-      this.state.viewState === 'LOADING'
-      || this.state.viewState === 'ERROR'
-    ) {
-      // if we're in either LOADING or ERROR states, don't show the webView
-      webViewStyles.push(styles.hidden);
-    }
 
     const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
       this.onShouldStartLoadWithRequestCallback,

src/WebView.styles.ts

@@ -2,11 +2,9 @@ import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
 interface Styles {
   container: ViewStyle;
-  errorContainer: ViewStyle;
   errorText: TextStyle;
   errorTextTitle: TextStyle;
-  hidden: ViewStyle;
+  loadingOrErrorView: ViewStyle;
-  loadingView: ViewStyle;
   webView: ViewStyle;
   loadingProgressBar: ViewStyle;
 }
@@ -16,21 +14,14 @@ const styles = StyleSheet.create<Styles>({
     flex: 1,
     overflow: 'hidden',
   },
-  errorContainer: {
+  loadingOrErrorView: {
+    position: 'absolute',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
+    height: '100%',
-  },
+    width: '100%',
-  hidden: {
+    backgroundColor: 'white'
-    height: 0,
-    flex: 0, // disable 'flex:1' when hiding a View
-  },
-  loadingView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
   },
   loadingProgressBar: {
     height: 20,

src/WebViewShared.tsx

@@ -75,7 +75,7 @@ const getViewManagerConfig = (
 };
 
 const defaultRenderLoading = () => (
-  <View style={styles.loadingView}>
+  <View style={styles.loadingOrErrorView}>
     <ActivityIndicator />
   </View>
 );
@@ -84,7 +84,7 @@ const defaultRenderError = (
   errorCode: number,
   errorDesc: string,
 ) => (
-  <View style={styles.errorContainer}>
+  <View style={styles.loadingOrErrorView}>
     <Text style={styles.errorTextTitle}>Error loading page</Text>
     <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
     <Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>