Resize WebView to content height in react-native

WebViewResizing.js

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {AppRegistry, Text, WebView, View, Dimensions} = ReactNative;

var WebViewResizing = React.createClass({
    getInitialState: function () {
        return {
            webViewHeight: 100 // default height, can be anything
        };
    },
    render: function () {
        var html = '<p><strong>WebView Content</strong></p><ul><li>Foo</li><li>Bar</li><li>Baz</li><\/ul>';
        return (
            <View style={{paddingTop: 20}}>
                <Text>This is above the WebView.</Text>
                <WebView
                    html={html}
                    injectedJavaScript="document.body.scrollHeight;"
                    scrollEnabled={false}
                    onNavigationStateChange={this._updateWebViewHeight}
                    automaticallyAdjustContentInsets={true}
                    style={{width: Dimensions.get('window').width, height: this.state.webViewHeight}}/>
                <Text>This is below the WebView.</Text>
            </View>
        );
    },
    //called when HTML was loaded and injected JS executed
    _updateWebViewHeight: function (event) {
        //jsEvaluationValue contains result of injected JS
        this.setState({webViewHeight: parseInt(event.jsEvaluationValue)});
    }
});

AppRegistry.registerComponent('WebViewResizing', () => WebViewResizing);

not work for me ,i print the event but no jsEvaluationValue there

jsEvaluationValue is undefined .

This worked at 0.24, once I updated to 0.27 (skipped a few updates), it no longer works. jsEvaluationValue returns 667 for short content, and for longer doc, the returned value falls a bit short, thus cutting off the bottom of the content

Very nice @dbasedow, using this snippet in rn 0.35.0 and working great. However I did have to alter the onNavigationStateChange prop to:

onNavigationStateChange={this._updateWebViewHeight.bind(this)}

Due to a this.setState function doesn't exist error. I guess without it, it's trying to set state inside the WebView component.

Not working as nice in android, the above ☝️ was from testing iOS

yup, there is no jsEvaluationValue props in android

yup, there is no jsEvaluationValue props in android

not working

jsEvaluationValue in Android - possibly this facebook/react-native#13006 or facebook/react-native#7788?

automaticallyAdjustContentInsets defaults to true

I am also searching for this issue on internet for the last 2-3 days and i have got an awesome solution for this ...
https://stackoverflow.com/a/51513193/7760408

The link is broken

The link is broken

The right link for searchers like me: https://stackoverflow.com/a/51513193/7760408