Editor’s note: This post was updated on 30 November 2021 to reflect updates to React Native.
In early 2015, Facebook first launched React Native, a framework for building native apps using the React library. Since its initial release, React Native has become a favorite reliable framework of many developers, used by tech giants like Pinterest, Uber, Spotify, and Microsoft. On the other hand, React Native has been the subject of some skepticism, for example, when Airbnb called off its React Native development efforts in 2018, sparking questions about whether React Native was effectively dead.
In this article, we’ll go over some of the features of React Native that quell this rumor. We’ll review the many reasons why a developer should learn React Native, covering some of its recent additions and future plans. Let’s get started!
Table of contents:
- Why should you choose React Native?
- React’s cross-platform components
- React Native’s progress
- What’s next for React Native?
- New architecture status and release
Why should you choose React Native?
Let’s take a look at the major reasons why a developer would choose React Native to build their next mobile application or add a new feature in an existing mobile app.
React’s cross-platform components
Today, fast-paced development doesn’t provide a substantial edge for tech companies, rather, it’s essential to a company’s survival. Enormous competition demands companies move at a faster pace with greater stability.
Let’s imagine a company is managing three different frontend teams, Android, iOS, and web, working on a single product. Not only is this approach costly from a monetary perspective, it can also hinder the product’s pace. React Native allows teams to share up to 95 percent of their code across Android and iOS, which is a huge benefit in the era of agile development.
There is also the possibility of sharing a React Native codebase with a web team as well, which we’ll review in the coming section.
React’s declarative UI
Without a doubt, the declarative UI and component-based architecture have revolutionized frontend development. These features have allowed frontend developers to build large-scale applications that are more predictable and experience fewer bugs.
Since its beginning, React’s motto has been “learn once, write anywhere.” We can leverage these concepts while working on mobile applications, making React Native an essential element of React’s overall progress and growth.
- More predictable UI in mobile applications with fewer bugs
- Developers can contribute to a mobile application if they’re already familiar with React
- If built with consideration, code can be reused across React renderers, including web, mobile, desktop, Unity, and VR
React’s reliability: Tested at scale
Both React and React Native are open source, meaning releases are first tested with Facebook’s production applications, making it easier for other companies to upgrade their applications to newer versions.
Although updates to any framework or build tool are never easy for large-scale applications to implement, if that upgrade has already been tested at Facebook’s scale, teams should feel confident implementing changes in their own applications.
Adoption by major tech giants
Besides being used extensively at Facebook, React Native has been adopted by several tech giants. This list includes Microsoft, which uses React Native for its various products, both as Greenfield and Brownfield. Ecommerce giants Walmart and Shopify are relying on React Native for their mobile applications. Be sure to check out more apps using React Native in production today.
Universal: Deploy apps to any platform
The official React Native project mainly targets Android and iOS mobile platforms. However, the React renderer architecture is flexible and extendable. For example, Microsoft forked the main React Native project and extended it for Windows and macOS desktop platforms. Also, many community forks extend React Native for Linux. Therefore, you can port React Native apps easily into any desktop platform.
As we know, Flutter is a universal framework. Because of these community forks, we can argue that React Native is a universal framework as well, making React Native more competitive with Flutter.
React Native’s progress
Let’s take a look at some of the newer features of React Native, which have made a real impact on the performance, debugging, and management of React Native projects.
Not only has Hermes helped to optimize the performance of React Native apps, it has improved application usability, reduced the application bundle size, and optimized battery usage.
The mobile user community still uses low-end and mid-end devices, which Hermes supports by providing a smaller app bundle and overall near-native performance. Hermes comes with ahead-of-time (AOT) compilation that replaces the previous just-in-time compilation (JIT), improving the app’s time to interaction (TTI) factor.
Better debugging experience with Fast Refresh and Flipper
While React is known for its great developer experience, debugging has been a pain point for React Native developers. Although React Native originally included Hot Module Replacement and Hot Reload, in many cases, it broke. As a solution, Dan Abramov worked on Fast Refresh for React Native, which largely minimized this pain point.
Flipper is one of my personal favorite features, changing how we debug React Native apps. Flipper shipped with a version right after Fast Refresh, i.e., v0.62, and this version also enables React DevTools v4.x, meaning we can leverage its awesome features with React Native as well.
Better management: Lighter and more manageable
The React Native core team started a project that aims to remove all non-essential elements and put them in a separate repo, for example, UI components like WebView and native modules like push notifications. Most of these repos are under react-native-community.
Removing these components and modules will allow the core team to move faster, making React Native core lighter and more manageable.
Growing and thriving community
One important aspect when analyzing an app’s performance is its responsiveness to gestures, scrolling, and animations. The React Native community has introduced a lot of powerful modules for handling this, including react-native-reanimated, react-native-screens, react-native-gesture-handler, and RecyclerListView. Additionally, React Navigation and React Native Navigation are putting in a lot of effort to improve the developer experience and make navigation in apps smoother.
What’s next for React Native?
The most important factor in our assessment about React Native’s future is the plan Facebook has for the library moving forward. In 2020, Facebook planned an entirely new architecture for React Native, establishing what it should look like in the coming years.
The React Native team is building this architecture piece by piece, and some of these pieces are already available in the current release of React Native, including Hermes. Moreover, a few more pieces have already been tested at Facebook internally and will be available for the community soon.
The React Native core team has divided this whole revamp into three phases:
- Native modules
- New renderer
- Better initialization
We will briefly discuss these phases below.
Native modules: Early 2020
Since its beginning, React Native has initialized all native modules at the start of an app. This might include native modules, which at times may not be necessary for certain users. For example, the react-native-device-info module might be necessary only for a rarely used feature, yet we have to initialize this module at the beginning regardless, thus increasing our startup.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
New renderer: Mid-2020
We’ve been hearing this referred to as Fabric, a C++ rewrite of React Native’s UI Layer. It doesn’t require measure and layout effects to be done in a dedicated thread since the new renderer is thread-safe. This will fix many bugs of components that rely heavily on measure API, which include
The new renderer also offers improved type-safety. In addition, all of these UI components are lazily initialized, just like native modules, resulting in faster startup time. This is also under testing for Facebook’s apps.
Initialization: Late 2020
Without a doubt, this new architecture will bring RN much closer to native frameworks in terms of performance and in terms of how it behaves. More importantly, this will make RN apps better for end users. This will also enable RN to benefit from the wonderful features coming in React, like concurrent mode.
New architecture status and release
At the time of writing, the new architecture updates are already tested with most of Facebook’s production apps. The Facebook app is now fully migrated to the new React Native architecture. As we know, an engineering team can’t release a large feature, architectural change, or refactored code without in-depth testing. Also, React Native’s new architectural implementation has been delayed due to the ongoing pandemic.
Fortunately, the React Native team is planning to release the new architectural change shortly. They are working closely with the Expo and Callstack to verify the feasibility of integrating the new architectural update. Additionally, the React Native team is preparing documentation and tutorials targeting the new architecture.
Although the new architecture is not yet mentioned in the v0.67 release candidate, hopefully, we can expect it soon. However, the new architecture is already published to GitHub, and you can test a Fabric-enabled experience with the RNTester app.
I’ve had an amazing experience using React Native in both Greenfield and Brownfield apps. Looking at the awesome features included in React Native, it’s never been a better time to be a React Native developer.
I am happy to discuss your opinion of React Native’s future. Feel free to share in the comments below.
LogRocket: Instantly recreate issues in your React Native apps.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.