CODEWITHSUNDEEP
webviewscrollviewreact-native
daniele bertella
daniele bertella

Reputation: 725

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

I'm getting html content from an api and I want to render it as a web view in my application.

The webview component is nested in a scrollview because it has some other contents above my render function is something like this:

render() {
      var html = '<!DOCTYPE html><html><body>' + this.state.pushEvent.Description + '</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}
            html={html}>
          </WebView>
        </View>
      </ScrollView>
    );
  }

The problem is that my html is just 20pt high that is my padding. Is there a clever way to get the height of the content?

Upvotes: 13

Views: 19678

Answers (5)

Jules Sam. Randolph
Jules Sam. Randolph

Reputation: 4220

You can use HandleHTMLDimensionsFeature provided by @formidable-webview/webshell library. It will use injectedJavaScript to run a script in the WebView. This is how you would use it:

import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature
} from '@formidable-webview/webshell';
import WebView from 'react-native-webview';

const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature()
);

export default function AugmentedWebview(props) {
  const onDocumentDimensions = React.useCallback(
    (dimensions) => {
      console.info(dimensions.content);
    },
    []
  );
  return (
    <Webshell
      onDOMHTMLDimensions={onDocumentDimensions}
      {...props}
    />
  );
}

The script run in the Web environement is available here. The dimensions will be sent each time the document size changes, dynamically. The script will use the best API available in the WebView, by order of preference, ResizeObserver, MutationObserver and finally, polling on a regular interval. If you are looking for an autoheight WebView, check out this guide.

Upvotes: 0

kriskate
kriskate

Reputation: 317

The only reliable way for doing this is through postMessage, in the injectedJavascript prop (just as in this component.

Pass document.scrollHeight in there and you're all set.

const jsString = `
  function post () {
    postMessage(
      Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.body.clientHeight, document.body.scrollHeight)
    );
  }
  setTimeout(post, 200);
// other custom js you may want
`


// component class:
  _onMessage = (e) => {
    this.setState({
      webviewHeight: parseInt(e.nativeEvent.data)
    });
  }
  render() {
    return (
      <WebView
        source={yourURL}

        injectedJavascript={jsString}
        onMessage={this._onMessage}

        style={{ height: webviewHeight }}
      />
    )
  }

Upvotes: 0

Agu Dondo
Agu Dondo

Reputation: 13579

This component worked perfectly for me. It adjusts the webview to fit the content and returns the height of the rendered html.

https://gist.github.com/epeli/10c77c1710dd137a1335

And change

import React, {WebView, View, Text} from "react-native";

for

import React from "react";
import {WebView, View, Text} from "react-native";

at the top of the file.

Upvotes: 0

Daniel Basedow
Daniel Basedow

Reputation: 13396

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

Upvotes: 10

daniele bertella
daniele bertella

Reputation: 725

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>
);
}

Upvotes: 10

Related Questions