Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React-Native Webview auto Height not working #15532

Closed
samridhgupta opened this issue Aug 17, 2017 · 4 comments
Closed

React-Native Webview auto Height not working #15532

samridhgupta opened this issue Aug 17, 2017 · 4 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@samridhgupta
Copy link

samridhgupta commented Aug 17, 2017 •
edited
Loading

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.
@hramos
Copy link
Contributor

hramos commented Aug 17, 2017

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue with the additional information provided. Thanks!

@hramos hramos closed this as completed Aug 17, 2017
@iou90
Copy link

iou90 commented Sep 1, 2017

try this: https://github.com/iou90/react-native-autoheight-webview

@cinder92
Copy link

same issue here, only works on iOs but no Android :/

@el-lsan
Copy link

el-lsan commented Mar 20, 2018

@samridhgupta Did you manage to solve this issue ?

@facebook facebook locked as resolved and limited conversation to collaborators Aug 17, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Aug 17, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@hramos @el-lsan @iou90 @cinder92 @samridhgupta @react-native-bot