add a feature when changing the customStyle or customScript, auto changing the height of webview on iOS

README.md

@@ -22,7 +22,9 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
 
 ```javascript
 <AutoHeightWebView
-    onHeightUpdated={height => console.log(height)},
+    scrollEnabled: PropTypes.bool,
+    // either height or width updated will trigger this
+    onSizeUpdated: PropTypes.func,
     // if page contains iframe on iOS, use a specific script for it
     hasIframe={true}
     /*

autoHeightWebView/common.js

@@ -2,6 +2,8 @@
 
 import { Dimensions } from 'react-native';
 
+import Immutable from 'immutable';
+
 function appendFilesToHead(files, script) {
   if (!files) {
     return script;
@@ -33,27 +35,46 @@ body {
 `;
 
 function appendStylesToHead(styles, script) {
-  const currentStyles = bodyStyle + styles;
+  const currentStyles = styles ? bodyStyle + styles : bodyStyle;
   // Escape any single quotes or newlines in the CSS with .replace()
   const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
   return `
           var styleElement = document.createElement('style');
-          var styleText = document.createTextNode('${escaped}');
-          styleElement.appendChild(styleText);
+          styleElement.innerHTML = '${escaped}';
           document.head.appendChild(styleElement);
           ${script}
         `;
 }
 
