React native: Is it possible to have the height of a html content in a webview?

As I wrote on the comment above this is what I came out with, but I'm still thinking that there should be a better solution.

Here is the issue on github I took inspiration from: @hedgerwang answer

In my var html I added a simple script just before the closing body tag, I simply save the height of my html in my document title:

<script>window.location.hash = 1;document.title = document.height;</script>

then I added onNavigationStateChange props in my WebView component with a callback that set a state "height" variable and then set this height to my WebView. As I said, that did the trick, with just a little flahsing while changing the content in the WebView, but I think it's a dirty hack.

At the end I decided to change the api to have something that I don't have to include in a WebView

But maybe this can help, here the full code.

onNavigationStateChange(navState) {
  this.setState({
    height: navState.title,
  });
}  
render() {
  var html = '<!DOCTYPE html><html><body>' + this.state.pushEvent.Description + '<script>window.location.hash = 1;document.title = document.height;</script></body></html>';
return (
  <ScrollView>
    <View style={styles.recipe}>
      <Image source={{uri: this.state.pushEvent.ImageUrl}}
        style={styles.imgFull} />
      <Text style={styles.title}>{this.state.pushEvent.Title}</Text>

      <WebView style={{padding: 20}}
        automaticallyAdjustContentInsets={false}
        scrollEnabled={false}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
        html={html}>
      </WebView>
    </View>
  </ScrollView>
);
}

There is a better way to do it: you can inject custom JS with the injectedJavaScript property. The result of the evaluation will end up in the event object you receive in your onNavigationStateChange. This way you won't have to modify the HTML itself or hijack the title property.

See https://gist.github.com/dbasedow/ed6e099823cb8d5ab30e for an example

Tags:

Webview

Scrollview

React Native

Recent Posts