React Native unifies web and mobile development teams by leveraging the same set of technologies on multiple platforms. Since React works the same way on the web as it does on native, any developer familiar with React and JavaScript can create UI components for any platform. In addition, React components render to native UI elements specific to each platform, which produces apps that are more performant than web-based ones on mobile devices.
Here are some of the key reasons why you might want to consider React Native for your next development project.
Developer and Performance Improvements
React Native has several key advantages that accelerate the development cycle and make it easier for JavaScript engineers to get started. Native apps built in Android Studio or Xcode require a recompilation and run on each change. By contrast, React Native offers live reload on each save, like many modern web apps using webpack, and lets developers see their changes without disruptive gaps.
You may have heard of mobile apps built using JavaScript experiencing performance issues due to utilizing tools optimized for the web. To eliminate these inefficiencies, the React Native team has introduced Hermes — a JavaScript engine built specifically for improving JavaScript performance on mobile apps. It reduces the app's time to interactivity and reduces the bundle size by replacing the previous Just-in-Time compiler with Ahead-of-Time compilation. Hermes generates efficient byte code that runs on the device. This has especially significant implications on Android app performance compared to previous React Native apps running on JavaScriptCore.
Shared Architecture Between Web & Mobile Apps
React Native is best viewed as a way to deploy a React application as a mobile iOS or Android application. At the core React Native apps follow the same architectural patterns as web-based React apps. Declarative UIs, state management, request logic, styles can all be the same. When using iOS and Android native SDKs, each follow very different patterns that require different approaches and designs for applications targeting each platform. This can cause variations in feature development effort and velocity on a certain platform and/or larger functional differences to the end-user. With React Native an engineering team doesn’t have to resolve the same technical challenges three times for web, Android, and iOS because they all share the same React core principles.
With a JavaScript and React-based platform, web and native apps can share more code, for example, state management, API requests, and GraphQL queries or mutations. This can help reduce inconsistencies and bugs across a suite of applications since logic doesn’t need to be duplicated across three platforms. React Native’s access to the ecosystem of JavaScript modules, including urql and Sanity, offers the reuse of large portions of an existing web client for new mobile apps.
Design & User Experience
Building the user interfaces is typically the most time-consuming portion of a mobile application when leveraging existing business logic. React Native unifies the experience with a consistent set of components and patterns that let each platform be true to itself. When building user interfaces using UIKit or Android XML, each platform takes a very different approach to layout and design. React Native follows a flexbox-based approach that is very similar to the web and feels comfortable for React developers. Familiar paradigms such as padding, margin, and flex all exist within React Native and work generally the same way, reducing the learning curve.
Navigation
The most impactful difference in user experience between a mobile application and web is navigation and flow. React Navigation is the established standard for implementing stacks, tabs, and drawer navigation. Similar to URL-based routing in a web app, navigation defines how different flows in an application are visited by the user. Most modern apps use a mixture of a tab-based navigation with stacks for each tab. Stack navigation is common for list and detail views or sequential steps like a checkout flow. At Formidable, we have experience with what navigation patterns work best for the user flows and experience. Hamburger or slide-out drawers are common, but unfortunately often end up as a “junk drawer” with low discoverability. Android and iOS users are accustomed to apps working in a consistent way and React Navigation lets developers theme and customize elements that also maintain platform interface guidelines.
Image Assets & Guidelines
Many web apps include numerous SVG assets for icons and images. Unfortunately, the Android and iOS SDKs do not support SVGs out of the box. Xcode requires conversion to PDF, and Android has a custom format for responsive images. Neither support animating assets or dynamic colors based on some state. By contrast, React Native with React Native SVG supports the same SVG content used within the current web app and renders them performantly using platform-specific drawing APIs for both iOS and Android. This is a big win as the ability to use the same assets for all platforms cuts down on diverging artwork and development times.
Animations
Reanimated is a sophisticated animation library for React Native that leverages next-generation TurboModules for improved performance and a consistent experience. TurboModules are a new architecture for the JavaScript layer to communicate with native code without using the React Native bridge using C++, a low-level language that runs on both Android and iOS. Reanimated animates integers, floats and colors using springs or timing. Springs are ideal for natural animations like movement or resizing. Timing animations are useful for situations like ensuring a sequence of animations perform within a certain timeframe. Both animation functions allow for the use of a callback to execute code after the animation. Animations in Reanimated can also be canceled and stacked to create complex and interactive animation sequences.
Native Modules
A React Native app is at its heart a native app, meaning that we're not losing anything by using React Native, we're only gaining. We retain the flexibility of enhancing our existing app with native code using native modules. This means that any native SDK can be used in React Native by simply writing the required native code — a bridge — to make it accessible in to React Native. On a high level, all of React Native is built like this — JavaScript code that interacts with the native code on both platforms, which is why the React Native experience for users is nearly identical to a real native experience.
Deployments & Integrations
Mobile applications typically require significantly more steps than web applications to create a testable, runnable application. Web deployments usually live on a web server that is accessible via a URL. Mobile applications require signing, provisioning, and proper deployment channels via the Apple App Store portal or the Google Play portal. With React Native, we can use existing mobile automation services for building and distributing new versions for testing and app stores.
There are several mobile CI/CD services to choose from, with App Center and Bitrise being some of the more popular.
CodePush
Unlike the web where new releases can be deployed in minutes, each update to the App and Play Stores must go through a review process. This can take anywhere between a couple of hours to a week or more, depending on how busy the App Review teams are. Furthermore, Apple also has a Christmas freeze between December 23-28 when no app updates can be published at all.
With JavaScript-based mobile apps, this restriction can be mitigated to some degree using CodePush. CodePush is an App Center service that enables deploying mobile app updates directly to the user's devices immediately and effectively skip the store review process for these updates. It only possible for JavaScript-only updates: it relies on users downloading a new JavaScript bundle on top to the existing native app, meaning all changes that include any native code will still go through the store review process as usual.
Alternatives to React Native
React Native is far from being the only framework to enable developers to build apps for multiple targets from a single codebase. Some more popular alternatives to React Native are Cordova, Ionic, Xamarin, and Flutter.
Xamarin and Flutter are frameworks from Microsoft and Google respectively — the first is written in C# and the latter in Dart (a programming language designed especially for Flutter). Whereas both of these are strong frameworks, our preference leans towards React Native for the simple reason that React Native apps are written in JavaScript, using React, which allow us to reuse all the tools, frameworks, knowledge and programming patterns from the web.
Cordova and Ionic (built on top of Cordova) apps are written in JavaScript, and you can even use React. However they work by wrapping your HTML/JavaScript code in a native container. This is different from the React Native approach where we write the code in JavaScript, but the components are then mapped to iOS and Android native components to be used under the hood. With Cordova, mobile apps are quick to build and distribute since you can reuse all the web UI code, however it comes with a trade-off of losing some of the native look and feel. Gestures, animations and anything that doesn't exist on the web in the same way are especially tricky to get right.
In contrast, React Native combines the ability to use tools and frameworks we already know incredibly well and allows us to write apps that utilize gestures and animation to provide a near-native experience.
In Conclusion
React is already a fantastic way to build UIs for the web and components are a great way to conceptualize your UI as a function of some data. React Native builds upon React's philosophy of "Learn once, write anywhere," making it easy for React web developers to build native apps. Composable unified UI codebases, instant app updates, and better development tooling make React Native the better way to make native apps.
