split index.android.js into index.android.current.js & index.android.old.js; remove support below kitkat on android; remove native android module; remove native module ref from demo on android

android/build.gradle

@@ -1,32 +0,0 @@
-apply plugin: 'com.android.library'
-
-android {
-    compileSdkVersion 26
-    buildToolsVersion "27.0.3"
-
-    defaultConfig {
-        minSdkVersion 16
-        targetSdkVersion 26
-        versionCode 1
-        versionName "1.0"
-
-        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
-
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    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:26.1.0'
-    compile "com.facebook.react:react-native:+"  // From node_modules
-    testCompile 'junit:junit:4.12'
-}

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +0,0 @@
-#Mon Dec 28 10:00:20 PST 2015
-distributionBase=GRADLE_USER_HOME
-distributionPath=wrapper/dists
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

android/gradlew

@@ -1,160 +0,0 @@
-#!/usr/bin/env bash
-
-##############################################################################
-##
-##  Gradle start up script for UN*X
-##
-##############################################################################
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS=""
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn ( ) {
-    echo "$*"
-}
-
-die ( ) {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-esac
-
-# Attempt to set APP_HOME
-# Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
-done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
-
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
-
-# Determine the Java command to use to start the JVM.
-if [ -n "$JAVA_HOME" ] ; then
-    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
-        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
-    else
-        JAVACMD="$JAVA_HOME/bin/java"
-    fi
-    if [ ! -x "$JAVACMD" ] ; then
-        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-else
-    JAVACMD="java"
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-fi
-
-# Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin, switch paths to Windows format before running java
-if $cygwin ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=$((i+1))
-    done
-    case $i in
-        (0) set -- ;;
-        (1) set -- "$args0" ;;
-        (2) set -- "$args0" "$args1" ;;
-        (3) set -- "$args0" "$args1" "$args2" ;;
-        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
-    esac
-fi
-
-# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
-function splitJvmOpts() {
-    JVM_OPTS=("$@")
-}
-eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
-JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
-
-exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"

android/gradlew.bat

@@ -1,90 +0,0 @@
-@if "%DEBUG%" == "" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS=
-
-set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto init
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:init
-@rem Get command-line arguments, handling Windowz variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-if "%@eval[2+2]" == "4" goto 4NT_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-goto execute
-
-:4NT_args
-@rem Get arguments from the 4NT Shell from JP Software
-set CMD_LINE_ARGS=%$
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
-
-:end
-@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega

android/proguard-rules.pro

@@ -1,17 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /Users/iou90/Library/Android/sdk/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}

android/src/androidTest/java/com/dscj/autoheightwebview/ExampleInstrumentedTest.java

@@ -1,26 +0,0 @@
-package com.iou90.autoheightwebview;
-
-import android.content.Context;
-import android.support.test.InstrumentationRegistry;
-import android.support.test.runner.AndroidJUnit4;
-
-import org.junit.Test;
-import org.junit.runner.RunWith;
-
-import static org.junit.Assert.*;
-
-/**
- * Instrumentation test, which will execute on an Android device.
- *
- * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
- */
-@RunWith(AndroidJUnit4.class)
-public class ExampleInstrumentedTest {
-    @Test
-    public void useAppContext() throws Exception {
-        // Context of the app under test.
-        Context appContext = InstrumentationRegistry.getTargetContext();
-
-        assertEquals("com.iou90.autoheightwebview.test", appContext.getPackageName());
-    }
-}

android/src/main/AndroidManifest.xml

@@ -1,10 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.iou90.autoheightwebview">
-
-    <application android:label="@string/app_name"
-                 android:supportsRtl="true"
-    >
-
-    </application>
-
-</manifest>

android/src/main/java/com/iou90/autoheightwebview/AutoHeightWebViewManager.java

@@ -1,64 +0,0 @@
-package com.iou90.autoheightwebview;
-
-import android.webkit.WebView;
-
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.views.webview.ReactWebViewManager;
-
-import java.util.Map;
-import javax.annotation.Nullable;
-
-public class AutoHeightWebViewManager extends ReactWebViewManager {
-    private static final String REACT_CLASS = "RCTAutoHeightWebView";
-
-    public static final int COMMAND_SEND_TO_WEBVIEW = 101;
-
-    @Override
-    public String getName() {
-        return REACT_CLASS;
-    }
-
-    @Override
-    public
-    @Nullable
-    Map<String, Integer> getCommandsMap() {
-        Map<String, Integer> commandsMap = super.getCommandsMap();
-        commandsMap.put("sendToWebView", COMMAND_SEND_TO_WEBVIEW);
-
-        return commandsMap;
-    }
-
-    @Override
-    protected WebView createViewInstance(ThemedReactContext reactContext) {
-        WebView webview = super.createViewInstance(reactContext);
-        webview.setVerticalScrollBarEnabled(false);
-        webview.setHorizontalScrollBarEnabled(false);
-        webview.addJavascriptInterface(new JavascriptBridge(webview), "AutoHeightWebView");
-
-        return webview;
-    }
-
-    @Override
-    public void receiveCommand(WebView webView, int commandId, @Nullable ReadableArray args) {
-        super.receiveCommand(webView, commandId, args);
-
-        switch (commandId) {
-            case COMMAND_SEND_TO_WEBVIEW:
-                sendToWebView(webView, args.getString(0));
-                break;
-            default:
-                break;
-        }
-    }
-
-    private void sendToWebView(WebView webView, String message) {
-        String script = "AutoHeightWebView.onMessage('" + message + "');";
-        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
-            webView.evaluateJavascript(script, null);
-        } else {
-            webView.loadUrl("javascript:" + script);
-        }
-    }
-}

