What is the new architecture?
- React Native course
- Expert
- Lesson 1/47
- 5 min
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
# android/gradle.properties
# Add the new architecture flag here
android.useAndroidX=trueSample solution
# android/gradle.properties
newArchEnabled=true
android.useAndroidX=trueQuestions 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
const Fabric = require('____');
const Fabric = require('Fabric');
Explanation: Fabric is the new render layer, not the bridge.