React Native dynamic webview height
Solution 1
I have found the solution in the implementation of one of the RN third party libraries. Here is the link to it: https://github.com/danrigsby/react-native-web-container/blob/master/index.js
With this kind of approach all worked good.
Solution 2
Just try this lib: https://github.com/iou90/react-native-autoheight-webview It will works both on iOS & Android
Admin
Updated on June 08, 2022Comments
-
Admin almost 2 years
I have WebView content are which changes it's height depending on amount of content. So I found a way how to take the height of the content through the document.title attribute onNavigationStateChange. Looks like this:
let html = '<!DOCTYPE html><html><body><script>document.title = document.height;</script></body></html>';And on onNavigationStateChange
onNavigationStateChange(navState) { this.setState({ height: navState.title }); console.log("DATA"); console.log(this.state.height) }On the actual WebView render I do:
<WebView style={this._setWebviewHeight()} automaticallyAdjustContentInsets={false} scrollEnabled={false} onNavigationStateChange={this.onNavigationStateChange.bind(this)} html={html}> </WebView>Where:
_setWebviewHeight() { return { height: this.state.height, padding: 20, } }And in this case I'm getting error and I am not able to get the height of content through state. What shall I do then?
The idea of solution is taken from here: React native: Is it possible to have the height of a html content in a webview?