React Native was released a few months ago and it brings a new approach to mobile development by bringing web development tools to native mobile development. Compared to older hybrid mobile frameworks, such as PhoneGap, React Native uses native UI controls to provide fully native look and feel. In addition, it allows us to leverage existing JavaScript libraries and frameworks such as RxJS, lodash, and Bacon.js. It provides a browser-like execution environment with features like XMLHttpRequest and window.fetch. Application layout is specified using a CSS-like DSL. All of this makes it possible to reuse existing web development expertise and even existing code on native mobile development.
React Native works by executing your application as JavaScript on the phone. Your code and the UI layer are executed on different threads and React Native asynchronously handles all events between these two. Native UI controls are exposed as JavaScript classes that are then used just as HTML elements are used on a regular React web page. React Native provides wrappers for the most common UI controls and it is possible to create your own wrappers to access apis that are not supported out of the box.
Facebook’s recent Groups app uses React Native so it has already proven itself in production to some extent. In addition, it appears that a rich ecosystem of third party components is already developing.
Sharing your code
I developed a proof of concept application that downloads train timetable data from a public rest api and displays it on your phone. The user interface is pictured below. In addition, I developed a simple React based web site that uses the same application logic to fetch timetable data. This demonstrates that it is indeed viable to share common business logic between the browser and a React Native application. The full example can be found at https://github.com/lhahne/trains.
A React Native app displaying train timetable data
A React application displaying train data using the same underlying components as the React Native app
React Native’s JavaScript environment provides a browser-like execution environment. This makes it trivial to use same JavaScript code on both mobile and web. In addition, React Native provides a node.js and browserify like require system so you can use the require function just as you are used to. React Native also provides JavaScript transformations that allow you to use ES6 features on your code just as if you were using Babel when doing web development.
All this commonality makes it rather trivial to share source code between React Native and web. If we are to use the typical Flux architecture, it would mean that our stores would be shared code. The UI layer would then be written specifically for each native platform using React Native and for web using React.
In practice we can use any JavaScript library from npm and then construct our actions and store logic. Specifically I used bacon.js to implement a simple FRP style store that fetches data from a public api. This implementation is fully compatible with both React Native and browsers that have window.fetch polyfilled.
Then a standard React view to display this on browser becomes
and using React Native on iOS this can be implemented as
We can see here that both implementations share the same store layer code. The UI layer is then implemented natively using either React or React Native. In addition, the structure of both views is very similar. It becomes apparent that knowledge of React and JavaScript programming is more important here than the knowledge of native APIs and native development. The full example application can be found on github at https://github.com/lhahne/trains.
Conclusions
React Native demonstrates that it is indeed possible to share code between the web and mobile platforms. In addition, programming React Native resembles web development more than native mobile development. This allows developers to quickly translate their existing web development skill to native mobile development. React Native provides much more native feel than other crossplatform tools such as phonegap. However not all native UI components have yet been implemented so achieving native feel is easier than achieving native look. Yet React Native is currently only available on iOS. Android version is supposedly upcoming but nothing has been released yet.
Further Reading
React Native
React Native’s JavaScript environment
Building Custom React Native Components From Scratch
Components for React Native
