React native: webpage height

Question

Hi, I know this is a known issue about auto-height web browsing in native responsive, and I tried all the possible solutions that I 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 the HTML content in the webview?

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

I would like to hear if anyone else had this problem and how it was fixed.

Answer 1

Apparently the problem was what I had javaScriptEnabled={false}.

After turning it on, it all worked.

Answer 2

WebView .

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

Answer 3

: https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native , : 1. env . 2. onMesssage - .

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>

, !

Answer 4

response-native-autoheight-webview

Answer 5

WebView . , flex: 0, :

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