Understanding Bridgeless Mode in React Native 0.73: Enhancing Performance and Communication without the Bridge

In React Native’s Bridgeless Mode, communication between JavaScript and native code is facilitated through an evolved system that no longer relies on the traditional “bridge” for message passing. Instead of the classic bridge, React Native now uses TurboModules, Fabric, and an interop layer to enable smooth and direct communication between JavaScript and native code, without the overhead of the old bridge. Here’s a breakdown of how communication works in this new architecture:

1. TurboModules:

TurboModules, introduced in earlier versions of the New Architecture (since React Native 0.68), play a crucial role in enabling communication between JavaScript and native code without the bridge. TurboModules allow native modules to be loaded directly and asynchronously, bypassing the traditional bridge.

• How TurboModules work: TurboModules provide a mechanism to call native methods from JavaScript in a way that is more efficient than the old bridge system. It uses direct JNI (Java Native Interface) calls on Android or Objective-C calls on iOS, which allows for faster and more efficient communication. It’s designed for high-performance and reduces the overhead of serialization and message batching present in the old bridge.
• Why it’s better than the old bridge:
  • Direct communication: Native modules can be loaded and invoked directly without passing through the bridge.
  • Asynchronous loading: Native modules are loaded asynchronously, meaning JavaScript doesn’t need to wait for the native code to load before it continues execution, improving app startup times.
  • Reduced overhead: TurboModules use fewer resources by eliminating message serialization and queuing that previously slowed down communication.

2. Fabric Renderer:

The Fabric Renderer is responsible for rendering UI components. It’s part of the new rendering engine in React Native, which moves the rendering logic off the bridge and enables native views to be rendered directly from JavaScript in a more efficient manner.

• How Fabric works: The Fabric renderer takes advantage of react-native-ffi (Foreign Function Interface) to communicate with the native rendering layer directly. This means that rendering of components happens asynchronously, in parallel with JavaScript execution, without the bottleneck of the bridge.
• Benefits:
  • Performance improvements: Components can be rendered in parallel with JavaScript code execution, leading to faster UI updates.
  • UI updates without the bridge: Direct access to the native view layer eliminates unnecessary serialization, improving rendering speed.

3. Interop Layer for Legacy Native Modules:

In Bridgeless Mode, while most communication bypasses the traditional bridge, legacy native modules still require compatibility. The React Native team introduced an interop layer to maintain support for legacy native modules, allowing them to interact with TurboModules without needing the old bridge.

• How the Interop Layer works:
  • This layer acts as a translator between legacy modules that were built using the old bridge system and the new TurboModules architecture. It ensures that the calls to legacy modules are properly converted to a form that TurboModules can handle, without needing to initialize the old bridge.
  • This layer ensures compatibility, so developers can continue using existing modules in the new architecture, while also taking advantage of TurboModules’ benefits.

4. Communication Process in Bridgeless Mode:

In Bridgeless Mode, JavaScript communicates with native code in the following way:

1. JavaScript calls native methods via TurboModules, which are loaded asynchronously without the bridge.
2. Fabric handles UI rendering directly, bypassing the old bridge system for faster component updates.
3. If legacy modules are involved, the interop layer makes sure they continue to work without relying on the bridge.
4. Native modules are registered and invoked using the new API calls that work with TurboModules and Fabric.

5. Bridgeless Mode and Error Handling:

Error handling in Bridgeless Mode is more efficient, as it no longer requires the serialization and message batching process that the old bridge used. Errors can be thrown and caught natively, while also being communicated directly to the JavaScript side without the need for the old bridge message queue.

6. JavaScript and Native Code Communication in Action:

• TurboModule Registration: When you create a native module (e.g., FooModule) in Bridgeless Mode, you’ll register it using the new TurboModules API. Instead of using the bridge to pass messages back and forth, TurboModules communicate directly.

  Example (JavaScript side):

  global.RN$registerCallableModule('FooModule', () => FooModule);

• Calling Native Methods: On the native side, instead of relying on the old bridge to call JavaScript methods, the communication happens directly, either through TurboModules or using the interop layer for legacy modules.

  Example (Native side in Android):

  reactContext.getJSModule(AppRegistry.class);

• In Bridgeless Mode, this call will interact with the TurboModules layer or, if it’s a legacy module, the interop layer, bypassing the bridge.

7. Migration from Bridge-based to Bridgeless Communication:

When migrating your app to Bridgeless Mode, you’ll need to update how native modules are registered and how they communicate with JavaScript. Here’s a general guide:

• JavaScript: Move from the BatchedBridge registration to global.RN$registerCallableModule.
• Android: Directly call methods on reactContext instead of using the deprecated bridge methods.
• iOS: Use the RCTBridgeProxy object for certain legacy methods that were previously bridge-based.

 

Bridgeless Mode revolutionizes the way React Native applications communicate with native code. By completely removing the bridge, it enhances performance, simplifies architecture, and ensures that communication between JavaScript and native code is faster and more efficient. With TurboModules, Fabric, and the interop layer, React Native developers now have a robust framework for building high-performance apps with reduced complexity. As Bridgeless Mode continues to evolve, it will help React Native reach new heights of speed, scalability, and flexibility.