-
-
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