Embedding a responsive website on a mobile app helps us to show dynamic content without the need to go and edit the actual mobile code.
Several apps like embedding web urls in to their mobile apps to avoid the long-cycle of coding and deploying the new views on a mobile app. In standard native apps (Android or iOS) we often use WebView to implement the same. If you want to know the beautify of using UIWebView, you can the awesome blog post on Signal v. Noise here.
Lets see how to do the same in react-native.
What I want to do: Show the web url inside the app as shown below. It basically fetches a remote url and shows it inside the webview.
How I implemented it: Here is the key code snapshot that made it possible. You can learn about the react-native webview at https://facebook.github.io/react-native/docs/webview.html.
[source=’js’]
var DEFAULT_URL = ‘https://www.google.co.in/maps/search/pubs/’;
[/source]
How the final output looks like: You can see the animated GIF loading a remote web url on my Android app.
If you wanna play with it more, here is the source code on GitHub: https://github.com/spritlesoftware/load-webview-on-reactnative/
