Scripting Native App with React Native

If we use JavaScript to build native mobile apps, we would probably make this stack work across multiple platforms combined with great developer experience that comes in building apps for the Web. This article focuses on Facebook’s React Native providing an overview of the framework.

Native Development

There are many reasons why building a native app is more difficult than working on web. One of the main reasons is that we will have to deal with platform specific APIs for Android and iOS separately. Secondly, its harder to lay things on the screen as we often have to manually compute size and position of various views which will slow down our development velocity.

Even though native development takes longer, there are many reasons why we can produce better experience on mobile than on web. Unlike web, Native gives us access to sophisticated threading model which can help us to parallelise our work onto multiple threads. Additionally, native also gives us access to platform-specific UI components, like maps, date pickers, switches, and navigation stacks.

With all the advantages of native development, what we really want is user experience of native mobile apps combined with developer experience we have when building on the web. If we use JavaScript to call into native APIs, we will have access to all the power of native environment along with ease of developer experience that JavaScript provides.

So What is React Native?

React Native is a JavaScript framework developed by Facebook for writing real, natively rendering mobile applications for iOS and Android.

Key features:

  1. Written using JSX. Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX.
  2. Exposes JavaScript interfaces for platform APIs. React Native apps can access platform features like the phone camera, or the user’s location.
  3. Works separately from the main UI thread. JavaScript code is run on its own thread, separate from the main UI thread. So even when the app is running complex logic, UI can still be smoothly animating or scrolling.

How Does React Native Work?

Since React Native is based on React for the Web, they both share common philosophy. React components return markup from their render function which describes how they should look. First part of the below picture depicts how a markup in React is translated directly to browser’s DOM. Whereas in React Native, it is translated to platform specific components through its built-in bridge.

Conclusion

React Native provides great developer experience. Since it supports features like global undo/redo and hot reloading we don’t have to compile and build to see new changes. This way we don’t lose the state and is especially useful when we are tweaking the UI. Along with ease of development, since React Native is just plain JavaScript, we get the benefit of all the advancements in the language and its ecosystem.