1

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.

<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: voca.sprintf(commonHtml, commonHtmlStyle, this.state.content) }}
    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.

samridhgupta
  • 1,695
  • 1
  • 18
  • 34
  • Please check this function `voca.sprintf(commonHtml, commonHtmlStyle, this.state.content)` return proper thing that you want? – Nisarg Thakkar Aug 17 '17 at 12:30
  • it returns the content correctly. Btw i was using (https://github.com/iou90/react-native-autoheight-webview) now the height correctly rendered ..but when i use for to render my katex/latex expression, it is again making issue with height rendering and clipps the content in iOS – samridhgupta Aug 17 '17 at 13:21
  • @samridhgupta please create a issue, thx – iou90 Jul 29 '18 at 18:09
  • Does this answer your question? [React native: webview height](https://stackoverflow.com/questions/35446209/react-native-webview-height) – Jules Sam. Randolph Oct 09 '20 at 23:30

0 Answers0