React Native: The Web Goes Native

Ben Teese on native native app development, using Javascript

This is part of a series of notes from from YOW! Connected conference where leading experts presents their thoughts on all things mobile and IoT.

Recognising that the principles underlying React are not unique to the web, Facebook have released React Native, a framework for building native apps. In short, React Native gives you a native look-and-feel, but uses a Javascript-based component model. With an iOS version out since January and an Android version released last week, React Native aims to bring a “Learn Once, Write Anywhere” approach to native app development.

Traditionally, hybrid mobile app means packaging up a web layout as native. But not React Native. React Native = no UIWebView, it’s actual native components!

Ben started his talk with a quick overview of the React concepts:
Virtual DOM — diff and apply patch to browser DOM
Components — Declarative and nested component
One-way data flow — only do the bare minimum update. Reconcile with browser DOM. Handle event, update state, virtual DOM, browser DOM.

People with web development background will find this a great avenue for applying their skill to native app development. React Native uses flexbox for layout positioning, it also has touch handling and LayoutAnimation out of the box. LayoutAnimation is great for automatically animating elements to their new positions when the next layout happens.

An audience member queried asked if Ben has any thought on what kind of project would be appropriate for technology. His answer was “it’s good for building app quickly”. No comment on scalability or performance. Either way React is influential to other Javascript libraries too. Drawing inspiration from React, Ember now also uses virtual DOM, Angular is moving back to one way flow.

Example of React Native app available from App Store: Facebook Groups is a hybrid application, consisting of views built both with native code and React Native JavaScript, and Facebook Ads Manager is built entirely using React Native.