How does the Fabric architecture work in React Native?

React Native's Fabric architecture is a performance-focused update to the traditional React architecture. It uses asynchronous rendering and a new reconciliation algorithm to improve app performance and reduce the time it takes to update the UI. Fabric also allows for more efficient use of memory and better handling of complex animations and interactions.

The Problem

In the current architecture, all the UI operations are handled by a sequence of cross-bridge steps. There are four core sections in the current architecture −

• The React code written by the developer (which is very similar to its web counterpart),

• The JavaScript that gets interpreted from what you write,

• A series of elements collectively known as “The Bridge,”

• And the Native side.

The key aspect of the current architecture is that the two realms, JavaScript and Native, are not “aware” of each other. This means that to communicate, they rely on asynchronous JSON messages transmitted across The Bridge. These are sent to the native code with the expectation (but not a guarantee) that they will elicit (manage to get) a response sometime in the future.

The Solution (Fabric Architecture)

The new architecture (Fabric architecture) mainly consists of two main components −

Layout Engine

The layout engine is responsible for calculating the layout of a component and its children.

It uses a new algorithm called Yoga, which is a fork of Facebook's Yoga layout engine. Yoga is more efficient than the traditional layout engine and is able to calculate layout faster and with less memory usage. This results in improved performance for complex and large components.

Renderer

The renderer is responsible for rendering the component on the screen.

It uses a new technique called async rendering. This allows the renderer to work on multiple components at the same time, which improves performance and reduces the amount of time it takes to render a component.

How it works (Fabric Architecture)

• React Native app starts via user interaction.

• The new Fabric architecture loads the native side instead of opening the native modules.

• Then it notifies the JS thread to do their side of things.

• Now the JS side loads all the main.bundle.js which contains all JavaScript and React components logic.

• JS called through the ref native function (the one that was exposed as an object using the JSI API) to Fabric and the shadow node creates the tree as before.

• And at last Yoga does the layout calculation converting from flexbox-based style to host layout.

• Fabric does its thing and shows the UI.

Overall, the Fabric architecture in React Native provides a more efficient and performant way to slayout and render components, resulting in a smoother user experience.