use document.body.offsetHeight instead of document.body.firstChild.clientHeight on iOS to support uri & raw text autoheight; default scalesPageToFit to false to fix the issue of react native 0.47 (Fix scalesPageToFit default property for iOS WebView. (185948604c/) - @peterp);

autoHeightWebView/index.android.js

@@ -23,6 +23,36 @@ import Immutable from 'immutable';
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, { nativeOnly: { messagingEnabled: PropTypes.bool } });
 
 export default class AutoHeightWebView extends PureComponent {
+    static propTypes = {
+        source: WebView.propTypes.source,
+        onHeightUpdated: PropTypes.func,
+        customScript: PropTypes.string,
+        enableAnimation: PropTypes.bool,
+        // if set to true may cause some layout issues (smaller font size)
+        scalesPageToFit: PropTypes.bool,
+        // only works on enable animation
+        animationDuration: PropTypes.number,
+        // offset of rn webview margin
+        heightOffset: PropTypes.number,
+        // baseUrl not work in android 4.3 or below version
+        enableBaseUrl: PropTypes.bool,
+        style: ViewPropTypes.style,
+        // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
+        files: PropTypes.arrayOf(PropTypes.shape({
+            href: PropTypes.string,
+            type: PropTypes.string,
+            rel: PropTypes.string
+        }))
+    }
+
+    static defaultProps = {
+        scalesPageToFit: false,
+        enableBaseUrl: false,
+        enableAnimation: true,
+        animationDuration: 555,
+        heightOffset: 20
+    }
+
     constructor(props) {
         super(props);
         this.onMessage = this.onMessage.bind(this);
@@ -165,7 +195,7 @@ export default class AutoHeightWebView extends PureComponent {
 
     render() {
         const { height, script, isChangingSource, heightOffset } = this.state;
-        const { enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
+        const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
         let webViewSource = source;
         if (enableBaseUrl) {
             webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
@@ -182,7 +212,7 @@ export default class AutoHeightWebView extends PureComponent {
                             style={Styles.webView}
                             javaScriptEnabled={true}
                             injectedJavaScript={script + customScript}
-                            scrollEnabled={false}
+                            scalesPageToFit={scalesPageToFit}
                             source={webViewSource}
                             onMessage={this.onMessage}
                             messagingEnabled={true}
@@ -194,33 +224,6 @@ export default class AutoHeightWebView extends PureComponent {
     }
 }
 
-AutoHeightWebView.propTypes = {
-    source: WebView.propTypes.source,
-    onHeightUpdated: PropTypes.func,
-    customScript: PropTypes.string,
-    enableAnimation: PropTypes.bool,
-    // only works on enable animation
-    animationDuration: PropTypes.number,
-    // offset of rn webview margin
-    heightOffset: PropTypes.number,
-    // baseUrl not work in android 4.3 or below version
-    enableBaseUrl: PropTypes.bool,
-    style: ViewPropTypes.style,
-    // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
-    files: PropTypes.arrayOf(PropTypes.shape({
-        href: PropTypes.string,
-        type: PropTypes.string,
-        rel: PropTypes.string
-    }))
-}
-
-AutoHeightWebView.defaultProps = {
-    enableAnimation: true,
-    animationDuration: 555,
-    enableBaseUrl: false,
-    heightOffset: 20
-}
-
 const ScreenWidth = Dimensions.get('window').width;
 
 const IsBelowKitKat = Platform.Version < 19;

autoHeightWebView/index.ios.js

@@ -14,6 +14,33 @@ import {
 import PropTypes from 'prop-types';
 
 export default class AutoHeightWebView extends PureComponent {
+    static propTypes = {
+        source: WebView.propTypes.source,
+        onHeightUpdated: PropTypes.func,
+        customScript: PropTypes.string,
+        enableAnimation: PropTypes.bool,
+        // if set to true may cause some layout issues (smaller font size)
+        scalesPageToFit: PropTypes.bool,
+        // only works on enable animation
+        animationDuration: PropTypes.number,
+        // offset of rn webview margin
+        heightOffset: PropTypes.number,
+        style: ViewPropTypes.style,
+        // add web/files... to project root
+        files: PropTypes.arrayOf(PropTypes.shape({
+            href: PropTypes.string,
+            type: PropTypes.string,
+            rel: PropTypes.string
+        }))
+    }
+
+    static defaultProps = {
+        scalesPageToFit: false,
+        enableAnimation: true,
+        animationDuration: 555,
+        heightOffset: 12
+    }
+
     constructor(props) {
         super(props);
         this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
@@ -80,7 +107,7 @@ export default class AutoHeightWebView extends PureComponent {
 
     render() {
         const { height, script } = this.state;
-        const { enableAnimation, source, heightOffset, customScript, style } = this.props;
+        const { scalesPageToFit, enableAnimation, source, heightOffset, customScript, style } = this.props;
         const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
         return (
             <Animated.View style={[Styles.container, {
@@ -91,6 +118,7 @@ export default class AutoHeightWebView extends PureComponent {
                     style={Styles.webView}
                     injectedJavaScript={script + customScript}
                     scrollEnabled={false}
+                    scalesPageToFit={scalesPageToFit}
                     source={webViewSource}
                     onNavigationStateChange={this.handleNavigationStateChange} />
             </Animated.View>
@@ -98,30 +126,6 @@ export default class AutoHeightWebView extends PureComponent {
     }
 }
 
-AutoHeightWebView.propTypes = {
-    source: WebView.propTypes.source,
-    onHeightUpdated: PropTypes.func,
-    customScript: PropTypes.string,
-    enableAnimation: PropTypes.bool,
-    // only works on enable animation
-    animationDuration: PropTypes.number,
-    // offset of rn webview margin
-    heightOffset: PropTypes.number,
-    style: ViewPropTypes.style,
-    // add web/files... to project root
-    files: PropTypes.arrayOf(PropTypes.shape({
-        href: PropTypes.string,
-        type: PropTypes.string,
-        rel: PropTypes.string
-    }))
-}
-
-AutoHeightWebView.defaultProps = {
-    enableAnimation: true,
-    animationDuration: 555,
-    heightOffset: 12
-}
-
 const ScreenWidth = Dimensions.get('window').width;
 
 const Styles = StyleSheet.create({
@@ -141,7 +145,7 @@ const BaseScript =
     ; (function () {
         var i = 0;
         function updateHeight() {
-            document.title = document.body.firstChild.clientHeight;
+            document.title = document.body.offsetHeight;
             window.location.hash = ++i;
         }
         updateHeight();

demo/yarn.lock

@@ -1737,6 +1737,10 @@ image-size@^0.3.5:
   version "0.3.5"
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.3.5.tgz#83240eab2fb5b00b04aab8c74b0471e9cba7ad8c"
 
+immutable@^3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -2877,7 +2881,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.6, prop-types@^15.5.8:
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -2942,6 +2946,12 @@ react-devtools-core@^2.1.8:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
+react-native-autoheight-webview@../:
+  version "0.2.5"
+  dependencies:
+    immutable "^3.8.1"
+    prop-types "^15.5.10"
+
 react-native@0.45.1:
   version "0.45.1"
   resolved "https://registry.npmjs.org/react-native/-/react-native-0.45.1.tgz#b3283c4a88233421f9c662a2ff1a4ccc8a9f07c0"