React Native Reinvented: A Guide to React Native’s Latest Architecture

In 2022 Facebook rolled out the stable release of React Native new architecture which replaced the older architecture of React Native. In the new architecture, JavaScript Interface (JSI) replaced the bridges for direct inter-communication between native and JavaScript modules and added a few new components. Together all these changes have improved the app performance in the new architecture.

Related read: Migrating to the Latest React Version

Need for New Architecture

In the older architecture, all the async communication between the native and JavaScript modules occurs through the bridges. Every time any event triggered at the JavaScript thread will be converted into a serialized JSON message and then passed to the native module through the bridge. And at the native side that serialized JSON message is deserialized to perform the operation.

As a result of this, the data transfer rate between both threads is very slow due to which sometimes events don’t perform in real-time and get delayed. To overcome all these old architecture issues Facebook introduced React Native new architecture.

New Architecture

There are four main elements that have been introduced in new architecture which are as follows;

1. JavaScript Interface(JSI)-

React Native bridges have been replaced with JavaScript Interface (JSI). JSI allows JavaScript to directly interact with the native module using C++ host objects. The JS holds the references of these objects and can call native modules directly using these references. This eliminates the need for asynchronous communication through serialize/deserialize JSON messages.

2. Fabric-

In the present system, when react app code runs it creates an element tree in JavaScript. Subsequently, in C++ the renderer uses that element tree to generate a react shadow tree from it. Then that shadow tree is used by Yoga, the layout engine for calculating the exact positioning of the UI elements on the screen.

Once it’s done, the shadow tree is transformed into a HostView tree. But this complete process results in a slower transfer rate and unnecessary data being transferred. And due to async communication between JS and UI thread, there can be some lags issue and drop in frames.

Therefore a new rendering system Fabric is introduced which makes the user interface faster and more responsive as compared to the current UI manager by prioritizing user interactions such as scrolling and gestures to execute in sync.

Related read: Event Listener In React Native

3. Turbo Modules-

In React Native’s old architecture, all native modules (Bluetooth, Location, Camera etc) used by JavaScript were initialized during app startup, even if not immediately required. This approach causes unnecessary load on the app.

For example, consider a scenario where a BLE app utilizes Bluetooth functionality only for specific features. In the old architecture, the Bluetooth module would be initialized at startup, causing unnecessary overhead. However, with Turbo Modules, it loads on-demand when the relevant BLE feature is accessed, reducing the app startup time and resource consumption.

Due to JSI implementation, now JavaScript holds references to native modules therefore instead of loading required modules at startup time it can load them only when needed. This will improve React Native app startup time and make it more responsive.

4. Codegen-

CodeGen (Code Generation) is a build-time tool that generates optimized JavaScript code from annotations and typed native modules. This process enhances the interaction between JavaScript and native code, further increasing the app’s performance.

Enabling React Native’s Latest Architecture in New Projects

In Android to enable the new architecture, you have to go to android/gradle.properties and set newArchEnable to true. By default newArchEnable will be false.

And in iOS you have to go to the iOS directory of your project and run the following command;

bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

To confirm whether the new architecture is enabled just start the metro server and you will see { fabric: true } with rootTag.