Question: Hi I know it's a known issue about the auto height of webview in react native,
and I have tried all the possibles solutions I've found on the internet such as :

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

<https://github.com/danrigsby/react-native-web-container/blob/master/index.js>

and all the solutions suggested in:
[React native: Is it possible to have the height of a html content in a webview?](https://stackoverflow.com/questions/32952270/react-native-is-it-possible-to-have-the-height-of-a-html-content-in-a-webview)

But unfortunately none of these seems to work for me, 
I understand that the workaround they all suggest is to set the title to the height, but in my case it seems that the title always stays the same which is : 
"text/html ...." and the rest of my html.
I get the html content from an API, it comes without a body, head or html tags, I've also tried adding these tags manually to the html and nothing seems to work.

I would love to hear if anyone else had that problem and how did it get fixed.

Answer: 
A reliable implementation of this behavior is with `useAutoheight` hook from [@formidable-webview/webshell](https://formidable-webview.github.io/webshell/) library.
The latter allows to inject "features" into `WebViews`, e.g. scripts and behaviors.
In this example, we will use 3 features + the aforementioned hook:

* `HandleHTMLDimensionsFeature` which is required by `useAutoheight` hook to get document size updates;
* `ForceResponsiveViewportFeature` to work around [mobile virtual viewport](https://formidable-webview.github.io/webshell/docs/autoheight/#mobile-virtual-viewport);
* `ForceElementSizeFeature` to work around [cyclic size constraints](https://formidable-webview.github.io/webshell/docs/autoheight/#cyclic-size-constraints-%E2%88%9E)

This component should work with any webpage.

```js
import React from 'react';
import makeWebshell, {
  HandleHTMLDimensionsFeature,
  ForceResponsiveViewportFeature,
  ForceElementSizeFeature,
  useAutoheight
} from '@formidable-webview/webshell';
import WebView from 'react-native-webview';

const Webshell = makeWebshell(
  WebView,
  new HandleHTMLDimensionsFeature(),
  new ForceResponsiveViewportFeature({ maxScale: 1 }),
  new ForceElementSizeFeature({
    target: 'body',
    heightValue: 'auto',
    widthValue: 'auto'
  })
);

export default function ResilientAutoheightWebView(props) {
  const { autoheightWebshellProps } = useAutoheight({
    webshellProps: props
  });
  return <Webshell {...autoheightWebshellProps} />;
}

```

More resources:

* [Try this on Expo](https://expo.io/@jsamr/projects/formidable-webview-autoheight-example)
* [Full guide here.](https://formidable-webview.github.io/webshell/docs/autoheight/)
The WebView has default styles. If you want to set height, you also need to add `flex: 0`, as stated [in the documentation](https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#style):

*Please note that there are default styles (example: you need to add flex: 0 to the style if you want to use height property).*