rewrite with using react-native-webview

README.md

@@ -1,43 +1,19 @@
 # react-native-autoheight-webview
 An auto height webview for React Native, or even auto width for inline html.
 
-The Current version do not support Android API version 18 and below and the native module has been removed.
+## Versioning
 
-Cause of javascript execution in webview is not working for Android API version 21 and below (https://github.com/facebook/react-native/issues/14754#issuecomment-361841219), auto width for inline html will not work on Android with API version 22 and below.
+`npm install react-native-autoheight-webview --save` (rn >= 0.57)
 
-Cause of changes to lifecycle methods in React 16.3.0 (https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html), please install react-native-autoheight-webview 0.6.1 for the project with 0.47 <= rn < 0.55
-
-Cause of removing unused createJSModules calls in React Naitve 0.47 (https://github.com/facebook/react-native/releases/tag/v0.47.2), please install react-native-autoheight-webview 0.3.1 for the project with 0.44 <= rn < 0.47.
-
-Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://github.com/facebook/react-native/releases/tag/v0.44.3) and PropTypes has been moved to a separate package in React 16 (https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes), please install react-native-autoheight-webview 0.2.3 for the project with rn < 0.44.
-
-`npm install react-native-autoheight-webview --save` (rn >= 0.56)
-
-`npm install react-native-autoheight-webview@0.6.1 --save` (0.47 <= rn < 0.56)
-
-`npm install react-native-autoheight-webview@0.3.1 --save` (0.44 <= rn < 0.47)
-
-`npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
-
-## Android
-`react-native link react-native-autoheight-webview` (version <= 0.10.6)
-
-`react-native link react-native-webview` (version >= 1.0.0)
-
-`import AutoHeightWebView from 'react-native-autoheight-webview';`
-
-## iOS
-`react-native link react-native-webview` (version >= 1.0.0)
-
-`import AutoHeightWebView from 'react-native-autoheight-webview';`
-
-## showcase
-![react-native-autoheight-webview iOS](https://media.giphy.com/media/eehXhFjneVqEUCzYip/giphy.gif)&nbsp;
-![react-native-autoheight-webview Android](https://media.giphy.com/media/1yTcqipIfHbgNNfcEU/giphy.gif)
+Read [Readme.old](./Readme.old.md) for earlier version guide.
 
 ## usage
 
+`react-native link react-native-webview`
+
 ```javascript
+import AutoHeightWebView from 'react-native-autoheight-webview'
+
 <AutoHeightWebView
     // default width is the width of screen
     // if there are some text selection issues on iOS, the width should be reduced more than 15 and the marginTop should be added more than 35
@@ -52,15 +28,7 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
         font-size: 16px;
       }
     `}
-    // animation enabled by default
-    enableAnimation={false},
-    // only works on enable animation
-    animationDuration={255},
-    // offset of rn webview margin 
-    heightOffset={5}
-    onMessage={e => console.log(e)},
     // either height or width updated will trigger this
-    // no support auto width and height will triggered by source changing only on android 5.1 or below version
     onSizeUpdated={({size => console.log(size.height)})},
     // 'file:///android_asset/web/' by default on android, 
     // web/' by default on iOS
@@ -76,38 +44,18 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
         type: 'text/css',
         rel: 'stylesheet'
     }]}
-    // if set to true may cause some layout issues (smaller font size) on iOS
-    // if set to false may cause some layout issues (width of container will be than width of screen) on android
-    scalesPageToFit={Platform.OS === 'Android' ? true : false}
     // or uri
     source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
-    // rn WebView callbacks
-    onError={() => console.log('on error')}
-    onLoad={() => console.log('on load')}
-    onLoadStart={() => console.log('on load start')}
-    onLoadEnd={() => console.log('on load end')}
-    onNavigationStateChange={() => console.log('navigation state changed')}
-    // set scrollEnabled to true may cause some layout issues
-    // only on iOS
-    scrollEnabled={true},
-    // if page contains iframe on iOS, use a specific script for it
-    // only on iOS
-    hasIframe={true}
-    // only on iOS
-    onShouldStartLoadWithRequest={result => {
-      console.log(result)
-      return true;
-    }}
-    // only on Android for animating size (>= api 23)
-    animationEasing={Easing.ease()}
     /* 
-    other rn WebView props:
-    renderError, mediaPlaybackRequiresUserAction, originWhitelist
-    decelerationRate, allowsInlineMediaPlayback, bounces, dataDetectorTypes on iOS
-    domStorageEnabled, thirdPartyCookiesEnabled, userAgent, geolocationEnabled, allowUniversalAccessFromFileURLs, mixedContentMode on Android
+    other react-native-webview props
     */
   />
 ```
 
+
+## showcase
+![react-native-autoheight-webview iOS](https://media.giphy.com/media/tocJYDUGCgwac0kkyB/giphy.gif)&nbsp;
+![react-native-autoheight-webview Android](https://media.giphy.com/media/9JyX1wZshYIxuPklHK/giphy.gif)
+
 ## demo
-You may have to use yarn to install the dependencies of the demo and remove demo folder from demo/node_modules/react-native-autoheight-webview, cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105).
+You may have to use yarn to install the dependencies of the demo and remove demo/node_modules/react-native-autoheight-webview/demo manually, cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105).

Readme.old.md

@@ -0,0 +1,109 @@
+# react-native-autoheight-webview
+An auto height webview for React Native, or even auto width for inline html.
+
+The Current version do not support Android API version 18 and below and the native module has been removed.
+
+Cause of javascript execution in webview is not working for Android API version 21 and below (https://github.com/facebook/react-native/issues/14754#issuecomment-361841219), auto width for inline html will not work on Android with API version 22 and below.
+
+Cause of changes to lifecycle methods in React 16.3.0 (https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html), please install react-native-autoheight-webview 0.6.1 for the project with 0.47 <= rn < 0.55
+
+Cause of removing unused createJSModules calls in React Naitve 0.47 (https://github.com/facebook/react-native/releases/tag/v0.47.2), please install react-native-autoheight-webview 0.3.1 for the project with 0.44 <= rn < 0.47.
+
+Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://github.com/facebook/react-native/releases/tag/v0.44.3) and PropTypes has been moved to a separate package in React 16 (https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes), please install react-native-autoheight-webview 0.2.3 for the project with rn < 0.44.
+
+`npm install react-native-autoheight-webview --save` (rn >= 0.56)
+
+`npm install react-native-autoheight-webview@0.6.1 --save` (0.47 <= rn < 0.56)
+
+`npm install react-native-autoheight-webview@0.3.1 --save` (0.44 <= rn < 0.47)
+
+`npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
+
+## Android
+`react-native link react-native-autoheight-webview` (version 0.10.6 and below)
+
+`import AutoHeightWebView from 'react-native-autoheight-webview';`
+
+## iOS
+`import AutoHeightWebView from 'react-native-autoheight-webview';`
+
+## showcase
+![react-native-autoheight-webview iOS](https://media.giphy.com/media/eehXhFjneVqEUCzYip/giphy.gif)&nbsp;
+![react-native-autoheight-webview Android](https://media.giphy.com/media/1yTcqipIfHbgNNfcEU/giphy.gif)
+
+## usage
+
+```javascript
+<AutoHeightWebView
+    // default width is the width of screen
+    // if there are some text selection issues on iOS, the width should be reduced more than 15 and the marginTop should be added more than 35
+    style={{ width: Dimensions.get('window').width - 15, marginTop: 35 }}
+    customScript={`document.body.style.background = 'lightyellow';`}
+    // add custom CSS to the page's <head>
+    customStyle={`
+      * {
+        font-family: 'Times New Roman';
+      }
+      p {
+        font-size: 16px;
+      }
+    `}
+    // animation enabled by default
+    enableAnimation={false},
+    // only works on enable animation
+    animationDuration={255},
+    // offset of rn webview margin 
+    heightOffset={5}
+    onMessage={e => console.log(e)},
+    // either height or width updated will trigger this
+    // no support auto width and height will triggered by source changing only on android 5.1 or below version
+    onSizeUpdated={({size => console.log(size.height)})},
+    // 'file:///android_asset/web/' by default on android, 
+    // web/' by default on iOS
+    baseUrl: 'webAssets/',
+    /* 
+    use local or remote files
+    to add local files: 
+    add baseUrl/files... to android/app/src/assets/ on android
+    add baseUrl/files... to project root on iOS
+    */
+    files={[{
+        href: 'cssfileaddress',
+        type: 'text/css',
+        rel: 'stylesheet'
+    }]}
+    // if set to true may cause some layout issues (smaller font size) on iOS
+    // if set to false may cause some layout issues (width of container will be than width of screen) on android
+    scalesPageToFit={Platform.OS === 'Android' ? true : false}
+    // or uri
+    source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
+    // rn WebView callbacks
+    onError={() => console.log('on error')}
+    onLoad={() => console.log('on load')}
+    onLoadStart={() => console.log('on load start')}
+    onLoadEnd={() => console.log('on load end')}
+    onNavigationStateChange={() => console.log('navigation state changed')}
+    // set scrollEnabled to true may cause some layout issues
+    // only on iOS
+    scrollEnabled={true},
+    // if page contains iframe on iOS, use a specific script for it
+    // only on iOS
+    hasIframe={true}
+    // only on iOS
+    onShouldStartLoadWithRequest={result => {
+      console.log(result)
+      return true;
+    }}
+    // only on Android for animating size (>= api 23)
+    animationEasing={Easing.ease()}
+    /* 
+    other rn WebView props:
+    renderError, mediaPlaybackRequiresUserAction, originWhitelist
+    decelerationRate, allowsInlineMediaPlayback, bounces, dataDetectorTypes on iOS
+    domStorageEnabled, thirdPartyCookiesEnabled, userAgent, geolocationEnabled, allowUniversalAccessFromFileURLs, mixedContentMode on Android
+    */
+  />
+```
+
+## demo
+You may have to copy autoHeightWebView, node_modules folders and index.js to 'demo/node_modules/react-native-autoheight-webview/', cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105).

autoHeightWebView/index.android.current.js

@@ -1,271 +0,0 @@
-'use strict';
-
-import React, { PureComponent } from 'react';
-
-import { Animated, Easing, StyleSheet, WebView, Dimensions } from 'react-native';
-
-import PropTypes from 'prop-types';
-
-import { androidPropTypes } from 'react-native-autoheight-webview/autoHeightWebView/propTypes';
-
-import {
-  isEqual,
-  setState,
-  isSizeChanged,
-  handleSizeUpdated,
-  getWidth,
-  getScript,
-  domMutationObserveScript,
-  getCurrentSize
-} from 'react-native-autoheight-webview/autoHeightWebView/common';
-
-import momoize from 'react-native-autoheight-webview/autoHeightWebView/momoize';
-
-const getUpdatedState = momoize(setState, isEqual);
-
-function getRenderSize(enableAnimation, height, width, heightOffset, heightValue, widthValue) {
-  return {
-    height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
-    width: enableAnimation ? widthValue : width
-  };
-}
-
-export default class AutoHeightWebView extends PureComponent {
-  static propTypes = {
-    ...androidPropTypes,
-    animationEasing: PropTypes.func
-  };
-
-  static defaultProps = {
-    baseUrl: 'file:///android_asset/web/',
-    scalesPageToFit: true,
-    enableAnimation: true,
-    animationDuration: 255,
-    heightOffset: 20,
-    animationEasing: Easing.out(Easing.quad)
-  };
-
-  constructor(props) {
-    super(props);
-    const { baseUrl, enableAnimation, style, source, heightOffset } = props;
-    this.webView = React.createRef();
-    this.finishInterval = true;
-    const initWidth = getWidth(style);
-    const initHeight = style ? (style.height ? style.height : 0) : 0;
-    let state = {
-      isSizeChanged: false,
-      isSizeMayChange: false,
-      height: initHeight,
-      width: initWidth,
-      script: getScript(props, getBaseScript),
-      source: Object.assign({}, source, { baseUrl })
-    };
-    if (enableAnimation) {
-      Object.assign(state, {
-        heightValue: new Animated.Value(initHeight ? initHeight + heightOffset : 0),
-        widthValue: new Animated.Value(initWidth)
-      });
-    }
-    this.state = state;
-  }
-
-  componentDidMount() {
-    this.startInterval();
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const { height: oldHeight, width: oldWidth, source: prevSource, script: prevScript } = state;
-    const { style } = props;
-    const { source, script } = getUpdatedState(props, getBaseScript);
-    const height = style ? style.height : null;
-    const width = style ? style.width : null;
-    if (source.html !== prevSource.html || source.uri !== prevSource.uri || script !== prevScript) {
-      return {
-        source,
-        script,
-        isSizeMayChange: true
-      };
-    }
-    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
-      return {
-        height: height || oldHeight,
-        width: width || oldWidth,
-        isSizeChanged: true
-      };
-    }
-    return null;
-  }
-
-  componentDidUpdate() {
-    const { height, width, isSizeChanged, isSizeMayChange, heightValue, widthValue } = this.state;
-    if (isSizeMayChange) {
-      this.startInterval();
-      this.setState({ isSizeMayChange: false });
-    }
-    if (isSizeChanged) {
-      const { enableAnimation, animationDuration, animationEasing, onSizeUpdated, heightOffset } = this.props;
-      if (enableAnimation) {
-        Animated.parallel([
-          Animated.timing(heightValue, {
-            toValue: height ? height + heightOffset : 0,
-            easing: animationEasing,
-            duration: animationDuration
-          }),
-          Animated.timing(widthValue, {
-            toValue: width,
-            easing: animationEasing,
-            duration: animationDuration
-          })
-        ]).start(() => {
-          handleSizeUpdated(height, width, onSizeUpdated);
-        });
-      } else {
-        handleSizeUpdated(height, width, onSizeUpdated);
-      }
-      this.setState({ isSizeChanged: false });
-    }
-  }
-
-  componentWillUnmount() {
-    this.stopInterval();
-  }
-
-  startInterval() {
-    if (this.finishInterval === false) {
-      return;
-    }
-    this.finishInterval = false;
-    this.setState({
-      interval: setInterval(() => !this.finishInterval && this.webView.current.postMessage('getBodyHeight'), 205)
-    });
-  }
-
-  stopInterval() {
-    this.finishInterval = true;
-    clearInterval(this.state.interval);
-  }
-
-  onMessage = event => {
-    if (!event.nativeEvent) {
-      return;
-    }
-    let data = {};
-    // Sometimes the message is invalid JSON, so we ignore that case
-    try {
-      data = JSON.parse(event.nativeEvent.data);
-    } catch (error) {
-      console.error(error);
-      return;
-    }
-    const { height, width } = data;
-    const { height: oldHeight, width: oldWidth } = this.state;
-    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
-      this.stopInterval();
-      this.setState({
-        isSizeChanged: true,
-        height,
-        width
-      });
-    }
-    const { onMessage } = this.props;
-    onMessage && onMessage(event);
-  };
-
-  render() {
-    const { height, width, script, source, heightValue, widthValue } = this.state;
-    const {
-      domStorageEnabled,
-      thirdPartyCookiesEnabled,
-      userAgent,
-      geolocationEnabled,
-      allowUniversalAccessFromFileURLs,
-      mixedContentMode,
-      onNavigationStateChange,
-      renderError,
-      originWhitelist,
-      mediaPlaybackRequiresUserAction,
-      scalesPageToFit,
-      style,
-      heightOffset,
-      enableAnimation,
-      onError,
-      onLoad,
-      onLoadStart,
-      onLoadEnd
-    } = this.props;
-    return (
-      <Animated.View
-        style={[
-          styles.container,
-          getRenderSize(enableAnimation, height, width, heightOffset, heightValue, widthValue),
-          style
-        ]}
-      >
-        <WebView
-          onNavigationStateChange={onNavigationStateChange}
-          domStorageEnabled={domStorageEnabled}
-          thirdPartyCookiesEnabled={thirdPartyCookiesEnabled}
-          userAgent={userAgent}
-          geolocationEnabled={geolocationEnabled}
-          allowUniversalAccessFromFileURLs={allowUniversalAccessFromFileURLs}
-          mixedContentMode={mixedContentMode}
-          renderError={renderError}
-          mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
-          originWhitelist={originWhitelist || ['*']}
-          ref={this.webView}
-          onMessage={this.onMessage}
-          onError={onError}
-          onLoad={onLoad}
-          onLoadStart={onLoadStart}
-          onLoadEnd={onLoadEnd}
-          style={styles.webView}
-          scalesPageToFit={scalesPageToFit}
-          javaScriptEnabled={true}
-          injectedJavaScript={script}
-          source={source}
-        />
-      </Animated.View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: 50,
-    width: Dimensions.get('window').width,
-    backgroundColor: 'transparent'
-  },
-  webView: {
-    flex: 1,
-    backgroundColor: 'transparent'
-  }
-});
-
-const commonScript = `
-    ${getCurrentSize}
-    var wrapper = document.createElement("div");
-    wrapper.id = "wrapper";
-    while (document.body.firstChild instanceof Node) {
-        wrapper.appendChild(document.body.firstChild);
-    }
-    document.body.appendChild(wrapper);
-    var height = 0;
-`;
-
-const getBaseScript = function(style) {
-  return `
-  ; 
-  ${commonScript}
-  var width = ${getWidth(style)};
-  function updateSize() {
-    var size = getSize(document.body.firstChild); 
-    height = size.height;
-    width = size.width;
-    window.postMessage(JSON.stringify({ width: width, height: height }), '*');
-  }
-  (function () {
-    document.addEventListener("message", updateSize);
-    ${domMutationObserveScript}
-  } ());
-`;
-};

autoHeightWebView/index.android.js

@@ -1,13 +0,0 @@
-'use strict';
-
-import { Platform } from 'react-native';
-
-import AutoHeightWebViewOld from './index.android.old.js';
-
-import AutoHeightWebView from './index.android.current.js';
-
-const isBelowMarshmallow = Platform.Version < 23;
-
-const webview = isBelowMarshmallow ? AutoHeightWebViewOld : AutoHeightWebView;
-
-export default webview;

autoHeightWebView/index.android.old.js

@@ -1,194 +0,0 @@
-'use strict';
-
-import React, { PureComponent } from 'react';
-
-import { Animated, Dimensions, StyleSheet, WebView } from 'react-native';
-
-import { androidPropTypes } from './propTypes.js';
-
-import Immutable from 'immutable';
-
-import { handleSizeUpdated, domMutationObserveScript } from './common.js';
-
-export default class AutoHeightWebView extends PureComponent {
-  static propTypes = androidPropTypes;
-
-  static defaultProps = {
-    scalesPageToFit: true,
-    enableBaseUrl: false,
-    enableAnimation: true,
-    animationDuration: 555,
-    heightOffset: 20
-  };
-
-  constructor(props) {
-    super(props);
-    props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
-    this.state = {
-      isChangingSource: false,
-      height: 0,
-      heightOffset: 0,
-      script: baseScript
-    };
-  }
-
-  componentDidMount() {
-    this.startInterval();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // injectedJavaScript only works when webView reload (source changed)
-    if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
-      return;
-    } else {
-      this.setState(
-        {
-          isChangingSource: true,
-          height: 0,
-          heightOffset: 0
-        },
-        () => {
-          this.startInterval();
-          this.setState({ isChangingSource: false });
-        }
-      );
-    }
-    this.setState({ script: baseScript });
-  }
-
-  componentWillUnmount() {
-    this.stopInterval();
-  }
-
-  startInterval() {
-    this.finishInterval = false;
-    this.interval = setInterval(() => !this.finishInterval && this.webView.postMessage('getBodyHeight'), 205);
-  }
-
-  stopInterval() {
-    this.finishInterval = true;
-    clearInterval(this.interval);
-  }
-
-  onMessage = event => {
-    const height = parseInt(event.nativeEvent.data);
-    if (height && height !== this.state.height) {
-      const { enableAnimation, animationDuration, heightOffset, onSizeUpdated, style } = this.props;
-      enableAnimation && this.opacityAnimatedValue.setValue(0);
-      this.stopInterval();
-      this.setState(
-        {
-          heightOffset,
-          height
-        },
-        () => {
-          const currentWidth = Object.assign(styles.container, style).width;
-          enableAnimation
-            ? Animated.timing(this.opacityAnimatedValue, {
-                toValue: 1,
-                duration: animationDuration
-              }).start(() => handleSizeUpdated(height, currentWidth, onSizeUpdated))
-            : handleSizeUpdated(height, currentWidth, onSizeUpdated);
-        }
-      );
-    }
-    const { onMessage } = this.props;
-    onMessage && onMessage(event);
-  };
-
-  getWebView = webView => (this.webView = webView);
-
-  render() {
-    const { height, script, isChangingSource, heightOffset } = this.state;
-    const {
-      thirdPartyCookiesEnabled,
-      domStorageEnabled,
-      userAgent,
-      geolocationEnabled,
-      allowUniversalAccessFromFileURLs,
-      mixedContentMode,
-      onNavigationStateChange,
-      renderError,
-      originWhitelist,
-      mediaPlaybackRequiresUserAction,
-      scalesPageToFit,
-      enableAnimation,
-      source,
-      customScript,
-      style,
-      enableBaseUrl,
-      onError,
-      onLoad,
-      onLoadStart,
-      onLoadEnd
-    } = this.props;
-    let webViewSource = source;
-    if (enableBaseUrl) {
-      webViewSource = Object.assign({}, source, {
-        baseUrl: 'file:///android_asset/web/'
-      });
-    }
-    return (
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-            height: height + heightOffset
-          },
-          style
-        ]}
-      >
-        {isChangingSource ? null : (
-          <WebView
-            onNavigationStateChange={onNavigationStateChange}
-            domStorageEnabled={domStorageEnabled}
-            thirdPartyCookiesEnabled={thirdPartyCookiesEnabled}
-            userAgent={userAgent}
-            geolocationEnabled={geolocationEnabled}
-            allowUniversalAccessFromFileURLs={allowUniversalAccessFromFileURLs}
-            mixedContentMode={mixedContentMode}
-            renderError={renderError}
-            mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
-            originWhitelist={originWhitelist}
-            ref={this.getWebView}
-            onMessage={this.onMessage}
-            onError={onError}
-            onLoad={onLoad}
-            onLoadStart={onLoadStart}
-            onLoadEnd={onLoadEnd}
-            style={styles.webView}
-            scalesPageToFit={scalesPageToFit}
-            javaScriptEnabled={true}
-            injectedJavaScript={script + customScript}
-            source={webViewSource}
-            messagingEnabled={true}
-          />
-        )}
-      </Animated.View>
-    );
-  }
-}
-
-const screenWidth = Dimensions.get('window').width;
-
-const styles = StyleSheet.create({
-  container: {
-    height: 50,
-    width: screenWidth,
-    backgroundColor: 'transparent'
-  },
-  webView: {
-    flex: 1,
-    backgroundColor: 'transparent'
-  }
-});
-
-const baseScript = `
-; (function () {
-    document.addEventListener('message', function (e) {
-        window.postMessage(String(document.body.offsetHeight));
-    });
-    ${domMutationObserveScript}
-} ());
-`;

autoHeightWebView/index.ios.js

@@ -1,224 +0,0 @@
-'use strict';
-
-import React, { PureComponent } from 'react';
-
-import { Animated, StyleSheet } from 'react-native';
-
-import PropTypes from 'prop-types';
-
-import { commonPropTypes } from './propTypes.js';
-
-import { WebView } from 'react-native-webview';
-
-import {
-  isEqual,
-  setState,
-  getWidth,
-  isSizeChanged,
-  handleSizeUpdated,
-  domMutationObserveScript,
-  getStateFromProps,
-  updateSizeWithMessage
-} from './common.js';
-
-import momoize from './momoize';
-
-export default class AutoHeightWebView extends PureComponent {
-  static propTypes = {
-    ...commonPropTypes,
-    hasIframe: PropTypes.bool,
-    // only works on enable animation
-    animationDuration: PropTypes.number,
-    // offset of rn webview margin
-    heightOffset: PropTypes.number,
-    // webview props
-    scrollEnabled: PropTypes.bool,
-    onShouldStartLoadWithRequest: PropTypes.func,
-    decelerationRate: PropTypes.number,
-    allowsInlineMediaPlayback: PropTypes.bool,
-    bounces: PropTypes.bool,
-    dataDetectorTypes: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
-  };
-
-  static defaultProps = {
-    baseUrl: 'web/',
-    enableAnimation: true,
-    animationDuration: 255,
-    heightOffset: 12
-  };
-
-  constructor(props) {
-    super(props);
-    const { enableAnimation, style } = props;
-    enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
-    this.webView = React.createRef();
-    this.state = {
-      isSizeChanged: false,
-      width: getWidth(style),
-      height: style && style.height ? style.height : 0
-    };
-  }
-
-  getUpdatedState = momoize(setState, isEqual);
-
-  static getDerivedStateFromProps(props, state) {
-    return getStateFromProps(props, state);
-  }
-
-  componentDidUpdate() {
-    const { height, width, isSizeChanged } = this.state;
-    if (isSizeChanged) {
-      const { enableAnimation, animationDuration, onSizeUpdated } = this.props;
-      if (enableAnimation) {
-        Animated.timing(this.opacityAnimatedValue, {
-          toValue: 1,
-          duration: animationDuration
-        }).start(() => {
-          handleSizeUpdated(height, width, onSizeUpdated);
-        });
-      } else {
-        handleSizeUpdated(height, width, onSizeUpdated);
-      }
-      this.setState({ isSizeChanged: false });
-    }
-  }
-
-  onMessage = event => {
-    if (!event.nativeEvent) {
-      return;
-    }
-    let data = {};
-    // Sometimes the message is invalid JSON, so we ignore that case
-    try {
-      data = JSON.parse(event.nativeEvent.data);
-    } catch (error) {
-      console.error(error);
-      return;
-    }
-    const { height, width } = data;
-    const { height: oldHeight, width: oldWidth } = this.state;
-    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
-      this.props.enableAnimation && this.opacityAnimatedValue.setValue(0);
-      this.setState({
-        isSizeChanged: true,
-        height,
-        width
-      });
-    }
-    const { onMessage } = this.props;
-    onMessage && onMessage(event);
-  };
-
-  stopLoading() {
-    this.webView.current.stopLoading();
-  }
-
-  render() {
-    const { height, width } = this.state;
-    const {
-      renderError,
-      originWhitelist,
-      mediaPlaybackRequiresUserAction,
-      bounces,
-      decelerationRate,
-      allowsInlineMediaPlayback,
-      dataDetectorTypes,
-      onNavigationStateChange,
-      onError,
-      onLoad,
-      onLoadStart,
-      onLoadEnd,
-      onShouldStartLoadWithRequest,
-      enableAnimation,
-      heightOffset,
-      style,
-      scrollEnabled
-    } = this.props;
-    const { source, script } = this.getUpdatedState(this.props, getBaseScript, getIframeBaseScript);
-    return (
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-            width,
-            height: height + heightOffset
-          },
-          style
-        ]}
-      >
-        <WebView
-          renderError={renderError}
-          mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
-          bounces={bounces}
-          decelerationRate={decelerationRate}
-          allowsInlineMediaPlayback={allowsInlineMediaPlayback}
-          dataDetectorTypes={dataDetectorTypes}
-          originWhitelist={originWhitelist || ['*']}
-          ref={this.webView}
-          onMessage={this.onMessage}
-          onError={onError}
-          onLoad={onLoad}
-          onLoadStart={onLoadStart}
-          onLoadEnd={onLoadEnd}
-          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-          style={styles.webView}
-          scrollEnabled={!!scrollEnabled}
-          injectedJavaScript={script}
-          source={source}
-          onNavigationStateChange={onNavigationStateChange}
-        />
-      </Animated.View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent'
-  },
-  webView: {
-    backgroundColor: 'transparent',
-    flex: 1
-  }
-});
-
-// add viewport setting to meta for WKWebView
-const commonScript = `
-var meta = document.createElement('meta'); 
-meta.setAttribute('name', 'viewport'); 
-meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
-updateSize();
-window.addEventListener('load', updateSize);
-window.addEventListener('resize', updateSize);
-`;
-
-function getBaseScript(style) {
-  return `
-  ;
-  (function () {
-    if (!document.getElementById("rnahw-wrapper")) {
-      var wrapper = document.createElement('div');
-      wrapper.id = 'rnahw-wrapper';
-      wrapper.appendChild(document.body.firstChild);
-      document.body.appendChild(wrapper);
-    }
-    var width = ${getWidth(style)};
-    ${updateSizeWithMessage('wrapper')}
-    ${commonScript}
-    ${domMutationObserveScript}
-  } ());
-  `;
-}
-
-function getIframeBaseScript(style) {
-  return `
-  ;
-  (function () {
-    var width = ${getWidth(style)};
-    ${updateSizeWithMessage('document.body.firstChild')}
-    ${commonScript}
-    ${domMutationObserveScript}
-  } ());
-  `;
-}

autoHeightWebView/index.js

@@ -0,0 +1,136 @@
+'use strict';
+
+import React, { PureComponent } from 'react';
+
+import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
+
+import PropTypes from 'prop-types';
+
+import { WebView } from 'react-native-webview';
+
+import {
+  isEqual,
+  setState,
+  getWidth,
+  isSizeChanged,
+  handleSizeUpdated,
+  getStateFromProps,
+  getBaseScript
+} from './utils';
+
+import momoize from './momoize';
+
+export default class AutoHeightWebView extends PureComponent {
+  static propTypes = {
+    onSizeUpdated: PropTypes.func,
+    // 'web/' by default on iOS
+    // 'file:///android_asset/web/' by default on Android
+    baseUrl: PropTypes.string,
+    // add baseUrl/files... to android/app/src/assets/ on android
+    // add baseUrl/files... to project root on iOS
+    files: PropTypes.arrayOf(
+      PropTypes.shape({
+        href: PropTypes.string,
+        type: PropTypes.string,
+        rel: PropTypes.string
+      })
+    ),
+    style: ViewPropTypes.style,
+    customScript: PropTypes.string,
+    customStyle: PropTypes.string,
+    // webview props
+    originWhitelist: PropTypes.arrayOf(PropTypes.string),
+    onMessage: PropTypes.func
+  };
+
+  static defaultProps = {
+    baseUrl: Platform.OS === 'ios' ? 'web/' : 'file:///android_asset/web/'
+  };
+
+  constructor(props) {
+    super(props);
+    const { style } = props;
+    this.webView = React.createRef();
+    const width = getWidth(style);
+    const height = style && style.height ? style.height : 1;
+    this.size = {
+      oldWidth: width,
+      oldHeight: height
+    };
+    this.state = {
+      width,
+      height
+    };
+  }
+
+  getUpdatedState = momoize(setState, isEqual);
+
+  static getDerivedStateFromProps(props, state) {
+    return getStateFromProps(props, state);
+  }
+
+  onMessage = event => {
+    if (!event.nativeEvent) {
+      return;
+    }
+    let data = {};
+    // Sometimes the message is invalid JSON, so we ignore that case
+    try {
+      data = JSON.parse(event.nativeEvent.data);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+    const { height, width } = data;
+    const { oldHeight, oldWidth } = this.size;
+    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
+      this.size = {
+        oldHeight: height,
+        oldWidth: width
+      };
+      this.setState(
+        {
+          height,
+          width
+        },
+        () => handleSizeUpdated(height, width, this.props.onSizeUpdated)
+      );
+    }
+    const { onMessage } = this.props;
+    onMessage && onMessage(event);
+  };
+
+  stopLoading() {
+    this.webView.current.stopLoading();
+  }
+
+  render() {
+    const { height, width } = this.state;
+    const { style, originWhitelist } = this.props;
+    const { source, script } = this.getUpdatedState(this.props, getBaseScript);
+    return (
+      <WebView
+        {...this.props}
+        originWhitelist={originWhitelist || ['*']}
+        ref={this.webView}
+        onMessage={this.onMessage}
+        style={[
+          styles.webView,
+          {
+            width,
+            height
+          },
+          style
+        ]}
+        injectedJavaScript={script}
+        source={source}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  webView: {
+    backgroundColor: 'transparent'
+  }
+});

autoHeightWebView/propTypes.js

@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { ViewPropTypes, WebView } from 'react-native';
-
-export const commonPropTypes = {
-  style: ViewPropTypes.style,
-  customScript: PropTypes.string,
-  customStyle: PropTypes.string,
-  enableAnimation: PropTypes.bool,
-  // only works on enable animation
-  animationDuration: PropTypes.number,
-  // offset of rn webView margin
-  heightOffset: PropTypes.number,
-  // either height or width updated will trigger this
-  // no support auto width and height will triggered by source changing only on android 5.1 or below version
-  onSizeUpdated: PropTypes.func,
-  // 'file:///android_asset/web/' by default on android, 
-  // web/' by default on iOS
-  baseUrl: PropTypes.string,
-  // add baseUrl/files... to android/app/src/assets/ on android
-  // add baseUrl/files... to project root on iOS
-  files: PropTypes.arrayOf(
-    PropTypes.shape({
-      href: PropTypes.string,
-      type: PropTypes.string,
-      rel: PropTypes.string
-    })
-  ),
-  // if set to true may cause some layout issues (smaller font size) on iOS
-  // if set to false may cause some layout issues (width of container will be than width of screen) on android
-  scalesPageToFit: PropTypes.bool,
-  // other rn webview props
-  source: WebView.propTypes.source,
-  originWhitelist: PropTypes.arrayOf(PropTypes.string),
-  mediaPlaybackRequiresUserAction: PropTypes.bool,
-  renderError: PropTypes.func,
-  onError: PropTypes.func,
-  onMessage: PropTypes.func,
-  onNavigationStateChange: PropTypes.func,
-  onLoad: PropTypes.func,
-  onLoadStart: PropTypes.func,
-  onLoadEnd: PropTypes.func
-};
-
-export const androidPropTypes = {
-  ...commonPropTypes,
-  domStorageEnabled: PropTypes.bool,
-  thirdPartyCookiesEnabled: PropTypes.bool,
-  userAgent: PropTypes.string,
-  geolocationEnabled: PropTypes.string,
-  allowUniversalAccessFromFileURLs: PropTypes.bool,
-  mixedContentMode: PropTypes.oneOf(['never', 'always', 'compatibility'])
-};

autoHeightWebView/common.js → autoHeightWebView/utils.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 
 import Immutable from 'immutable';
 
@@ -40,10 +40,9 @@ function appendStylesToHead(styles, script) {
 }
 
 function getReloadRelatedData(props) {
-  const { hasIframe, files, customStyle, customScript, style, source } = props;
+  const { files, customStyle, customScript, style, source } = props;
   return {
     source,
-    hasIframe,
     files,
     customStyle,
     customScript,
@@ -64,9 +63,9 @@ function getInjectedSource(html, script) {
     `;
 }
 
-export function getScript(props, getBaseScript) {
+function getScript(props, getScript) {
   const { files, customStyle, customScript, style } = getReloadRelatedData(props);
-  let script = getBaseScript(style);
+  let script = getScript(style);
   script = files && files.length > 0 ? appendFilesToHead(files, script) : script;
   script = appendStylesToHead(customStyle, script);
   customScript && (script = customScript + script);
@@ -81,9 +80,9 @@ export function isEqual(newProps, oldProps) {
   return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
 }
 
-export function setState(props, getBaseScript, getIframeBaseScript) {
+export function setState(props, getBaseScript) {
   const { source, baseUrl } = props;
-  const script = getScript(props, getBaseScript, getIframeBaseScript);
+  const script = getScript(props, getBaseScript);
   let state = {};
   if (source.html) {
     let currentSource = { html: getInjectedSource(source.html, script) };
@@ -109,8 +108,8 @@ export function handleSizeUpdated(height, width, onSizeUpdated) {
 }
 
 export function isSizeChanged(height, oldHeight, width, oldWidth) {
-  if (height == null || width == null) {
-    return false;
+  if (!height || !width) {
+    return;
   }
   return height !== oldHeight || width !== oldWidth;
 }
@@ -128,14 +127,15 @@ export function updateSizeWithMessage(element) {
   return `
   var updateSizeInterval = null;
   var height = 0;
-  function updateSize() {
+  function updateSize(event) {
     if (!window.hasOwnProperty('ReactNativeWebView') || !window.ReactNativeWebView.hasOwnProperty('postMessage')) {
       !updateSizeInterval && (updateSizeInterval = setInterval(updateSize, 200));
       return;
     }
-    height = ${element}.offsetHeight || window.innerHeight,
+    clearInterval(updateSizeInterval)
+    height = ${element}.offsetHeight || window.innerHeight;
     width = ${element}.offsetWidth || window.innerWidth;
-    window.ReactNativeWebView.postMessage(JSON.stringify({ width: width, height: height }));
+    window.ReactNativeWebView.postMessage(JSON.stringify({ width: width, height: height, event: event }));
   }
   `;
 }
@@ -153,3 +153,31 @@ export function getStateFromProps(props, state) {
   }
   return null;
 }
+
+// add viewport setting to meta for WKWebView
+const makeScalePageToFit = `
+var meta = document.createElement('meta'); 
+meta.setAttribute('name', 'viewport'); 
+meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
+`;
+
+export function getBaseScript(style) {
+  return `
+  ;
+  if (!document.getElementById("rnahw-wrapper")) {
+    var wrapper = document.createElement('div');
+    wrapper.id = 'rnahw-wrapper';
+    while (document.body.firstChild instanceof Node) {
+      wrapper.appendChild(document.body.firstChild);
+    }
+    document.body.appendChild(wrapper);
+  }
+  var width = ${getWidth(style)};
+  ${updateSizeWithMessage('wrapper')}
+  window.addEventListener('load', updateSize);
+  window.addEventListener('resize', updateSize);
+  ${domMutationObserveScript}
+  ${Platform.OS === 'ios' ? makeScalePageToFit : ''}
+  updateSize();
+  `;
+}

index.js

@@ -1,3 +1,3 @@
-var ReactNative = require('react-native')
-module.exports = ReactNative.NativeModules.AutoHeightWebView
+import AutoHeightWebView from './autoHeightWebView/AutoHeightWebView';
 
+export default AutoHeightWebView;

package-lock.json

@@ -221,7 +221,7 @@
     },
     "asap": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
     "ast-types-flow": {
@@ -428,7 +428,7 @@
     },
     "core-js": {
       "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/core-js/-/core-js-1.2.7.tgz",
       "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
     },
     "core-util-is": {
@@ -510,7 +510,7 @@
     },
     "encoding": {
       "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
       "requires": {
         "iconv-lite": "~0.4.13"
@@ -750,7 +750,7 @@
     },
     "fbjs": {
       "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/fbjs/-/fbjs-0.8.17.tgz",
       "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
       "requires": {
         "core-js": "^1.0.0",
@@ -1024,7 +1024,7 @@
     },
     "is-stream": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-symbol": {
@@ -1050,7 +1050,7 @@
     },
     "isomorphic-fetch": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
       "requires": {
         "node-fetch": "^1.0.1",
@@ -1183,8 +1183,8 @@
     },
     "node-fetch": {
       "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha1-mA9vcthSEaU0fGsrwYxbhMPrR+8=",
       "requires": {
         "encoding": "^0.1.11",
         "is-stream": "^1.0.1"
@@ -1316,17 +1316,18 @@
     },
     "promise": {
       "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
       "requires": {
         "asap": "~2.0.3"
       }
     },
     "prop-types": {
-      "version": "15.7.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.1.tgz",
-      "integrity": "sha512-f8Lku2z9kERjOCcnDOPm68EBJAO2K00Q5mSgPAUE/gJuBgsYLbVy6owSrtcHj90zt8PvW+z0qaIIgsIhHOa1Qw==",
+      "version": "15.7.2",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha1-UsQedbjIfnK52TYOAga5ncv/psU=",
       "requires": {
+        "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.8.1"
       }
@@ -1338,14 +1339,14 @@
       "dev": true
     },
     "react-is": {
-      "version": "16.8.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.1.tgz",
-      "integrity": "sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA=="
+      "version": "16.8.2",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/react-is/-/react-is-16.8.2.tgz",
+      "integrity": "sha1-CYkdMkytHLDB8tkfcKcaS+403w8="
     },
     "react-native-webview": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-5.0.7.tgz",
-      "integrity": "sha512-jzYrpxPdHGXc9KW0J6Ec4zOXeDFy8BZQS+nUjCqs/cPSPkQO2H/4e6IXz9Y1DTC4l08H2RQLeWPo9nml69MXmA==",
+      "version": "5.2.1",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/react-native-webview/-/react-native-webview-5.2.1.tgz",
+      "integrity": "sha1-ij8u4USIrT0FjxXHBU+1L6Rxleo=",
       "requires": {
         "escape-string-regexp": "^1.0.5",
         "fbjs": "^0.8.17"
@@ -1459,7 +1460,7 @@
     },
     "setimmediate": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/setimmediate/-/setimmediate-1.0.5.tgz",
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "shebang-command": {
@@ -1625,8 +1626,8 @@
     },
     "ua-parser-js": {
       "version": "0.7.19",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
-      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha1-lBUb5MCn+x0AGvcCL9rKRkJlnks="
     },
     "util-deprecate": {
       "version": "1.0.2",
@@ -1636,8 +1637,8 @@
     },
     "whatwg-fetch": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+      "resolved": "https://nexus.bybutter.com/repository/npm-group/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha1-/IBORYzEYACbGiuWa8iBfSV4rvs="
     },
     "which": {
       "version": "1.3.0",

package.json

@@ -5,7 +5,6 @@
   "main": "autoHeightWebView",
   "files": [
     "index.js",
-    "android",
     "autoHeightWebView"
   ],
   "scripts": {
@@ -33,8 +32,8 @@
   },
   "dependencies": {
     "immutable": "^3.8.2",
-    "prop-types": "^15.7.1",
-    "react-native-webview": "^5.0.7"
+    "prop-types": "^15.7.2",
+    "react-native-webview": "^5.2.1"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.6",