• All you need to do is create a seamless 2-way communication channel between the web view and the app, so the parent app can trigger any JavaScript functions inside the web view and the web view can reach outside to call native APIs.
• Here’s one such example: – Note that this view contains: – Native navigation header, complete with built-in transition functionalityA Web view, which embeds a QR code generator web appA native chat input component at the bottomAll this can be described by just tweaking some of the JSON markup attributes we…
• In this article I’m going to explain: – Why blending web engine and native components is often a good idea.Why a seamless integration of HTML and Native is not easy, and how I implemented one.Most importantly, how YOU can use it to build your own app instantly.Why would you use…
• It’s like a web browser, but instead of interpreting HTML markup into web pages, it interprets JSON markup into native apps on iOS and Android.
• Otherwise it will feel clunky, and it will feel exactly like what it is — a website.Parent app can control child web container: The parent app should be able to freely control the child web view.Child web container can trigger native events on the parent app: The child app should be able…

@jetrubyagency: How to Turn Your Website into a Mobile App with 7 Lines of JSON

#business #Coding #reactjs…

What if I told you the 7 lines of JSON above, colored in orange is all you need to turn a website into a mobile app? No need to rewrite your website using some framework API just to make it behave like a mobile app. Just bring your existing website as is, and blend it into a native app with a simple URL reference.

And what if, just by tweaking the JSON markup a bit, you can access all the native APIs, native UI components, as well as native view transitions out of the box?

Here’s what a minimal example looks like in action:

Notice how I’ve embedded a github.com web page but the rest of the layout is all native UI components, such as the navigation header and the bottom tab bar. And the transition is automatically native without you having to rewrite the website using any APIs.

Before I explain how, you may ask: “That’s cool, but can you do anything meaningful other than just displaying the web page in a native app frame?”

Great question, because that’s the main topic of this post. All you need to do is create a seamless 2-way communication channel between the web view and the app, so the parent app can trigger any JavaScript functions inside the web view and the web view can reach outside to call native APIs.

Here’s one such example:

Note that this…