React Native’s re-architecture in 2020

By WalkingTree   July 08, 2020

React Native was first introduced in 2015 for developing cross-platform applications with native capabilities using the ReactJS framework. The React Native re-architecture,  originally announced in 2018 is an undergoing effort by the Facebook team to make the platform more robust and address some of the most common bugs brought by developers.

Let’s take a look at how this re-architecture will improve both app performance and development velocity.

The old architecture

React Native aims to be a platform-agnostic solution. The framework’s main goal is to allow developers to write Javascript React code while React Native can deploy its mechanisms to transcribe the React reconciliation tree into something interpretable. Which basically means: Displaying UI correctly and accessing native capabilities

There are 3 parallel threads running in every React Native app:

• The JS thread is where all the JavaScript code is read and compiled, and where the business logic of the app happens.
• The Native thread is responsible for handling the user interface.
• The Shadow thread is where the layout is calculated. It uses Facebook’s own layout engine called Yoga.

To communicate between the JS thread and the Native thread, Bridge is used.

The new architecture 

The React Native re-architecture will see the deprecation of the bridge in favor of a new element called the JavaScript Interface. It is an enabler for Fabric and TurboModules.

The JSI brings in a few exciting improvements:

• JS bundle is not bound to the JSC anymore, it can use any other JS engine.
• By using JSI, JavaScript can hold a reference to C++ Host Objects and invoke methods on them.
• Allows direct control over the native modules.

Read on to know more about React Native’s re-architecture.