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>

react-native-webview-autoheight, 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. React Native WebView Autoheight. React Native WebView which sets it's height automatically with minimal efforts. You can also add custom CSS style or javascript to your webview using below example.

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!

react-native-auto-expanding-webview, Auto-expanding WebView for React Native. Contribute to shqld/react-native-auto-expanding-webview development by creating an account on GitHub. Auto-expanding WebView for React Native. Contribute to shqld/react-native-auto-expanding-webview development by creating an account on GitHub.

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

After enabling it everything worked.

react-native auto height, Search for React native shop at search.sidewalk.com. See yourself. React native shop in Los Angeles Search for React native shop at search.sidewalk.com. See yourself. React native shop in Los Angeles

use package react-native-autoheight-webview

react native webview inside scrollview, I want to use WebView inside ScrollView for my react native app. But if I do so, I am not able to scroll my webview, unless I disable the scroll on scrollview. However, I need the scroll in both I want to use WebView inside ScrollView for my react native app. But if I do so, I am not able to scroll my webview, unless I disable the scroll on scrollview. However, I need the scroll in both

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).

react-native-webview npm, react-native-webview-android Simple React Native Android module to use Android's WebView inside your app (with experimental html file input support to handle file uploads in forms). react-native-webview-android Simple React Native Android module to use Android's WebView inside your app (with experimental html file input support to handle file uploads in forms).

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

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

react native webview onloadprogress, Override the native component used to render the WebView. Enables a custom native WebView which uses the same JavaScript as the original WebView. The nativeConfig prop expects an object with the following keys: component (any) props (object) viewManager (object) Override the native component used to render the WebView. Enables a custom native WebView which uses the same JavaScript as the original WebView. The nativeConfig prop expects an object with the following keys: component (any) props (object) viewManager (object)

I recommend react-native-autoheight-webview. it perfect work for me. https://github.com/iou90/react-native-autoheight-webview

react-native webview flex, 95% Trial-To-Hire Success. $0 Recruiting Fee. Top 3% of World-Class Talent On Demand. Vetted React Native Developers For Your Needs. Focus On Your Project, Not Hiring. 95% Trial-To-Hire Success. $0 Recruiting Fee. Top 3% of World-Class Talent On Demand. Vetted React Native Developers For Your Needs. Focus On Your Project, Not Hiring.