The New React Native Architecture 🚀

React Native has undergone a major upgrade, introducing a new core, removing Bridge, and introducing modern technologies such as JSI, Fabric, and TurboModules. This isn’t just a behind-the-scenes update, it’s a game-changer that significantly improves performance and resolves long-standing limitations of the old architecture.

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

Old buildings: how bridges work

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

Main features of old buildings

1. Asynchronous communication: JavaScript and native code communicate through serialized JSON messages sent across different threads.
2. Thread separation: • JavaScript thread: handles application logic. • Shadow Thread: Layout processed using Yoga engine. • UI Threads: Updated native interface.
3. Performance bottleneck: The process of serializing and deserializing data creates delays. As a result, apps with lots of animation or interaction will often experience lag.

In this setup, the data must be converted to JSON, sent through the bridge, and then decoded on the other end, adding additional processing time.

New Building: Goodbye Bridge

The new architecture completely removes Bridge and replaces it with JavaScript Interface (JSI). This allows direct communication between JavaScript and native code – no serialization required, no intervening threads.

Key technologies of new architecture

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

Performance comparison

1. JavaScript to Native communication

2. UI rendering (Fabric vs. Yoga)

// 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)

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

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

focus

1. Better performance
• Who are you: Reduce latency in data-intensive operations by up to 90%.
• Fabric: Keep animations and interactions running smoothly.

2. Reduce resource usage
• Turbo boost module: Optimize memory usage and startup time to make applications lighter and faster.

3. Easier to develop
• The code produces: Automatically create bindings between JavaScript and native code, making it easier to develop and maintain modules.

Why move to a new architecture?

Before we dive into the migration steps, here are the reasons why you should consider upgrading:
1. Better performance: Removing bridges reduces latency and improves animation smoothness.
2. Reduce memory usage: TurboModule is only loaded when needed.
3. Concurrent UI rendering: The Fabric renderer integrates with React’s concurrency mode to provide a smoother user experience.
4. For the future: New features and community contributions will be optimized for the new architecture.

Steps to migrate your application

1. Update your React Native version First, make sure your application 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 automatically handle dependencies and settings.

2. Enable new architecture
In React Native, the new architecture is disabled by default. You need to enable it in the local project file.

Android

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

newArchEnabled=true

iOS system

1. Start your project in Xcode.
2. Go to the Build Settings tab.
3. Find Enable new schema and set it to Yes.

3. Verify TurboModules configuration

TurboModule allows native modules to be loaded dynamically.

1. Make sure your native module is compatible with TurboModule.
2. Use CodeGen to automatically generate module bindings:

npx react-native-codegen

4. Check fabric compatibility
Fabric can handle UI updates more efficiently, but requires some adjustments to custom components:
• If you use third-party libraries for native components, make sure they are updated to support Fabric.
• Update your custom native components to use the new rendering pipeline.

5. Migrate native modules to JSI

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

6. Test thoroughly

After completing the migration steps:

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

How about the Expo?

The compatibility of Expo with the React Native New Architecture (including Turbo Modules and Fabric Renderer) is currently the focus of the development team. This new architecture is designed to improve React Native’s performance, reduce latency, and enhance integration with native code. Here’s an explanation of Expo’s support status and its impact on these technologies:

1. Gradually support the new architecture
Expo has begun adopting React Native’s new architecture, rewriting parts of its code base to ensure compatibility with:

• Turbo boost module: New way to dynamically load native modules to reduce initialization time and improve performance.
• Fabric renderer: The new rendering system replaces UIManager, providing smoother rendering and supporting faster UI updates.

Currently, support for these technologies is still in its early stages. Some features are already available in the bare workflow project, while managed workflows are still being optimized.

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 mods are now compatible with Turbo Modules.

3. Support Fabric renderer
Fabric Renderer is gradually being integrated into Expo. This provides improved graphics performance through more efficient rendering and functionality.
Although progress is being made, full support for Fabric is not yet available in managed workflows. In a bare workflow, Fabric can be enabled manually, but requires native project configuration.

4. Hosting Workflows and New Architectures
Hosted workflows are a hallmark of Expo’s simplicity, but they don’t yet fully support the new architecture. The Expo team is working hard to implement these changes in future SDKs. at present:

• Naked workflow projects can take advantage of the new architecture.
• The transition to hosted workflows will take longer due to the complexity of integrating these changes while maintaining Expo’s signature simplicity.

Expo’s support for the new architecture is currently underway, with significant progress being made in bare workflows. Hosted workflows still require more development to fully integrate Turbo Modules and Fabric. For developers who need these technologies now, naked workflows are the best option. If simplicity is your top priority and you can wait, managed workflows are rapidly evolving to incorporate these capabilities.

in conclusion

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

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