Dynamic height of webview wrapper for the HTML content

[ajitdas123]

How can we adjust the height of webview dynamically based on the HTML content?

As per the suggestion here https://github.com/react-native-community/react-native-webview/issues/413#issuecomment-473507895 I have added the code below which works fine on Android as well as on IOS but doesn't work on the web, on the web it showing scrolling bar, not adjusting to the height of the content.

Here is my code:

handleWebViewNavigationStateChange = (event) => {
      
       let htmlHeight = Number(event.nativeEvent.data);
       console.log('HTML Webview height',htmlHeight); // This is coming null 
       if (htmlHeight) {
           this.setState({webViewHeight: htmlHeight});
       }
   };

.........
<WebView
                   originWhitelist={['*']}
                   source={{html: html}}
                   style={{height: this.state.webViewHeight}}
                   injectedJavaScript={"const meta = document.createElement('meta'); " +
                   "meta.setAttribute('content', 'width=device-width, initial-scale=1.0');" +
                   " meta.setAttribute('name', 'viewport'); " +
                   "document.getElementsByTagName('head')[0].appendChild(meta);" +
                   "window.ReactNativeWebView.postMessage(document.body.scrollHeight)"}
                   //   scalesPageToFit={true}
                   javaScriptEnabled={true}
                   automaticallyAdjustContentInsets={true}
                   onMessage={event => this.handleWebViewNavigationStateChange(event)}
               />

[tajinder-logiciel]

i am facing same issue any solution for that @ajitdas123

[ajitdas123]

@tajinder-logiciel i didn't use the web view on web, i checked if the platform is web then i injected the HTML content inside the div. Like below

  <div dangerouslySetInnerHTML={{__html:html}}></div>        

You may check more info about it here

[jsamr]

I don't know if that may help: https://formidable-webview.github.io/webshell/docs/autoheight

[Cogneter]

I had the same problem - it doesn't work because window.ReactNativeWebView.postMessage doesn't work. window.ReactNativeWebView is defined in react-native-webview, but it's undefined in react-native-web-webview, ergo it doesn't work on web.

See https://github.com/react-native-web-community/react-native-web-webview/issues/55 and https://github.com/react-native-web-community/react-native-web-webview/issues/37 for more info.