+function getReloadRelatedData(props) {
+  const { hasIframe, files, customStyle, customScript, style } = props;
+  return {
+    hasIframe,
+    files,
+    customStyle,
+    customScript,
+    style
+  };
+}
+
+function isChanged(newValue, oldValue) {
+  return !Immutable.is(Immutable.fromJS(newValue), Immutable.fromJS(oldValue));
+}
+
 function getScript(props, getBaseScript, getIframeBaseScript) {
-  const { hasIframe, files, customStyle } = props;
-  const baseScript = getBaseScript(props.style);
-  let script = hasIframe ? baseScript : getIframeBaseScript(props.style);
+  const { hasIframe, files, customStyle, customScript, style } = 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 needChangeSource(nextProps, props) {
+ return nextProps && props && isChanged(getReloadRelatedData(nextProps), getReloadRelatedData(props));
+}
+
 function handleSizeUpdated(height, width, onSizeUpdated) {
   onSizeUpdated &&
     onSizeUpdated({
@@ -71,4 +92,4 @@ observer.observe(document, {
 });
 `;
 
-export { getWidth, getScript, handleSizeUpdated, domMutationObserveScript };
+export { needChangeSource, getWidth, getScript, handleSizeUpdated, domMutationObserveScript };

autoHeightWebView/index.ios.js

@@ -6,7 +6,7 @@ import { Animated, StyleSheet, ViewPropTypes, WebView } from 'react-native';
 
 import PropTypes from 'prop-types';
 
-import { getWidth, getScript, handleSizeUpdated, domMutationObserveScript } from './common.js';
+import { needChangeSource, getWidth, getScript, handleSizeUpdated, domMutationObserveScript } from './common.js';
 
 export default class AutoHeightWebView extends PureComponent {
   static propTypes = {
@@ -66,6 +66,7 @@ export default class AutoHeightWebView extends PureComponent {
       height && this.setState({ height });
     }
     this.setState({ script: getScript(nextProps, getBaseScript, getIframeBaseScript) });
+    this.needChangeSource = needChangeSource(nextProps, this.props);
   }
 
   handleNavigationStateChange = navState => {
@@ -116,11 +117,14 @@ export default class AutoHeightWebView extends PureComponent {
       enableAnimation,
       source,
       heightOffset,
-      customScript,
       style,
       scrollEnabled
     } = this.props;
-    const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
+    let webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
+    if (this.needChangeSource) {
+      this.changeSourceFlag = !this.changeSourceFlag;
+      webViewSource = Object.assign(webViewSource, { changeSourceFlag: this.changeSourceFlag });
+    }
     return (
       <Animated.View
         style={[
@@ -141,8 +145,8 @@ export default class AutoHeightWebView extends PureComponent {
           onLoadEnd={onLoadEnd}
           onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
           style={styles.webView}
-          injectedJavaScript={script + customScript}
-          scrollEnabled={scrollEnabled}
+          injectedJavaScript={script}
+          scrollEnabled={!!scrollEnabled}
           scalesPageToFit={scalesPageToFit}
           source={webViewSource}
           onNavigationStateChange={this.handleNavigationStateChange}
@@ -184,7 +188,6 @@ function getBaseScript(style) {
     ;
     ${getSize}
     (function () {
-        var i = 0;
         var height = 0;
         var width = ${getWidth(style)};
         var wrapper = document.createElement('div');
@@ -199,7 +202,6 @@ function getBaseScript(style) {
                 height = size.height;
                 width = size.width;
                 document.title = height.toString() + ',' + width.toString();
-                window.location.hash = ++i;
             }
         }
         ${commonScript}
@@ -213,7 +215,6 @@ function getIframeBaseScript(style) {
     ;
     ${getSize}
     (function () {
-        var i = 0;
         var height = 0;
         var width = ${getWidth(style)};
         function updateSize() {
@@ -222,7 +223,6 @@ function getIframeBaseScript(style) {
                 height = size.height;
                 width = size.width;
                 document.title = height.toString() + ',' + width.toString();
-                window.location.hash = ++i;
             }
         }
         ${commonScript}

demo/App.js

@@ -11,12 +11,26 @@ export default class Explorer extends Component {
     super(props);
     this.html0 = `<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>`;
     this.html1 = `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”.`;
-    this.script0 = '';
+    this.testStyle = `
+    p {
+      font-size: 25px !important;
+    }
+    `;
+    this.script0 = `
+    var styleElement = document.createElement('style');
+    styleElement.innerHTML = '${this.testStyle.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
+    document.head.appendChild(styleElement)
+    `;
     this.script1 = `document.body.style.background = 'cornflowerblue';`;
+    // this.script1 = null;
     this.state = {
       html: this.html0,
-      script: this.script0,
-      height: 0
+      script: null,
+      webViewStyle: null,
+      size: {
+        height: 0,
+        width: 0
+      }
     };
   }
 
@@ -26,15 +40,21 @@ export default class Explorer extends Component {
     }));
   };
 
+  changeStyle = () => {
+    this.setState(prevState => ({
+      webViewStyle: prevState.webViewStyle == null ? this.testStyle : null
+    }));
+  };
+
   changeScript = () => {
-    this.changeSource();
+    // this.changeSource();
     this.setState(prevState => ({
       script: prevState.script === this.script0 ? this.script1 : this.script0
     }));
   };
 
   render() {
-    const { html, script, height } = this.state;
+    const { html, size, webViewStyle, script } = this.state;
     return (
       <ScrollView
         style={{
@@ -46,6 +66,7 @@ export default class Explorer extends Component {
         }}
       >
         <AutoHeightWebView
+          customStyle={webViewStyle}
           onError={() => console.log('on error')}
           onLoad={() => console.log('on load')}
           onLoadStart={() => console.log('on load start')}
@@ -54,17 +75,22 @@ export default class Explorer extends Component {
             console.log(result);
             return true;
           }}
-          onHeightUpdated={height => this.setState({ height })}
+          onSizeUpdated={size => this.setState({ size })}
           source={{ html }}
           customScript={script}
         />
         <TouchableOpacity onPress={this.changeSource} style={styles.button}>
           <Text>change source</Text>
         </TouchableOpacity>
+        <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
+          <Text>change style</Text>
+        </TouchableOpacity>
         <TouchableOpacity onPress={this.changeScript} style={styles.button}>
           <Text>change script (have to change source to reload on android)</Text>
         </TouchableOpacity>
-        <Text style={{ padding: 5 }}>{height}</Text>
+        <Text style={{ padding: 5 }}>
+          height: {size.height}, width: {size.width}
+        </Text>
       </ScrollView>
     );
   }