Written by Zain Sajjad✏️
There has recently been a lot of debate around the future of React Native. Last year, when Airbnb called off their React Native development, the frontend community became quite skeptical of choosing React Native for their next big product.
This storm got a little calmer after a while. In the meantime, a few big names, including Microsoft and Shopify, declared their adoption of React Native. But a few months back, Facebook’s announcement that it was revamping the iOS Messenger app made no mention of React Native, which sparked yet another debate over whether Facebook was still interested in developing it.
Had it dumped React Native? Does that make it effectively dead? In pursuit of the answer, let’s understand why one should select React Native, how it has progressed in the recent past, and what its future plans are.
It was early 2015 when Facebook launched React Native, a framework for building native apps using React. Since then, RN has been used by not just Facebook, but tech giants that include Microsoft, Walmart, Shopify, and Wix. Let’s take a look at the major reasons why one might select RN for their next mobile application or a new feature in an existing mobile app.
Today, moving fast isn’t just an edge for tech companies — rather, it’s essential. Enormous competition demands companies to move at a faster pace with greater stability.
Managing three different frontend teams — Android, iOS, and web — for a single product is not easy for most companies. This isn’t costly just 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. This can be a huge benefit in the era of agile development.
There is also a possibility of sharing a React Native codebase with web as well. We will discuss this in the next section.
Without a doubt, the concepts of declarative UI and component-based architecture have revolutionized frontend development. It has allowed frontend developers to build large-scale applications that are more predictable with fewer bugs.
The motto of React since its very beginning has been “learn once, write anywhere.” With this motto, React Native becomes an essential element of React’s progress and growth. What if we can leverage all of these amazing concepts while working with mobile applications — isn’t that great?
- More predictable UI in mobile applications with fewer bugs
- More developers can contribute to application’s development if they are already familiar with React
- If architected with consideration, a good amount of code can be reused across React renderers, including web, mobile, Unity, VR.
Since React and React Native have been open-sourced, all of their releases are first tested with Facebook’s production applications. This makes it easier for other companies to upgrade their applications to newer versions.
Though upgrades of any framework or build tool aren’t easy for large-scale applications, if that upgrade has already been tested at Facebook’s scale, other applications can feel confident diving into it without much hesitation.
Besides being used extensively at Facebook, React Native has been adopted by many tech giants. This list includes Microsoft, that is using RN for its various products, both as greenfield and brownfield. E-commerce giants Walmart and Shopify are relying on RN for their mobile applications. Here is a showcase of apps using RN in production today.
Let’s focus on some of the features that have shipped recently with React Native. These features have made a real impact on the performance, debugging, and management of RN projects.
Recently, Dan Abramov worked on Fast Refresh for React Native. While React is known for its great developer experience, debugging has been a pain point for RN developers.
One of the edges that RN has over native application development is its ability to load code changes quickly. Though RN had Hot Module Replacement and Hot Reload, it broke in many cases and pissed off many developers. Now, Fast Refresh has minimized this pain to a large extent.
Flipper is one of my favorite updates coming to RN. It shipped with a version right after Fast Refresh, i.e., v0.62, and this has changed how we debug our RN apps. This version also enables React DevTools v4, meaning we can leverage its awesome features with RN as well.
A year ago, the React Native core team started a slimmening project that aims to remove all non-essential UI components (like WebView) and native modules (like push notifications) into a separate repo. Most of these repos are under react-native-community.
Removing these components and modules will allow the core team to move faster, and React Native core will become lighter and more manageable.
One important aspect when analyzing an app’s performance is its responsiveness to gestures, scrolling, and animations. Thanks to the amazing React Native community, a lot of great modules in this arena have come in lately.
The tip of the iceberg in this regard include react-native-reanimated, react-native-screens, react-native-gesture-handler, and RecyclerListView. Also, React Navigation and React Native Navigation are putting in a lot of effort to improve the developer experience and make navigation in apps smoother.
The most important factor in our assessment about React Native’s future is the plan Facebook has for the library moving forward. Luckily, the plan for 2020 looks promising: Facebook is working on a whole new architecture for RN.
The motivation behind this new architecture is to establish what RN should look like in the next few years. The team is building this architecture piece by piece, and some of these pieces are already available in the current release of RN, 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 in three phases:
- Native modules
- New renderer
- Better initialization
We will briefly discuss these phases below.
Since the beginning, React Native worked in a way that initialized all of our native modules at the start of our 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.
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.
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.
I have been working with React Native at Peekaboo Guru for almost four years now. We have developed apps using React Native from scratch and used it to develop our SDK, which powers several consumer finance modules in many banking apps.
To date, it has been an amazing experience using React Native in both greenfield and brownfield apps. Furthermore, looking at all the awesome features that have been coming to React Native recently, IMHO 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.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
Try it for free.