CodeBlanks Logo Icon CodeBlanks

What is the new architecture?

Learn the React Native new architecture.

What is the new architecture?

Starting with React Native 0.68 the new architecture was introduced. Instead of the old bridge, it brings direct JSI-based communication. There are two main parts: Fabric (the new UI renderer) and TurboModules (the new native module system).

The new architecture enables faster rendering, lower memory use and synchronous native calls. From React Native 0.74 onwards it is on by default.

Fabric and TurboModules

Fabric is the rendering layer. It replaces the old UI manager, draws the component tree more efficiently and supports concurrent rendering. TurboModules connects native modules to JS through JSI.

The old requireNativeComponent is replaced by Fabric's codegenNativeComponent. Native modules are registered with TurboModuleRegistry.

Enabling the new architecture

The new architecture is enabled in android/gradle.properties and on iOS in the Podfile. React Native 0.74+ ships it by default; the newArchEnabled=true flag is still added by hand on older projects.

A new Expo project turns it on automatically. Old APIs like Interacitable no longer work; you use react-native-gesture-handler instead.

Practice Add the new architecture flag

Add the flag that turns on the new architecture in the Android gradle.properties file. The value should be true.

Starter code

App.js
# android/gradle.properties
# Add the new architecture flag here

android.useAndroidX=true

Sample solution

App.js
# android/gradle.properties
newArchEnabled=true

android.useAndroidX=true

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does the new architecture remove?

  • The FlatList component
  • The bridge Correct answer
  • The useEffect hook
  • The StyleSheet API

Explanation: The new architecture removes the bridge and gives direct JSI access.

2 Write the new render layer

Question
const Fabric = require('____');
Answer
const Fabric = require('Fabric');

Explanation: Fabric is the new render layer, not the bridge.

All lessons in Expert