improved updating size on ios

autoHeightWebView/common.js

@@ -97,26 +97,19 @@ export function isEqual(newProps, oldProps) {
   return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
 }
 
-export function setState(props, getBaseScript, getIframeBaseScript) {
-  const { source, style } = props;
+export function setState(props, baseUrl, getBaseScript, getIframeBaseScript) {
+  const { source } = props;
   const script = getScript(props, getBaseScript, getIframeBaseScript);
-  let state = {
-    height: style && style.height ? style.height : 0,
-    width: getWidth(style)
-  };
+  let state = {};
   if (source.html) {
-    Object.assign(state, {
-      source: Object.assign(
-        {},
-        {
-          html: getInjectedSource(source.html, script),
-          baseUrl: 'web/'
-        }
-      )
-    });
+    let currentSource = { html: getInjectedSource(source.html, script) };
+    baseUrl && Object.assign(currentSource, { baseUrl });
+    Object.assign(state, { source: currentSource });
   } else {
+    let currentSource = Object.assign({}, source);
+    baseUrl && Object.assign(currentSource, { baseUrl });
     Object.assign(state, {
-      source: Object.assign({}, source, { baseUrl: 'web/' }),
+      source: currentSource,
       script
     });
   }
@@ -131,17 +124,8 @@ export function handleSizeUpdated(height, width, onSizeUpdated) {
     });
 }
 
-export function getSize(newHeight, newWidth, height, width, updatingSize, calledOnce) {
-  if (!calledOnce || updatingSize) {
-    return {
-      h: height,
-      w: width
-    };
-  }
-  return {
-    h: height,
-    w: width
-  };
+export function isSizeChanged(height, oldHeight, width, oldWidth) {
+  return (height && height !== oldHeight) || (width && width !== oldWidth);
 }
 
 export const domMutationObserveScript = `
@@ -163,4 +147,3 @@ function getSize(container) {
   };
 }
 `;
-

autoHeightWebView/index.ios.js

@@ -6,7 +6,15 @@ import { Animated, StyleSheet, ViewPropTypes, WebView } from 'react-native';
 
 import PropTypes from 'prop-types';
 
-import { getSize, isEqual, setState, getWidth, handleSizeUpdated, domMutationObserveScript, getCurrentSize } from './common.js';
+import {
+  isEqual,
+  setState,
+  getWidth,
+  isSizeChanged,
+  handleSizeUpdated,
+  domMutationObserveScript,
+  getCurrentSize
+} from './common.js';
 
 import momoize from './momoize';
 
@@ -57,6 +65,7 @@ export default class AutoHeightWebView extends PureComponent {
     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
     };
@@ -64,6 +73,38 @@ export default class AutoHeightWebView extends PureComponent {
 
   getUpdatedState = momoize(setState, isEqual);
 
+  static getDerivedStateFromProps(props, state) {
+    const { height: oldHeight, width: oldWidth } = state;
+    const height = props.style ? props.style.height : null;
+    const width = props.style ? props.style.width : null;
+    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
+      return {
+        height,
+        width,
+        isSizeChanged: true
+      };
+    }
+    return null;
+  }
+
+  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 });
+    }
+  }
+
   handleNavigationStateChange = navState => {
     const { title } = navState;
     if (!title) {
@@ -73,30 +114,13 @@ export default class AutoHeightWebView extends PureComponent {
     const width = Number(widthValue);
     const height = Number(heightValue);
     const { height: oldHeight, width: oldWidth } = this.state;
-    if ((height && height !== oldHeight) || (width && width !== oldWidth)) {
-      const { enableAnimation, animationDuration, onSizeUpdated } = this.props;
-      enableAnimation && this.opacityAnimatedValue.setValue(0);
-      this.updatingSize = true;
-      this.setState(
-        {
-          height,
-          width
-        },
-        () => {
-          if (enableAnimation) {
-            Animated.timing(this.opacityAnimatedValue, {
-              toValue: 1,
-              duration: animationDuration
-            }).start(() => {
-              handleSizeUpdated(height, width, onSizeUpdated);
-              this.updatingSize = false;
-            });
-          } else {
-            handleSizeUpdated(height, width, onSizeUpdated);
-            this.updatingSize = false;
-          }
-        }
-      );
+    if (isSizeChanged(height, oldHeight, width, oldWidth)) {
+      this.props.enableAnimation && this.opacityAnimatedValue.setValue(0);
+      this.setState({
+        isSizeChanged: true,
+        height,
+        width
+      });
     }
   };
 
@@ -119,21 +143,15 @@ export default class AutoHeightWebView extends PureComponent {
       style,
       scrollEnabled
     } = this.props;
-    const { height: newHeight, width: newWidth, source, script } = this.getUpdatedState(
-      this.props,
-      getBaseScript,
-      getIframeBaseScript
-    );
-    const { w, h } = getSize(newHeight, newWidth, height, width, this.updatingSize, this.calledOnce);
-    this.calledOnce = true;
+    const { source, script } = this.getUpdatedState(this.props, 'web/', getBaseScript, getIframeBaseScript);
     return (
       <Animated.View
         style={[
           styles.container,
           {
             opacity: enableAnimation ? this.opacityAnimatedValue : 1,
-            width: w,
-            height: h + heightOffset
+            width,
+            height: height + heightOffset
           },
           style
         ]}
@@ -175,7 +193,6 @@ const commonScript = `
     window.addEventListener('resize', updateSize);
     `;
 
-
 function getBaseScript(style) {
   return `
     ;

demo/App.js

@@ -125,7 +125,7 @@ export default class Explorer extends Component {
           <Text>change style</Text>
         </TouchableOpacity>
         <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
-          <Text>change heightScript</Text>
+          <Text>change script</Text>
         </TouchableOpacity>
       </ScrollView>
     );