android/src/main/java/com/iou90/autoheightwebview/AutoHeightWebViewPackage.java

@@ -1,25 +0,0 @@
-package com.iou90.autoheightwebview;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.JavaScriptModule;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.List;
-
-public class AutoHeightWebViewPackage implements ReactPackage {
-    @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
-        return new ArrayList<>();
-    }
-
-    @Override
-    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
-        return Arrays.<ViewManager>asList(
-                new AutoHeightWebViewManager()
-        );
-    }
-}

android/src/main/java/com/iou90/autoheightwebview/JavascriptBridge.java

@@ -1,29 +0,0 @@
-package com.iou90.autoheightwebview;
-
-import android.webkit.JavascriptInterface;
-import android.webkit.WebView;
-
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.modules.core.DeviceEventManagerModule;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
-
-class JavascriptBridge {
-    private WebView webView;
-
-    public JavascriptBridge(WebView webView) {
-        this.webView = webView;
-    }
-
-    @JavascriptInterface
-    public void send(String message) {
-        WritableMap event = Arguments.createMap();
-        event.putString("message", message);
-        ReactContext reactContext = (ReactContext) this.webView.getContext();
-        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
-                this.webView.getId(),
-                "topChange",
-                event);
-    }
-}

android/src/main/res/values/strings.xml

@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">RCTAutoHeightWebView</string>
-</resources>

android/src/test/java/com/dscj/autoheightwebview/ExampleUnitTest.java

@@ -1,17 +0,0 @@
-package com.iou90.autoheightwebview;
-
-import org.junit.Test;
-
-import static org.junit.Assert.*;
-
-/**
- * Example local unit test, which will execute on the development machine (host).
- *
- * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
- */
-public class ExampleUnitTest {
-    @Test
-    public void addition_isCorrect() throws Exception {
-        assertEquals(4, 2 + 2);
-    }
-}

autoHeightWebView/index.android.current.js

@@ -0,0 +1,271 @@
+'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,364 +1,13 @@
 'use strict';
 
-import React, { PureComponent } from 'react';
+import { Platform } from 'react-native';
 
-import {
-  findNodeHandle,
-  requireNativeComponent,
-  Animated,
-  DeviceEventEmitter,
-  Easing,
-  StyleSheet,
-  Platform,
-  UIManager,
-  ViewPropTypes,
-  WebView
-} from 'react-native';
+import AutoHeightWebViewOld from './index.android.old.js';
 
-import PropTypes from 'prop-types';
+import AutoHeightWebView from './index.android.current.js';
 
-import {
-  isEqual,
-  setState,
-  isSizeChanged,
-  handleSizeUpdated,
-  getWidth,
-  getScript,
-  domMutationObserveScript,
-  getCurrentSize,
-  getRenderSize
-} from './common.js';
+const isBelowMarshmallow = Platform.Version < 23;
 
-const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
-  nativeOnly: {
-    nativeOnly: {
-      onLoadingStart: true,
-      onLoadingError: true,
-      onLoadingFinish: true,
-      messagingEnabled: PropTypes.bool
-    }
-  }
-});
+const webview = isBelowMarshmallow ? AutoHeightWebViewOld : AutoHeightWebView;
 
