React native: webview height

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?

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 1

I wrap WebView inside a View, and set the height from the View.

<View style={{ height: 200 }}>   <WebView     automaticallyAdjustContentInsets={false}     source={{uri: 'https://player.vimeo.com/video/24156534?title=0&byline=0&portrait=0'}}   /> </View> 

Answer 2

I just follow this guide: https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native and succeeded in my work. Here is solution: 1. Define script to send document height to native env after loaded website. 2. Handle onMesssage of webview component and reset Height via state.

const webViewScript = `   setTimeout(function() {      window.postMessage(document.documentElement.scrollHeight);    }, 500);   true; // note: this is required, or you'll sometimes get silent failures `;   ... constructor(props) {     super(props);     this.state = {       webheight:100,     }  ...  <WebView style={{height: this.state.webheight}}   automaticallyAdjustContentInsets={false}   scrollEnabled={false}   source={{uri: "http://<your url>"}}   onMessage={event => {     this.setState({webheight: parseInt(event.nativeEvent.data)});   }}   javaScriptEnabled={true}   injectedJavaScript ={webViewScript}   domStorageEnabled={true} ></WebView> 

Hope that help!