Native Shopify Mobile App with 20 new features
Kickstart your hyperlocal marketplace in Corona pandemic with a starter guide
Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 18.104.22.168 release ready!
Owner and Founder. Opencart
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.data. data must be a string.
Source code for the injected script
Source code of My Webview-
Source code to invoke MyWebview-
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.