-import momoize from './momoize';
-
-const getUpdatedState = momoize(setState, isEqual);
-
-export default class AutoHeightWebView extends PureComponent {
-  static propTypes = {
-    onNavigationStateChange: PropTypes.func,
-    onMessage: PropTypes.func,
-    scrollEnabled: PropTypes.bool,
-    source: WebView.propTypes.source,
-    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,
-    // only on android
-    animationEasing: PropTypes.func,
-    // offset of rn webView margin
-    heightOffset: PropTypes.number,
-    style: ViewPropTypes.style,
-    //  rn WebView callback
-    onError: PropTypes.func,
-    onLoad: PropTypes.func,
-    onLoadStart: PropTypes.func,
-    onLoadEnd: PropTypes.func,
-    // 'file:///android_asset/web/' by default, and baseUrl not work in android 4.3 or below version
-    baseUrl: PropTypes.string,
-    // add baseUrl/files... to android/app/src/assets/
-    files: PropTypes.arrayOf(
-      PropTypes.shape({
-        href: PropTypes.string,
-        type: PropTypes.string,
-        rel: PropTypes.string
-      })
-    )
-  };
-
-  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;
-    isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
-    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();
-    isBelowKitKat && DeviceEventEmitter.removeListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
-  }
-
-  // below kitkat
-  listenWebViewBridgeMessage = body => this.onMessage(body.message);
-
-  // below kitkat
-  sendToWebView(message) {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this.webView),
-      UIManager.RCTAutoHeightWebView.Commands.sendToWebView,
-      [String(message)]
-    );
-  }
-
-  postMessage(data) {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this.webView),
-      UIManager.RCTAutoHeightWebView.Commands.postMessage,
-      [String(data)]
-    );
-  }
-
-  startInterval() {
-    if (this.finishInterval === false) {
-      return;
-    }
-    this.finishInterval = false;
-    this.setState({
-      interval: setInterval(() => {
-        if (!this.finishInterval) {
-          isBelowKitKat ? this.sendToWebView('getBodyHeight') : this.postMessage('getBodyHeight');
-        }
-      }, 205)
-    });
-  }
-
-  stopInterval() {
-    this.finishInterval = true;
-    clearInterval(this.state.interval);
-  }
-
-  onMessage = e => {
-    if (!e.nativeEvent) {
-      return;
-    }
-    let data = {};
-    // Sometimes the message is invalid JSON, so we ignore that case
-    try {
-      data = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.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(e);
-  };
-
-  onLoadingStart = event => {
-    const { onLoadStart, onNavigationStateChange } = this.props;
-    onLoadStart && onLoadStart(event);
-    onNavigationStateChange && onNavigationStateChange(event.nativeEvent);
-  };
-
-  onLoadingError = event => {
-    const { onError, onLoadEnd } = this.props;
-    onError && onError(event);
-    onLoadEnd && onLoadEnd(event);
-    console.warn('Encountered an error loading page', event.nativeEvent);
-  };
-
-  onLoadingFinish = event => {
-    const { onLoad, onLoadEnd, onNavigationStateChange } = this.props;
-    onLoad && onLoad(event);
-    onLoadEnd && onLoadEnd(event);
-    onNavigationStateChange && onNavigationStateChange(event.nativeEvent);
-  };
-
-  stopLoading() {
-    UIManager.dispatchViewManagerCommand(
-      findNodeHandle(this.webView),
-      UIManager.RCTAutoHeightWebView.Commands.stopLoading,
-      null
-    );
-  }
-
-  getWebView = webView => (this.webView = webView);
-
-  render() {
-    const { height, width, script, source, heightValue, widthValue } = this.state;
-    const { scalesPageToFit, style, scrollEnabled, heightOffset, enableAnimation } = this.props;
-    return (
-      <Animated.View
-        style={[
-          styles.container,
-          getRenderSize(enableAnimation, height, width, heightOffset, heightValue, widthValue),
-          style
-        ]}
-      >
-        <RCTAutoHeightWebView
-          onLoadingStart={this.onLoadingStart}
-          onLoadingFinish={this.onLoadingFinish}
-          onLoadingError={this.onLoadingError}
-          originWhitelist={['.*']}
-          ref={this.getWebView}
-          style={styles.webView}
-          javaScriptEnabled={true}
-          injectedJavaScript={script}
-          scalesPageToFit={scalesPageToFit}
-          scrollEnabled={!!scrollEnabled}
-          source={source}
-          onMessage={this.onMessage}
-          messagingEnabled={true}
-          // below kitkat
-          onChange={this.onMessage}
-        />
-      </Animated.View>
-    );
-  }
-}
-
-const isBelowKitKat = Platform.Version < 19;
-
-const styles = StyleSheet.create({
-  container: {
-    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 = isBelowKitKat
-  ? function(style) {
-      return `
-    ; 
-    ${commonScript}
-    var width = ${getWidth(style)};
-    function updateSize() {
-      var size = getSize(document.body.firstChild); 
-      height = size.height;
-      width = size.width;
-      AutoHeightWebView.send(JSON.stringify({ width, height }));
-    }
-    (function () {
-      AutoHeightWebView.onMessage = updateSize;
-      ${domMutationObserveScript}
-    } ());
-  `;
-    }
-  : 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, height }), '*');
-    }
-    (function () {
-      document.addEventListener("message", updateSize);
-      ${domMutationObserveScript}
-    } ());
-  `;
-    };
+export default webview;

autoHeightWebView/index.android.old.js

@@ -0,0 +1,194 @@
+'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}
+} ());
+`;

demo/android/app/build.gradle

@@ -137,7 +137,6 @@ android {
 }
 
 dependencies {
-    compile project(':react-native-autoheight-webview')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     compile "com.facebook.react:react-native:+"  // From node_modules

demo/android/app/src/main/java/com/demo/MainApplication.java

@@ -3,7 +3,6 @@ package com.demo;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
-import com.iou90.autoheightwebview.AutoHeightWebViewPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -23,8 +22,7 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage(),
-            new AutoHeightWebViewPackage()
+          new MainReactPackage()
       );
     }
 

demo/android/settings.gradle

@@ -1,5 +1,3 @@
 rootProject.name = 'demo'
-include ':react-native-autoheight-webview'
-project(':react-native-autoheight-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-autoheight-webview/android')
 
 include ':app'