The New React Native Architecture 🚀

React Native has undergone a major upgrade with the introduction of a new core that removes the Bridge and brings in modern technologies like JSI, Fabric, and TurboModules. This isn’t just a behind-the-scenes update—it’s a game-changer that significantly boosts performance and addresses long-standing limitations of the old architecture.

In this article, we’ll dive into the details, compare performance between the old and new systems, and see how these changes impact developers like us.

The Old Architecture: How the Bridge Worked

In the old architecture, the Bridge was the middleman between JavaScript (where the app logic runs) and the native modules (which interact with platform-specific APIs).

Key Features of the Old Architecture

1. Asynchronous Communication: JavaScript and native code communicated through serialized JSON messages sent across different threads.
2. Thread Separation: • JavaScript Thread: Handled app logic. • Shadow Thread: Processed layouts using the Yoga engine. • UI Thread: Updated the native interface.
3. Performance Bottlenecks: The process of serializing and deserializing data created delays. Apps with heavy animations or interactions often felt laggy because of this.

In this setup, data had to be converted to JSON, sent over the Bridge, and then decoded on the other side, adding extra processing time.

The New Architecture: Bye-Bye Bridge

The new architecture completely removes the Bridge and replaces it with JavaScript Interface (JSI). This enables direct communication between JavaScript and native code—no serialization, no threads in the middle.

Key Technologies in the New Architecture

1. JSI (JavaScript Interface): Allows low-level, direct, and binary communication between JavaScript and native modules.
2. Fabric Renderer: A revamped rendering engine that processes UI updates more efficiently and synchronizes them with JavaScript.
3. TurboModules: Dynamically loads only the native modules you need, speeding up app startup and saving memory.

Performance Comparison

1. JavaScript-to-Native Communication

	Old Architecture (Bridge)	New Architecture (JSI)
Latency	High due to JSON serialization	Low with direct binary communication
Execution Speed	Animations often stuttered	Smooth animations and interactions
Scalability	Limited by fixed-thread model	l Flexible and scalable with JSI

2. UI Rendering (Fabric vs. Yoga)

	Old Architecture (Yoga)	New Architecture (Fabric)
Rendering	Separate async processing	Integrated and synced with JavaScript
Concurrent Mode	Not supported	Fully supported
UI Update Speed	Slower with noticeable delays	Instant and seamless

// Example with Fabric Renderer
import { Animated } from 'react-native';

const fadeAnim = new Animated.Value(0);

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Fabric handles this natively
}).start();

3. Module Loading (TurboModules)

	Old Architecture	New Architecture (TurboModules)
Module Loading	All modules loaded at startup	Loads only when needed
Memory Usage	Higher due to unnecessary modules	Reduced, only active modules in memory
Startup Time	Slower due to preloading	Faster, optimized by demand loading

// TurboModules: On-demand loading
import { TurboModuleRegistry } from 'react-native';

const HeavyModule = TurboModuleRegistry.get('HeavyModule');
if (HeavyModule) {
  HeavyModule.doSomething();
}

Key Takeaways

1. Better Performance
• JSI: Cuts down latency by up to 90% for data-intensive operations.
• Fabric: Keeps animations and interactions running buttery smooth.

2. Lower Resource Usage
• TurboModules: Optimizes memory usage and startup time, making apps lighter and faster.

3. Easier Development
• CodeGen: Automates the creation of bindings between JavaScript and native code, making it easier to develop and maintain modules.

Why Migrate to the New Architecture?

Before diving into the migration steps, here’s why you should consider upgrading:
1. Better Performance: The removal of the Bridge reduces latency and improves animation smoothness.
2. Lower Memory Usage: TurboModules load only when required.
3. Concurrent UI Rendering: The Fabric renderer integrates with React’s Concurrent Mode for smoother user experiences.
4. Future-Proofing: New features and community contributions will be optimized for the new architecture.

Steps to Migrate Your App

1. Update Your React Native Version First, ensure your app is running the latest stable version of React Native that supports the new architecture (0.71+).

npm install react-native@latest

Alternatively, use npx react-native upgrade to handle dependencies and configurations automatically.

2. Enable the New Architecture
In React Native, the new architecture is disabled by default. You need to enable it in your native project files.

Android

1. Open android/gradle.properties.
2. Add or update the following lines:

newArchEnabled=true

iOS

1. Open your project in Xcode.
2. Go to the Build Settings tab.
3. Find Enable New Architecture and set it to YES.

3. Verify TurboModules Configuration

TurboModules allow native modules to load dynamically.

1. Make sure your native modules are compatible with TurboModules.
2. Use CodeGen to automatically generate module bindings:

npx react-native-codegen

4. Check for Fabric Compatibility
Fabric handles UI updates more efficiently but requires some adjustments to custom components:
• If you use third-party libraries with native components, ensure they’re updated to support Fabric.
• Update your custom native components to work with the new rendering pipeline.

5. Migrate Native Modules to JSI

If your app uses custom native modules, migrate them to JSI for improved performance:
• Replace NativeModules with JSI bindings for direct communication.
• Use TurboModuleRegistry for on-demand loading:

6. Test Thoroughly

Once you’ve completed the migration steps:

1. Run your app in debug and production modes.
2. Test all modules and components, paying attention to animations and native calls.
3. Use performance profiling tools to verify improvements.

How About Expo?

The compatibility of Expo with React Native’s new architecture (New Architecture), which includes Turbo Modules and the Fabric Renderer, is currently a key focus for the development team. This new architecture aims to improve React Native’s performance, reduce latency, and enhance integration with native code. Below is an explanation of Expo’s support status and its implications for these technologies:

1. Gradual Support for the New Architecture
Expo has begun adopting React Native’s new architecture by rewriting parts of its codebase to ensure compatibility with:

• Turbo Modules: A new way of dynamically loading native modules, which reduces initialization time and improves performance.
• Fabric Renderer: A new rendering system that replaces the UIManager, offering smoother rendering and enabling faster updates to the UI.

Currently, support for these technologies is in its early stages. Some features are already available in bare workflow projects, while the managed workflow is still undergoing optimizations.

2. Expo and Turbo Modules
The expo-modules-core library has been updated to support the new architecture. This means that many of Expo’s core modules are now compatible with Turbo Modules.

3. Support for the Fabric Renderer
The Fabric Renderer is being gradually integrated into Expo. This provides improved graphical performance through more efficient rendering and features.
While progress is being made, full support for Fabric is not yet available in the managed workflow. In the bare workflow, Fabric can be enabled manually but requires native project configuration.

4. Managed Workflow and the New Architecture
The managed workflow, a hallmark of Expo’s simplicity, does not yet fully support the new architecture. The Expo team is working to implement these changes in a future SDK. For now:

• Bare workflow projects can take advantage of the new architecture.
• The transition for the managed workflow will take longer due to the complexity of integrating these changes while maintaining Expo’s hallmark simplicity.

Currently, Expo’s support for the new architecture is a work in progress, with notable advancements in the bare workflow. The managed workflow still requires more development to fully integrate Turbo Modules and Fabric. For developers who need these technologies now, the bare workflow is the best choice. If simplicity is your priority and you can wait, the managed workflow is evolving rapidly to incorporate these features.

Conclusion

The new React Native core solves many of the bottlenecks of the old architecture, offering a smoother, faster, and more modern development experience.

If you’re still using the old architecture, it’s time to consider switching. The benefits in performance, modularity, and developer productivity make it a no-brainer.