feat(android): fix overflow issues and match iOS default render error and loading behaviour

src/WebView.android.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {
-  ActivityIndicator,
   Image,
   requireNativeComponent,
   UIManager as NotTypedUIManager,
@@ -17,6 +16,8 @@ import {
   defaultOriginWhitelist,
   createOnShouldStartLoadWithRequest,
   getViewManagerConfig,
+  defaultRenderError,
+  defaultRenderLoading,
 } from './WebViewShared';
 import {
   WebViewErrorEvent,
@@ -38,12 +39,6 @@ const RNCWebView = requireNativeComponent(
 ) as typeof NativeWebViewAndroid;
 const { resolveAssetSource } = Image;
 
-const defaultRenderLoading = () => (
-  <View style={styles.loadingView}>
-    <ActivityIndicator style={styles.loadingProgressBar} />
-  </View>
-);
-
 /**
  * Renders a native WebView.
  */
@@ -228,6 +223,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
       nativeConfig = {},
       ...otherProps
     } = this.props;
+
     let otherView = null;
 
     if (this.state.viewState === 'LOADING') {
@@ -235,16 +231,18 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     } else if (this.state.viewState === 'ERROR') {
       const errorEvent = this.state.lastErrorEvent;
       invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
-      otherView
-        = renderError
-        && renderError(errorEvent.domain, errorEvent.code, errorEvent.description);
+      otherView = (renderError || defaultRenderError)(
+        errorEvent.domain,
+        errorEvent.code,
+        errorEvent.description,
+      );
     } else if (this.state.viewState !== 'IDLE') {
       console.error(
         `RNCWebView invalid state encountered: ${this.state.viewState}`,
       );
     }
 
-    const webViewStyles = [styles.container, style];
+    const webViewStyles = [styles.container, styles.webView, style];
     if (
       this.state.viewState === 'LOADING'
       || this.state.viewState === 'ERROR'

src/WebView.ios.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ActivityIndicator,
-  Text,
   UIManager as NotTypedUIManager,
   View,
   requireNativeComponent,
@@ -16,6 +14,8 @@ import {
   defaultOriginWhitelist,
   createOnShouldStartLoadWithRequest,
   getViewManagerConfig,
+  defaultRenderError,
+  defaultRenderLoading,
 } from './WebViewShared';
 import {
   WebViewErrorEvent,
@@ -60,24 +60,6 @@ const RNCWKWebView: typeof NativeWebViewIOS = requireNativeComponent(
   'RNCWKWebView',
 );
 
-const defaultRenderLoading = () => (
-  <View style={styles.loadingView}>
-    <ActivityIndicator />
-  </View>
-);
-const defaultRenderError = (
-  errorDomain: string | undefined,
-  errorCode: number,
-  errorDesc: string,
-) => (
-  <View style={styles.errorContainer}>
-    <Text style={styles.errorTextTitle}>Error loading page</Text>
-    <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
-    <Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
-    <Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
-  </View>
-);
-
 class WebView extends React.Component<IOSWebViewProps, State> {
   static defaultProps = {
     useWebKit: true,

src/WebView.styles.ts

@@ -11,26 +11,28 @@ interface Styles {
   loadingProgressBar: ViewStyle;
 }
 
-const BGWASH = 'rgba(255,255,255,0.8)';
-
 const styles = StyleSheet.create<Styles>({
   container: {
     flex: 1,
+    overflow: 'hidden',
+    backgroundColor: 'white',
   },
   errorContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: BGWASH,
+    backgroundColor: 'white',
   },
   hidden: {
     height: 0,
     flex: 0, // disable 'flex:1' when hiding a View
+    display: 'none',
   },
   loadingView: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: 'white',
   },
   loadingProgressBar: {
     height: 20,

src/WebViewShared.ts → src/WebViewShared.tsx

@@ -1,10 +1,18 @@
 import escapeStringRegexp from 'escape-string-regexp';
-import { Linking, UIManager as NotTypedUIManager } from 'react-native';
+import React from 'react';
+import {
+  Linking,
+  UIManager as NotTypedUIManager,
+  View,
+  ActivityIndicator,
+  Text,
+} from 'react-native';
 import {
   WebViewNavigationEvent,
   OnShouldStartLoadWithRequest,
   CustomUIManager,
 } from './WebViewTypes';
+import styles from './WebView.styles';
 
 const UIManager = NotTypedUIManager as CustomUIManager;
 
@@ -66,8 +74,28 @@ const getViewManagerConfig = (
   return UIManager.getViewManagerConfig(viewManagerName);
 };
 
+const defaultRenderLoading = () => (
+  <View style={styles.loadingView}>
+    <ActivityIndicator />
+  </View>
+);
+const defaultRenderError = (
+  errorDomain: string | undefined,
+  errorCode: number,
+  errorDesc: string,
+) => (
+  <View style={styles.errorContainer}>
+    <Text style={styles.errorTextTitle}>Error loading page</Text>
+    <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
+    <Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
+    <Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
+  </View>
+);
+
 export {
   defaultOriginWhitelist,
   createOnShouldStartLoadWithRequest,
   getViewManagerConfig,
+  defaultRenderLoading,
+  defaultRenderError,
 };