-
-
Save dbasedow/ed6e099823cb8d5ab30e to your computer and use it in GitHub Desktop.
'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); |
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
not work for me ,i print the event but no jsEvaluationValue there