WIP

android/build.gradle

@@ -1,12 +1,12 @@
 apply plugin: 'com.android.library'
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 26
+    buildToolsVersion "27.0.3"
 
     defaultConfig {
         minSdkVersion 16
-        targetSdkVersion 22
+        targetSdkVersion 26
         versionCode 1
         versionName "1.0"
 
@@ -26,7 +26,7 @@ dependencies {
     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
         exclude group: 'com.android.support', module: 'support-annotations'
     })
-    compile 'com.android.support:appcompat-v7:23.0.1'
+    compile 'com.android.support:appcompat-v7:26.1.0'
     compile "com.facebook.react:react-native:+"  // From node_modules
     testCompile 'junit:junit:4.12'
 }

autoHeightWebView/common.js

@@ -23,10 +23,6 @@ function appendFilesToHead(files, script) {
 
 const screenWidth = Dimensions.get('window').width;
 
-function getWidth(style) {
-  return style && style.width ? style.width : screenWidth;
-}
-
 const bodyStyle = `
 body {
   margin: 0;
@@ -62,20 +58,6 @@ function isChanged(newValue, oldValue) {
   return !Immutable.is(Immutable.fromJS(newValue), Immutable.fromJS(oldValue));
 }
 
-function getScript(props, getBaseScript, getIframeBaseScript) {
-  const { hasIframe, files, customStyle, customScript, style } = getReloadRelatedData(props);
-  const baseScript = getBaseScript(style);
-  let script = hasIframe ? baseScript : getIframeBaseScript(style);
-  script = files ? appendFilesToHead(files, baseScript) : baseScript;
-  script = appendStylesToHead(customStyle, script);
-  customScript && (script = customScript + script);
-  return script;
-}
-
-function isEqual(newProps, oldProps) {
-  return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
-}
-
 function insertStringAfterAnotherString(raw, searchValue, insertValue) {
   const position = raw.indexOf(searchValue) + searchValue.length;
   return [raw.slice(0, position), insertValue, raw.slice(position)].join('');
@@ -97,7 +79,25 @@ function getInjectedSource(html, script) {
   }
 }
 
-function setState(props, getBaseScript, getIframeBaseScript) {
+export function getScript(props, getBaseScript, getIframeBaseScript) {
+  const { hasIframe, files, customStyle, customScript, style } = getReloadRelatedData(props);
+  const baseScript = getBaseScript(style);
+  let script = hasIframe ? getIframeBaseScript(style) : baseScript;
+  script = files ? appendFilesToHead(files, baseScript) : baseScript;
+  script = appendStylesToHead(customStyle, script);
+  customScript && (script = customScript + script);
+  return script;
+}
+
+export function getWidth(style) {
+  return style && style.width ? style.width : screenWidth;
+}
+
+export function isEqual(newProps, oldProps) {
+  return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
+}
+
+export function setState(props, getBaseScript, getIframeBaseScript) {
   const { source, style } = props;
   const script = getScript(props, getBaseScript, getIframeBaseScript);
   let state = {
@@ -123,7 +123,7 @@ function setState(props, getBaseScript, getIframeBaseScript) {
   return state;
 }
 
-function handleSizeUpdated(height, width, onSizeUpdated) {
+export function handleSizeUpdated(height, width, onSizeUpdated) {
   onSizeUpdated &&
     onSizeUpdated({
       height,
@@ -131,7 +131,7 @@ function handleSizeUpdated(height, width, onSizeUpdated) {
     });
 }
 
-function getSize(newHeight, newWidth, height, width, updatingSize, calledOnce) {
+export function getSize(newHeight, newWidth, height, width, updatingSize, calledOnce) {
   if (!calledOnce || updatingSize) {
     return {
       h: height,
@@ -144,13 +144,11 @@ function getSize(newHeight, newWidth, height, width, updatingSize, calledOnce) {
   };
 }
 
-const domMutationObserveScript = `
+export const domMutationObserveScript = `
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 var observer = new MutationObserver(updateSize);
 observer.observe(document, {
     subtree: true,
     attributes: true
 });
-`;
-
-export { isEqual, setState, getWidth, handleSizeUpdated, domMutationObserveScript, getSize };
+`;

autoHeightWebView/index.android.js

@@ -7,7 +7,6 @@ import {
   requireNativeComponent,
   Animated,
   DeviceEventEmitter,
-  Dimensions,
   StyleSheet,
   Platform,
   UIManager,
@@ -19,7 +18,7 @@ import PropTypes from 'prop-types';
 
 import Immutable from 'immutable';
 
-import { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript } from './common.js';
+import { handleSizeUpdated, getWidth, getScript, domMutationObserveScript } from './common.js';
 
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
   nativeOnly: {
@@ -32,25 +31,22 @@ const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', Auto
   }
 });
 
-const screenWidth = Dimensions.get('window').width;
-
 export default class AutoHeightWebView extends PureComponent {
   static propTypes = {
+    onMessage: PropTypes.func,
+    scrollEnabled: PropTypes.bool,
     source: WebView.propTypes.source,
-      onHeightUpdated: PropTypes.func,
-      onWidthUpdated: PropTypes.func,
-      onHeightWidthUpdated: PropTypes.func,
-      shouldResizeWidth: PropTypes.bool,
     customScript: PropTypes.string,
     customStyle: PropTypes.string,
     enableAnimation: PropTypes.bool,
+    // either height or width updated will trigger this
+    onSizeUpdated: PropTypes.func,
     // if set to false may cause some layout issues (width of container will be than width of screen)
     scalesPageToFit: PropTypes.bool,
     // only works on enable animation
     animationDuration: PropTypes.number,
     // offset of rn webView margin
-      heightOffset: PropTypes.number,
-      widthOffset: PropTypes.number,
+    heightOffset: PropTypes.number,
     // baseUrl not work in android 4.3 or below version
     enableBaseUrl: PropTypes.bool,
     style: ViewPropTypes.style,
@@ -74,22 +70,21 @@ export default class AutoHeightWebView extends PureComponent {
     enableBaseUrl: false,
     enableAnimation: true,
     animationDuration: 555,
-      heightOffset: 20,
-      widthOffset: 20,
-      shouldResizeWidth: false
+    heightOffset: 20
   };
 
   constructor(props) {
     super(props);
-    props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
+    const { enableAnimation, style } = props;
+    enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
+    this.webView = React.createRef();
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
     this.state = {
       isChangingSource: false,
       height: 0,
-        heightOffset: 0,
-        width: screenWidth,
-        widthOffset: 0,
-      script: getScript(props, baseScript)
+      heightOffset: 0,
+      width: getWidth(style),
+      script: getScript(props, getBaseScript)
     };
   }
 
@@ -97,27 +92,25 @@ export default class AutoHeightWebView extends PureComponent {
     this.startInterval();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_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,
-                  width: 0,
-                  widthOffset: 0,
-              },
-              () => {
-                  this.startInterval();
-                  this.setState({ isChangingSource: false });
-              }
-          );
-      }
-    this.setState({ script: getScript(nextProps, baseScript) });
+    if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
+      return;
+    } else {
+      this.setState(
+        {
+          isChangingSource: true,
+          height: 0,
+          heightOffset: 0,
+          width: 0
+        },
+        () => {
+          this.startInterval();
+          this.setState({ isChangingSource: false });
+        }
+      );
+    }
+    this.setState({ script: getScript(nextProps, getBaseScript) });
   }
 
   componentWillUnmount() {
@@ -160,29 +153,34 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   onMessage = e => {
-      const { height, width } = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
-      if (height && height !== this.state.height && width && width !== this.state.width) {
-          const { enableAnimation, animationDuration, heightOffset, widthOffset } = this.props;
-          enableAnimation && this.opacityAnimatedValue.setValue(0);
-          this.stopInterval();
-          
-          this.setState(
-              {
-                  heightOffset,
-                  height,
-                  widthOffset,
-                  width
-              },
-              () => {
-                  enableAnimation
-                      ? Animated.timing(this.opacityAnimatedValue, {
-                          toValue: 1,
-                          duration: animationDuration
-                      }).start(() => onHeightWidthUpdated(height, width, this.props))
-                      : onHeightWidthUpdated(height, width, this.props);
-              }
-          );
-      }
+    const { height, width } = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
+    const { height: oldHeight, width: oldWidth } = this.state;
+    if ((height && height !== oldHeight) || (width && width !== oldWidth)) {
+      const { enableAnimation, animationDuration, heightOffset, onSizeUpdated } = this.props;
+      enableAnimation && this.opacityAnimatedValue.setValue(0);
+      this.stopInterval();
+      this.setState(
+        {
+          heightOffset,
+          height,
+          width
+        },
+        () => {
+          if (enableAnimation) {
+            Animated.timing(this.opacityAnimatedValue, {
+              toValue: 1,
+              duration: animationDuration
+            }).start(() => {
+              handleSizeUpdated(height, width, onSizeUpdated);
+            });
+          } else {
+            handleSizeUpdated(height, width, onSizeUpdated);
+          }
+        }
+      );
+    }
+    const { onMessage } = this.props;
+    onMessage && onMessage(e);
   };
 
   onLoadingStart = event => {
@@ -203,8 +201,6 @@ export default class AutoHeightWebView extends PureComponent {
     onLoadEnd && onLoadEnd(event);
   };
 
-  getWebView = webView => (this.webView = webView);
-
   stopLoading() {
     UIManager.dispatchViewManagerCommand(
       findNodeHandle(this.webView),
@@ -214,23 +210,22 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   render() {
-      const { height, width, script, isChangingSource, heightOffset, widthOffset } = this.state;
-    const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
+    const { height, width, script, isChangingSource, heightOffset } = this.state;
+    const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl, scrollEnabled } = 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,
-              width: width + widthOffset
+            height: height + heightOffset,
+            width: width
           },
           style
         ]}
@@ -240,11 +235,13 @@ export default class AutoHeightWebView extends PureComponent {
             onLoadingStart={this.onLoadingStart}
             onLoadingFinish={this.onLoadingFinish}
             onLoadingError={this.onLoadingError}
-            ref={this.getWebView}
+            originWhitelist={['*']}
+            ref={this.webView}
             style={styles.webView}
             javaScriptEnabled={true}
             injectedJavaScript={script + customScript}
             scalesPageToFit={scalesPageToFit}
+            scrollEnabled={!!scrollEnabled}
             source={webViewSource}
             onMessage={this.onMessage}
             messagingEnabled={true}
@@ -261,7 +258,6 @@ const isBelowKitKat = Platform.Version < 19;
 
 const styles = StyleSheet.create({
   container: {
-    //width: screenWidth,
     backgroundColor: 'transparent'
   },
   webView: {
@@ -270,41 +266,42 @@ const styles = StyleSheet.create({
   }
 });
 
-const baseScript = isBelowKitKat
-  ? `
-    ; (function () {
-        var wrapper = document.createElement('div');
-        wrapper.id = 'wrapper';
-        while (document.body.firstChild instanceof Node) {
-            wrapper.appendChild(document.body.firstChild);
-        }
-        document.body.appendChild(wrapper);
-
-        AutoHeightWebView.onMessage = function (message) {
-            var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
-            var width = Math.round(rect.width);
-            var height = Math.round(rect.height);
-            AutoHeightWebView.send(JSON.stringify({ width, height }));
-        };
-        ${domMutationObserveScript}
-    } ());
-    `
-  : `
-    ; (function () {
-        var wrapper = document.createElement('div');
-        wrapper.id = 'wrapper';
-        while (document.body.firstChild instanceof Node) {
-            wrapper.appendChild(document.body.firstChild);
-        }
-        document.body.appendChild(wrapper);
-
-        document.addEventListener('message', function (e) {
-            var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
-            var width = Math.round(rect.width);
-            var height = Math.round(rect.height);
-            window.postMessage(JSON.stringify({ width, height }));
-        });
-        ${domMutationObserveScript}
-    } ());
-    `;
-
+const getBaseScript = isBelowKitKat
+  ? function() {
+      return `
+  ; (function () {
+    var wrapper = document.createElement('div');
+    wrapper.id = 'wrapper';
+    while (document.body.firstChild instanceof Node) {
+        wrapper.appendChild(document.body.firstChild);
+    }
+    document.body.appendChild(wrapper);
+    AutoHeightWebView.onMessage = function (message) {
+        var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
+        var width = Math.round(rect.width);
+        var height = Math.round(rect.height);
+        AutoHeightWebView.send(JSON.stringify({ width, height }));
+    };
+    ${domMutationObserveScript}
+} ());
+  `;
+    }
+  : function() {
+      return `
+  ; (function () {
+    var wrapper = document.createElement('div');
+    wrapper.id = 'wrapper';
+    while (document.body.firstChild instanceof Node) {
+        wrapper.appendChild(document.body.firstChild);
+    }
+    document.body.appendChild(wrapper);
+    document.addEventListener('message', function (e) {
+        var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
+        var width = Math.round(rect.width);
+        var height = Math.round(rect.height);
+        window.postMessage(JSON.stringify({ width, height }));
+    });
+    ${domMutationObserveScript}
+} ());
+  `;
+    };

demo/android/app/build.gradle

@@ -94,13 +94,13 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 26
+    buildToolsVersion "27.0.3"
 
     defaultConfig {
         applicationId "com.demo"
         minSdkVersion 16
-        targetSdkVersion 22
+        targetSdkVersion 26
         versionCode 1
         versionName "1.0"
         ndk {
@@ -139,7 +139,7 @@ android {
 dependencies {
     compile project(':react-native-autoheight-webview')
     compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:23.0.1"
+    compile "com.android.support:appcompat-v7:26.1.0"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
 

demo/android/build.gradle

@@ -3,6 +3,10 @@
 buildscript {
     repositories {
         jcenter()
+        maven {
+            url 'https://maven.google.com/'
+            name 'Google'
+        }
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:2.2.3'
@@ -20,5 +24,9 @@ allprojects {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
+        maven {
+            url 'https://maven.google.com/'
+            name 'Google'
+        }
     }
-}
+}