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.

Exercise 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.

Show example solution

# android/gradle.properties
newArchEnabled=true

android.useAndroidX=true

Test yourself

What does the new architecture remove?
- The FlatList component
- The bridge
- The useEffect hook
- The StyleSheet API
Show answer

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

Write the new render layer

const Fabric = require('____');

Show answer

const Fabric = require('Fabric');

Next lesson: JSI

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies