React Native New Fabric Architecture introduced

6 min readOct 6, 2023

React native introduced Fabric architecture in the 2021, the development began in 2018 and Facebook launched new render system called Fabric Architecture.

Fabric architecture is the new render system introduced to unlock the unique capabilities of the React native. It is the conceptual evolution of the existing legacy system.

The core principles to unify the core principles of C++ render logic and improve the interoperability of the host platforms such as Android, iOS, macOS and windows.

Fabric architecture is designed to improve the performance and reliability of the React native apps by introducing a more efficient layout system and a new threading model.

It has three new unlock capabilities.

Efficient Layout system
New threading model
New rendering pipeline.

What is the New threading model?

The Fabric architecture is based on the new threading model that separates the UI thread from the Javascript thread. This allows the UI to be updated independently of the javascript thread which can improve the performance of the application.

Why new threading model launched compared to the legacy threading model?

In the legacy threading model, the UI and Javascript both are running in the same thread. This means any long-running Javascript code could block the UI flow and make the application feel slow and unresponsive.

Let’s understand with the one example, how is it working in old version

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Register = () => {
  const [name, setName] = useState(Constants.Empty);

  const handleName = () => {
    let name = "Joy",
    setName(name + "Richard");
  };

  return (
    <View>
      <Text>Name: {Name}</Text>
      <Button title="Submit" onPress={handleName} />
    </View>
  );
};

export default Register;

In this component, we’re using the useState hook to manage the state of the name variable. We’re also using the Button component from React Native to render a button that register the name when pressed.

“In the previous threading model, the UI and JavaScript were both running on the same thread”. This means that when the handleName function is called, the long-running JavaScript code will block the UI thread and make the app feel slow and unresponsive.
This can be especially problematic in more complex apps with many components and long-running process of JavaScript code.

The new threading model separates the UI and JavaScript into different threads, which allows the UI to be updated independently of the JavaScript thread.

Let’s understand how above code will work in newer version

In the new threading model, the UI and JavaScript are separated into different threads. When the handleName function is called, the long-running JavaScript code will execute on the JavaScript thread, while the UI remains responsive on the UI thread.

When the setName function is called, React Native sends a message to the UI thread to update the UI with the new value of Name.

This separation of threads allows the UI to remain responsive even when the JavaScript thread is busy executing long-running code. It also allows the UI to be updated more frequently, which can improve the performance of the app.

The JavaScript thread is responsible for executing JavaScript code and updating the state of the app. When the state of the app changes, the JavaScript thread sends a message to the UI thread to update the UI.

Overall, the new threading model in React Native’s Fabric architecture is designed to improve the performance and reliability of React Native apps by separating the UI and JavaScript into different threads. This can help to create a smoother and more responsive user experience for the app’s users.

New Layout System

The new layout system in the Fabric architecture is based on Yoga and is designed to be more efficient than the previous layout system. The new layout system uses a more optimized algorithm for calculating the layout of UI components, which can improve the performance of the app. It also introduces new features such as flexbox support for text and images, which can make it easier to create responsive UI layouts.

Let’s understand with an example

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Registration = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Name</Text>
      <View style={styles.buttonContainer}>
        <Button title="Submit" onPress={() => {handleName}} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 20,
    width: '80%',
  },
});

export default Register;

In the previous layout system, React Native used a diffing algorithm to compare the previous and current states of the UI and determine which parts of the UI needed to be updated. This approach could sometimes result in unnecessary updates and performance issues and the application becomes slow.

The new layout system in the Fabric architecture is based on Yoga, a cross-platform layout engine that is designed to be fast and flexible. The new layout system uses a more optimized algorithm for calculating the layout of UI components, which can improve the performance of the app.

By using the flex properties, we can create a responsive layout that adapts to different screen sizes and orientations. By using Yoga as the underlying layout engine, React Native can provide a more powerful and reliable layout system for creating high-performance and responsive UIs.

New Rendering Pipeline:

In the previous rendering pipeline, React Native used a diffing algorithm to compare the previous and current states of the UI and determine which parts of the UI needed to be updated. While this approach was effective, it could sometimes result in unnecessary updates and performance issues.

The new rendering pipeline in the Fabric architecture is based on a declarative model, which means that the UI is defined as a set of declarative components. When the state of the app changes, React Native uses this declarative model to determine which parts of the UI need to be updated. This approach is more efficient and can reduce the number of unnecessary updates, which can improve the performance of the app.

In the example above, when the handleName function is called, React Native uses the declarative model to determine that only the Text component needs to be updated with the new name value. This reduces the number of unnecessary updates and can improve the performance of the app.

The Fabric architecture can help developers to create high-performance and reliable React Native apps.

Migrating to the New React Native Architecture

Here are the essential steps to follow when transitioning from the current architecture to the new one:

Upgrade your app to React Native 0.68 or higher to enable the New Architecture; however, as many enhancements have been made, we strongly advise updating to React Native 0.71+.
Upgrade the application to React Native 0.71.
Verify every third-party library that your program uses; most importantly, they all need to be moved. For many apps out there, this may be a long-standing roadblock.
There are components that are not yet compatible since they will display a red box that reads, “Unimplemented component: <ComponentName>.” If so, kindly inform the library maintainers so that adoption can proceed more quickly.
[Android] Set newArchEnabled=true in gradle.properties.
[iOS] Run RCT_NEW_ARCH_ENABLED=1 pod installs inside the iOS folder.