Creating dynamic height Webview in React Native

Updated 29 October 2021


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-





. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home