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 :

ht

Answer 1

I waste whole day to fix the height issue but in the end I had to shift to another library This one is easy and good

https://github.com/archriss/react-native-render-html

Answer 2

use package react-native-autoheight-webview

Answer 3

The WebView has default styles. If you want to set height, you also need to add flex: 0, as stated in the documentation:

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

Answer 4

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

After enabling it everything worked.

Answer 5

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!

Answer 6

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>