Since its inception, we have seen React Native grow into one of the most popular frameworks for mobile app development. Over the last few years, there have been times when many needed clarification about the future of React Native and if it would be able to keep up with the ever-increasing demands of fluent user experiences. As it happens, React Native has kept up well in delivering best-in-class experiences for small, medium, and large-scale applications.
Let’s look at the cool stuff that has landed in React Native this year and what we can expect in the foreseeable future.
New architecture is here!
There has been a lot of talk about React Native’s new architecture since late 2018. It has finally been unveiled with the release of v0.68 and is available for opt-in with a straightforward flag. The significant development in new architecture deals with the new renderer Fabric and completely replacing the React Native bridge with Turbo Native Modules.
Without diving deep, here are the two pillars of the new architecture:
Turbo Modules – bridgeless React Native
React Native has always relied on the bridge for communication between Native and JS threads, and it was considered the root cause for many performance-related issues. With Turbo Modules, RN has mitigated the use of a bridge and allowed native modules to communicate synchronously with JS. This eliminates the delay caused by the bridge, resulting in immense performance improvements.
For library developers, the RN team has developed a Codegen to create a better developer experience. With the new codegen, developers can scaffold React Native libraries and functions with all type-safety and boilerplate code.
Fabric – a new renderer
Fabric is the new rendering engine from Meta that is already powering the Facebook app. It has unified rendering login in C++, making many great concepts, such as view flattening, available across different platforms. Fabric enables React Concurrent Features on React Native and will pave the way for implementing server-side rendering. It can prioritize specific user interactions to ensure they are handled on priority, making for a user experience like never before.
Here is what the new architecture looks like:
With JSI, type-safety and a much-needed performance boost based on type definition are provided.
Hermes is thriving
Hermes is an open source JavaScript engine optimized for React Native. It has been part of RN for some time and has proven to be a significant performance booster. With massive improvements in time to interact (TTI), Hermes makes app startup time much faster than other JS engines. It also decreases memory utilization and reduces download size. Ever since its release, Hermes has been making significant improvements. It’s now the default JS engine for RN apps and couples with Fabric.
Lean React Native
React Native, after its launch, had several components coupled inside the framework, e.g. DatePickerAndroid, which made it challenging to keep the development of the core framework lean and fast. The project to remove all non-essential elements and put them in a separate repo has been going well with the community’s help, and many of these packages have been removed from the RN core and are now maintained as OS libraries.
Removing these components and modules will allow the core team to move faster, making React Native core lighter and more manageable.
Adding platforms
React’s motto of “Learn Once, Write Everywhere” is being carried forward by React Native with the help of Microsoft:
- RN is now available for writing MacOS & Windows apps. This means that developers can now take their RN apps to PC, Xbox, Surface Tablets, and dual screens.
- Apple tvOS was supported directly by RN for a long time and is still maintained outside of core React Native.
- React Native web, and the adoption of many RN packages for the web platform makes web development with RN an enjoyable experience for developers.
Community contributions
The ability to pool web developers in RN development without much effort allows RN to have broad community support. Several tech companies have published libraries and SDKs to make development faster and easier. Accomplishing several tasks that were thought to be complicated has been made effortless thanks to all of the hard work that the community has done. We won’t be able to mention all of it here, but here are a few of the recent notable libraries from the OS community that solve some really tough problems.
- React Native Flashlist by Shopify – rendering large lists has been one of the most challenging areas of frontend development lately. For eCommerce apps, this can be for a list of products, for social apps this is for feeds, and the list goes on. Flashlight has shown some promising results regarding memory consumption and smooth user interactions.
- React Native Skia by Shopify – with the ever-increasing demands of cool UIs, rendering complex graphics has been challenging. Skip paves the way for developers to deliver excellent graphics within React Native apps.
- React Native Developer Tool by Microsoft – developer experience is one of the critical factors for the growth of React Native. Developer Tool is a new tool from Microsoft that encompasses many areas to create an improved DX.
- React Native Camera Kit by Tesla – many apps today rely on camera feeds to perform ML or AI inferences, and apply lenses or AR effects. The plugin approach of the camera kit makes it a handy tool for implementing these incredible features in RN apps.
Industry adoption
React Native has been on an uptrend since its inception and its ability to serve at scale makes it a reliable choice. This has been proven by its inclusion in the tech stack for large-scale apps built by leading tech companies. Most of them are not just opting for RN to power their apps but contributing to RN repos and the community, making it even more potent. Here are a few notable corporations that are contributing to RN: Microsoft (astonishingly, RN is part of MS Office), Shopify, Tesla, Coinbase, Walmart, etc. Though being used by these companies stamps it as a prime choice for any other startup or enterprise, that it is used at major scale ensures that the framework can serve at any scale. The decision to adopt or not depends on many parameters.
What’s coming next?
React Native and its community have always had plenty of excellent developers; with all the massive improvements we have seen recently, the future looks more promising than ever. Let’s take a look at some additions that are anticipated soon.
Server-side rendering & server components for React Native
React, as a UI library, is leading the way forward for frontend development; awesome ideas like suspense concurrent rendering & server components have made a massive leap in making scalable and highly-performant frontends easier to achieve than ever before. Bringing all of these amazing React features to React Native will revolutionize the world of native mobile, desktop, and tv apps. The new Fabric renderer has laid the framework for this and represents a significant step forward for React Native.
More accessibility
Since Meta’s GAAD pledge, there have been a lot of improvements in the accessibility of features of React Native, and we are anticipating more fixes and improvements in the future.
Optimizations in animations, gestures, and navigation
Concurrent rendering and Fabric’s improvements will improve animations, gestures, and other user interaction performance. With many community libraries coming up in graphics rendering, we can anticipate some fantastic interactions and animations in the near future.
Wrapping up
Since its public launch in 2015, React Native has been one of the top choices for mobile app developers. IMHO, frontend development moves at a faster pace than many other streams in terms of new ideas and frameworks. Facebook’s heavy reliance on RN, along with significant tech giants using it more and more, means that RN will keep thriving for the foreseeable future. With all the great ideas around concurrent rendering landing in React 18, RN is one of the safest bets for startups and enterprises for mobile apps of any scale.
