CODEWITHSUNDEEP
javascripthtmlreact-nativewebviewoffsetheight
samridhgupta
samridhgupta

Reputation: 1725

React-Native Webview auto Height not working

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.

Upvotes: 1

Views: 2744

Answers (0)

Related Questions