feat(android): fix overflow issues and match iOS default renders (rea…

…ct-native-webview#472)

fixes react-native-webview#466 react-native-oh-library#194

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

* Use babel preset typescript through react-native instead of ts-jest

* Update yarn.lock

* Update README.md

.eslintignore

@@ -1 +1,2 @@
-lib/
+lib/
+babel.config.js

README.md

@@ -1,9 +1,11 @@
 # React Native WebView - a Modern, Cross-Platform WebView for React Native
-[![star this repo](http://githubbadges.com/star.svg?user=react-native-community&repo=react-native-webview&style=flat)](https://github.com/react-native-community/react-native-webview) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) [![Known Vulnerabilities](https://snyk.io/test/github/react-native-community/react-native-webview/badge.svg?style=flat-square)](https://snyk.io/test/github/react-native-community/react-native-webview) 
+
+[![star this repo](http://githubbadges.com/star.svg?user=react-native-community&repo=react-native-webview&style=flat)](https://github.com/react-native-community/react-native-webview) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) [![Known Vulnerabilities](https://snyk.io/test/github/react-native-community/react-native-webview/badge.svg?style=flat-square)](https://snyk.io/test/github/react-native-community/react-native-webview)
 
 **React Native WebView** is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be [removed from core](https://github.com/react-native-community/discussions-and-proposals/pull/3)).
 
 ## Core Maintainers - Sponsoring companies
+
 _This project is maintained for free by these people using both their free time and their company work time._
 
 - [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://brigad.co/about)
@@ -43,17 +45,15 @@ This project follows [semantic versioning](https://semver.org/). We do not hesit
 Import the `WebView` component from `react-native-webview` and use it like so:
 
 ```jsx
-import React, { Component } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { WebView } from "react-native-webview";
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
 
 // ...
 class MyWebComponent extends Component {
   render() {
     return (
-      <WebView
-        source={{ uri: "https://facebook.github.io/react-native/" }}
-      />
+      <WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
     );
   }
 }
@@ -64,7 +64,6 @@ For more, read the [API Reference](./docs/Reference.md) and [Guide](./docs/Guide
 ## Common issues
 
 - If you're getting `Invariant Violation: Native component for "RNCWKWebView does not exist"` it likely means you forgot to run `react-native link` or there was some error with the linking process
-- There's a [problem](https://stackoverflow.com/questions/52872045/rendering-webview-on-android-device-overlaps-previous-siblings-from-same-parent) on some Android devices where the webview could overlap previous siblings from same parent. To fix this, wrap the WebView in a View with style `overflow: hidden`.
 
 ## Contributing
 

babel.config.js

@@ -1,12 +1,10 @@
-module.exports = function (api) {
-    api && api.cache(false);
-    return {
-      env: {
-        test: {
-          presets: [
-            "module:metro-react-native-babel-preset"
-          ],
-        }
-      }
-    };
-  }
+module.exports = function(api) {
+  api && api.cache(false);
+  return {
+    env: {
+      test: {
+        presets: ['module:metro-react-native-babel-preset'],
+      },
+    },
+  };
+};

jest.config.js

@@ -164,12 +164,6 @@ module.exports = {
   // timers: "real",
 
   // A map from regular expressions to paths to transformers
-  transform: {
-    '^.+\\.ts(x)?$': 'ts-jest',
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$':
-      '<rootDir>/node_modules/react-native/jest/assetFileTransformer.js',
-  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [

package.json

@@ -50,7 +50,6 @@
     "react": "16.8.3",
     "react-native": "0.59.1",
     "semantic-release": "15.10.3",
-    "ts-jest": "24.0.0",
     "typescript": "3.3.3333"
   },
   "repository": {

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,23 +223,26 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
       nativeConfig = {},
       ...otherProps
     } = this.props;
+
     let otherView = null;
 
     if (this.state.viewState === 'LOADING') {
       otherView = (renderLoading || defaultRenderLoading)();
     } 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,
 };