Closed
Description
I m using a Webview for rendering some content to a view, to calculate the height of the content I m using a script to get the height of the content, the span tag contains the content.
const commonHtml =<html id="htmlContent">
<body>
<span>
...
//content
...
</span>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.title = document.getElementById('htmlContent').offsetHeight;
window.location.hash = 1;
});
</script>
</body>
</html>
And here is the webview component :
const commonHtmlStyle= `font-weight:300; font-family:sans-serif; font-size: 18px; color:rgb(136,136,136); backgroundColor:rgba(0,0,0,0);`;
<WebView style={{ height: this.state.height }}
ref={(ref) => { this.webview = ref; }}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
javaScriptEnabled={true}
source={{ html: commonHtml }}
onNavigationStateChange={this.setState({
height: parseInt(navState.title)
})}
/>
So results,
i m seeing blank spaces while running in Android (script returns appox double the height)
and clipped content on iOS (returns height less than the content height).
I tried using other autoHeight webview components like (react-native-webview-autoheight) but still shows nearly same results for both iOS and Android.
I m trying wrap my head around this issue but but not able to solve this any how. Any help would be appreciated.