Creating dynamic height Webview

WebView is used to display the Web Content into our Application. Web Content may be any URL or HTML data.  In this blog, I have highlighted how to create a dynamic height Webview.  It is the toughest and required task in react native.

The problem of React Native Webview-

React Native does not provide dynamic height to Webview Component, so we need to provide fix height to our WebView but fix height is not suitable for the Html content. If we use Webview with some other View Component then Webview takes all screen size and other views are not displayed.

How can solve it?

I have read & used some library but the issue has not solved in case.  So, I have read one library  “react-native-webview-autoheight”  and create my own Webview Component name MyWebview. For the solution, I have used onMessage props. it is a function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.

window.postMessage accepts one argument, data which will be available on the event object, event.nativeEvent.datadata must be a string.

For this facility of Webview, I have injected the Javascript to Webview that computes the height of the content and triggered the function postMessage and pass the height of the content with this function and get this size data on onMessage props function and update the webview height state.

Source code for the injected script

Source code of My Webview-

Source code to invoke MyWebview-

 

References:-

https://facebook.github.io/react-native/docs/webview

https://www.npmjs.com/package/react-native-webview-autoheight

 

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close