-
-
Save xrksudy/dd90f034b5f7f54a9706b0e408937e21 to your computer and use it in GitHub Desktop.
Resize WebView to content height in react-native
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment