Here are some of the key reasons why you might want to consider React Native for your next development project.
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.
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.
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.
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.
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.
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.
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.
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.