rewirte index.android for dynamic auto height & better animation

autoHeightWebView/common.js

@@ -58,25 +58,13 @@ function isChanged(newValue, oldValue) {
   return !Immutable.is(Immutable.fromJS(newValue), Immutable.fromJS(oldValue));
 }
 
-function insertStringAfterAnotherString(raw, searchValue, insertValue) {
-  const position = raw.indexOf(searchValue) + searchValue.length;
-  return [raw.slice(0, position), insertValue, raw.slice(position)].join('');
-}
-
 function getInjectedSource(html, script) {
-  const scriptString = `
-  <script>
-  ${script}
-  </script>
-  `;
-  if (html.startsWith('<html')) {
-    return insertStringAfterAnotherString(html, '>', scriptString);
-  } else {
-    return `
+  return `
     ${html}
-    ${scriptString}
+    <script>
+    ${script}
+    </script>
     `;
-  }
 }
 
 export function getScript(props, getBaseScript, getIframeBaseScript) {
@@ -139,8 +127,8 @@ observer.observe(document, {
 
 export const getCurrentSize = `
 function getSize(container) {
-  var height = container.clientHeight || document.body.offsetHeight;
-  var width = container.clientWidth || document.body.offsetWidth;
+  var height = container.offsetHeight || document.body.offsetHeight;
+  var width = container.offsetWidth || document.body.offsetWidth;
   return {
     height,
     width

autoHeightWebView/index.android.js

@@ -7,12 +7,12 @@ import {
   requireNativeComponent,
   Animated,
   DeviceEventEmitter,
+  Easing,
   StyleSheet,
   Platform,
   UIManager,
   ViewPropTypes,
-  WebView,
-  View
+  WebView
 } from 'react-native';
 
 import PropTypes from 'prop-types';
@@ -59,6 +59,7 @@ export default class AutoHeightWebView extends PureComponent {
     scalesPageToFit: PropTypes.bool,
     // only works on enable animation
     animationDuration: PropTypes.number,
+    animationEasing: PropTypes.func,
     // offset of rn webView margin
     heightOffset: PropTypes.number,
     // baseUrl not work in android 4.3 or below version
@@ -83,23 +84,33 @@ export default class AutoHeightWebView extends PureComponent {
     scalesPageToFit: true,
     enableBaseUrl: false,
     enableAnimation: true,
-    animationDuration: 555,
-    heightOffset: 20
+    animationDuration: 255,
+    heightOffset: 20,
+    animationEasing: Easing.out(Easing.quad)
   };
 
   constructor(props) {
     super(props);
-    const { enableAnimation, style, source, enableBaseUrl } = props;
-    enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
+    const { enableAnimation, style, source, enableBaseUrl, heightOffset } = props;
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
-    this.state = {
+    this.finishInterval = true;
+    const initWidth = getWidth(style);
+    const height = style ? (style.height ? style.height : 0) : 0;
+    let state = {
       isSizeChanged: false,
       isSizeMayChange: false,
-      height: 0,
-      width: getWidth(style),
+      height: height,
+      width: initWidth,
       script: getScript(props, getBaseScript),
       source: enableBaseUrl ? Object.assign({}, source, { baseUrl }) : source
     };
+    if (enableAnimation) {
+      Object.assign(state, {
+        heightValue: new Animated.Value(height + heightOffset),
+        widthValue: new Animated.Value(initWidth)
+      });
+    }
+    this.state = state;
   }
 
   componentDidMount() {
@@ -112,14 +123,13 @@ export default class AutoHeightWebView extends PureComponent {
     const { source, script } = getUpdatedState(props, enableBaseUrl ? baseUrl : null, getBaseScript);
     const height = style ? style.height : null;
     const width = style ? style.width : null;
-    // if (source !== prevSource || script !== prevScript) {
-    //   console.log(1)
-    //   return {
-    //     source,
-    //     script,
-    //     isSizeMayChange: true
-    //   };
-    // }
+    if (source.html !== prevSource.html || source.uri !== prevSource.uri || script !== prevScript) {
+      return {
+        source,
+        script,
+        isSizeMayChange: true
+      };
+    }
     if (isSizeChanged(height, oldHeight, width, oldWidth)) {
       return {
         height,
@@ -131,18 +141,26 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   componentDidUpdate() {
-    const { height, width, isSizeChanged, isSizeMayChange } = this.state;
+    const { height, width, isSizeChanged, isSizeMayChange, heightValue, widthValue } = this.state;
     if (isSizeMayChange) {
       this.startInterval();
       this.setState({ isSizeMayChange: false });
     }
     if (isSizeChanged) {
-      const { enableAnimation, animationDuration, onSizeUpdated } = this.props;
+      const { enableAnimation, animationDuration, animationEasing, onSizeUpdated, heightOffset } = this.props;
       if (enableAnimation) {
-        Animated.timing(this.opacityAnimatedValue, {
-          toValue: 1,
-          duration: animationDuration
-        }).start(() => {
+        Animated.parallel([
+          Animated.timing(heightValue, {
+            toValue: height + heightOffset,
+            easing: animationEasing,
+            duration: animationDuration
+          }),
+          Animated.timing(widthValue, {
+            toValue: width,
+            easing: animationEasing,
+            duration: animationDuration
+          })
+        ]).start(() => {
           handleSizeUpdated(height, width, onSizeUpdated);
         });
       } else {
@@ -178,6 +196,9 @@ export default class AutoHeightWebView extends PureComponent {
   }
 
   startInterval() {
+    if (this.finishInterval === false) {
+      return;
+    }
     this.finishInterval = false;
     this.interval = setInterval(() => {
       if (!this.finishInterval) {
@@ -198,7 +219,6 @@ export default class AutoHeightWebView extends PureComponent {
     const { height, width } = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
     const { height: oldHeight, width: oldWidth } = this.state;
     if (isSizeChanged(height, oldHeight, width, oldWidth)) {
-      this.props.enableAnimation && this.opacityAnimatedValue.setValue(0);
       this.stopInterval();
       this.setState({
         isSizeChanged: true,
@@ -239,16 +259,15 @@ export default class AutoHeightWebView extends PureComponent {
   getWebView = webView => (this.webView = webView);
 
   render() {
-    const { height, width, script, source } = this.state;
-    const { scalesPageToFit, style, scrollEnabled, heightOffset } = this.props;
+    const { height, width, script, source, heightValue, widthValue } = this.state;
+    const { scalesPageToFit, style, scrollEnabled, heightOffset, enableAnimation } = this.props;
     return (
-      <View
+      <Animated.View
         style={[
           styles.container,
           {
-            opacity: 1,
-            height: height ? height + heightOffset : 0,
-            width: width
+            height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
+            width: enableAnimation ? widthValue : width
           },
           style
         ]}
@@ -270,7 +289,7 @@ export default class AutoHeightWebView extends PureComponent {
           // below kitkat
           onChange={this.onMessage}
         />
-      </View>
+      </Animated.View>
     );
   }
 }
@@ -289,11 +308,13 @@ const styles = StyleSheet.create({
 
 const commonScript = `
     ${getCurrentSize}
-    var wrapper = document.createElement('div');
-    wrapper.id = 'wrapper';
+    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
@@ -301,7 +322,6 @@ const getBaseScript = isBelowKitKat
       return `
     ; 
     ${commonScript}
-    var height = 0;
     var width = ${getWidth(style)};
     function updateSize() {
       if(document.body.offsetHeight !== height || document.body.offsetWidth !== width) {
@@ -312,7 +332,6 @@ const getBaseScript = isBelowKitKat
       }
     }
     (function () {
-      document.body.appendChild(wrapper);
       AutoHeightWebView.onMessage = updateSize;
       ${domMutationObserveScript}
     } ());
@@ -322,19 +341,17 @@ const getBaseScript = isBelowKitKat
       return `
     ; 
     ${commonScript}
-    var height = 0;
     var width = ${getWidth(style)};
     function updateSize() {
       if(document.body.offsetHeight !== height || document.body.offsetWidth !== width) {
         var size = getSize(document.body.firstChild); 
         height = size.height;
         width = size.width;
-        window.postMessage(JSON.stringify({ width, height }));
+        window.postMessage(JSON.stringify({ width, height }), '*');
       }
     }
     (function () {
-      document.body.appendChild(wrapper);
-      document.addEventListener('message', updateSize);
+      document.addEventListener("message", updateSize);
       ${domMutationObserveScript}
     } ());
   `;

demo/config.js

@@ -1,24 +1,26 @@
 'use strict';
 
-const autoHeightHtml0 = `<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>`;
+const autoHeightHtml0 = `<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>`;
 
-const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. 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”.`;
+const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. 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".`;
 
 const style0 = `
     p {
-        font-size: 25px !important;
+        padding: 50px;
+        box-sizing: border-box;
     }
 `;
 
 const style1 = `
     p {
         font-size: 12px !important;
+        box-sizing: border-box;
     }
 `;
 
 const inlineBodyStyle = `
     body {
-    display: inline-block 
+        display: inline-block;
     }
 `;
 
@@ -29,9 +31,18 @@ document.head.appendChild(styleElement);
 document.body.style.background = 'cornflowerblue';
 `;
 
-const autoWidthHtml0 = `<p style="display: inline-block;background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">hey</p>`;
+const autoWidthHtml0 = `
+<html>
+<head>
+  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
+</head>
+<p style="display: inline;background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));font-weight: 400;font-style: normal;zoom:1;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">hey</p>
+</html>
+`;
 
-const autoWidthHtml1 = `<p style="display: inline-block;background-color: transparent !important;font-size: 35px;">hey</p>`;
+const autoWidthHtml1 = `
+<p style="display: inline;background-color: transparent !important;">easy</p>
+`;
 
 const autoWidthScript = `
 var styleElement = document.createElement('style');