change update height method on android; update version to 0.0.11

autoHeightWebView/index.android.js

@@ -6,28 +6,47 @@ import React, {
 } from 'react';
 
 import {
+    findNodeHandle,
     requireNativeComponent,
     Dimensions,
+    UIManager,
     View,
     WebView
 } from 'react-native';
 
-const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView);
+const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, { nativeOnly: { messagingEnabled: PropTypes.bool } });
 
 export default class AutoHeightWebView extends Component {
     constructor(props) {
         super(props);
+        this.onMessage = this.onMessage.bind(this);
         this.onLoadingStart = this.onLoadingStart.bind(this);
-        this.onLoadingFinish = this.onLoadingStart.bind(this);
-        this.handleNavigationStateChanged = this.handleNavigationStateChanged.bind(this);
         const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
         this.state = {
+            isOnLoadingStart: false,
             height: 0,
+            heightOffset: 0,
             script: initialScript
         };
     }
 
+    componentDidMount() {
+        this.intervalPostMessage();
+    }
+
     componentWillReceiveProps(nextProps) {
+        // injectedJavaScript only works when webview reload (html changed)
+        if (nextProps.html === this.props.html) {
+            this.htmlHasChanged = false;
+            return;
+        }
+        else {
+            this.htmlHasChanged = true;
+            this.setState({
+                height: 0,
+                heightOffset: 0
+            });
+        }
         let currentScript = BaseScript;
         if ((nextProps.files && !this.props.files) || (nextProps.files && this.props.files && JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files))) {
             currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
@@ -35,16 +54,53 @@ export default class AutoHeightWebView extends Component {
         this.setState({ script: currentScript });
     }
 
-    onLoadingStart(event) {
-        this.updateNavigationState(event);
+    componentDidUpdate(prevProps, prevState) {
+        if (this.htmlHasChanged) {
+            if (this.state.isOnLoadingStart && this.state.height === 0 && this.state.heightOffset === 0) {
+                this.intervalPostMessage();
+                this.htmlHasChanged = false;
+                this.setState({ isOnLoadingStart: false });
+            }
+        }
     }
 
-    onLoadingFinish(event) {
-        this.updateNavigationState(event);
+    componentWillUnmount() {
+        clearInterval(this.interval);
     }
 
-    updateNavigationState(event) {
-        this.handleNavigationStateChanged(event.nativeEvent);
+    onLoadingStart() {
+        if (this.htmlHasChanged) {
+            this.setState({ isOnLoadingStart: true });
+        }
+    }
+
+    postMessage(data) {
+        UIManager.dispatchViewManagerCommand(
+            findNodeHandle(this.webview),
+            UIManager.RCTWebView.Commands.postMessage,
+            [String(data)]
+        );
+    };
+
+    intervalPostMessage() {
+        this.interval = setInterval(() => {
+            this.postMessage('getBodyHeight');
+        }, 205);
+    }
+
+    onMessage(e) {
+        const height = parseInt(e.nativeEvent.data);
+        console.log(height);
+        if (height) {
+            clearInterval(this.interval);
+            this.setState({
+                heightOffset: this.props.heightOffset,
+                height
+            });
+            if (this.props.onHeightUpdated) {
+                this.props.onHeightUpdated(height);
+            }
+        }
     }
 
     appendFilesToHead(files, script) {
@@ -64,16 +120,6 @@ export default class AutoHeightWebView extends Component {
         return script;
     }
 
-    handleNavigationStateChanged(navState) {
-        const height = Number(navState.title);
-        if (height) {
-            this.setState({ height });
-            if (this.props.onHeightUpdated) {
-                this.props.onHeightUpdated(height);
-            }
-        }
-    }
-
     render() {
         const source = this.props.enableBaseUrl ? {
             html: this.props.html,
@@ -82,16 +128,18 @@ export default class AutoHeightWebView extends Component {
         return (
             <View style={[{
                 width: ScreenWidth,
-                height: this.state.height + this.props.heightOffset
+                height: this.state.height + this.state.heightOffset
             }, this.props.style]}>
                 <RCTAutoHeightWebView
+                    ref={webview => this.webview = webview}
                     style={{ flex: 1 }}
                     javaScriptEnabled={true}
                     injectedJavaScript={this.state.script + this.props.customScript}
+                    onLoadingStart={this.onLoadingStart}
                     scrollEnabled={false}
                     source={source}
-                    onLoadingStart={this.onLoadingStart}
-                    onLoadingFinish={this.onLoadingFinish} />
+                    onMessage={this.onMessage}
+                    messagingEnabled={true} />
             </View>
         );
     }
@@ -116,7 +164,7 @@ AutoHeightWebView.propTypes = {
 
 AutoHeightWebView.defaultProps = {
     enableBaseUrl: false,
-    heightOffset: 25
+    heightOffset: 20
 }
 
 const ScreenWidth = Dimensions.get('window').width;
@@ -124,21 +172,8 @@ const ScreenWidth = Dimensions.get('window').width;
 const BaseScript =
     `
     ; (function () {
-        var wrapper = document.createElement('div');
-        wrapper.id = 'height-wrapper';
-        while (document.body.firstChild) {
-            wrapper.appendChild(document.body.firstChild);
-        }
-        document.body.appendChild(wrapper);
-        var i = 0;
-        function updateHeight() {
-            document.title = wrapper.clientHeight;
-            window.location.hash = ++i;
-        }
-        updateHeight();
-        window.addEventListener('load', function () {
-            updateHeight();
+        document.addEventListener('message', function (e) {
+            window.postMessage(String(document.body.offsetHeight));
         });
-        window.addEventListener('resize', updateHeight);
-    } ());
+    } ()); 
     `;

autoHeightWebView/index.ios.js

@@ -64,6 +64,7 @@ export default class AutoHeightWebView extends Component {
                 height: this.state.height + this.props.heightOffset,
             }, this.props.style]}>
                 <WebView
+                    style={{ flex: 1 }}
                     injectedJavaScript={this.state.script + this.props.customScript}
                     scrollEnabled={false}
                     source={{

examples/autoHeightWebViewExplorer/explorer.js

@@ -6,6 +6,10 @@ import React, {
 } from 'react';
 
 import {
+    findNodeHandle,
+    requireNativeComponent,
+    Dimensions,
+    UIManager,
     Platform,
     ScrollView,
     StyleSheet,
@@ -55,11 +59,9 @@ export default class Explorer extends Component {
                     justifyContent: 'center',
                     alignItems: 'center'
                 }}>
-                {
-                    <AutoHeightWebView
-                        html={this.state.html}
-                        customScript={this.state.script} />
-                }
+                <AutoHeightWebView
+                    html={this.state.html}
+                    customScript={this.state.script} />
                 <TouchableOpacity
                     onPress={this.changeHtml}
                     style={Styles.button}>

examples/autoHeightWebViewExplorer/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "15.4.2",
     "react-native": "0.40.0",
-    "react-native-autoheightwebview": "../.."
+    "react-native-autoheightwebview": "0.0.11"
   },
   "devDependencies": {
     "babel-jest": "18.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-autoheightwebview",
-  "version": "0.0.7",
+  "version": "0.0.11",
   "description": "An auto height webview for React Native",
   "main": "autoHeightWebView",
   "files": ["android/", "autoHeightWebView/"],