BridgeLess Mode in Rect Native (0.73)

React Native Bridge

It was utilized to facilitate communication between JavaScript and native components. The bridge acted as a message queue for tasks like rendering views, invoking native functions, and managing registered events.

The asynchronous design, message batching, and serialization costs of the bridge were placing constraints on React Native.

Deprecating Bridge

In the new architecture, the React Native bridge has been eliminated and substituted with Turbo Modules. The integration of Fabric has facilitated the relocation of component rendering away from the bridge.

With the Bridgeless mode, We are moving the following

• Error handling
• Global Event emitters
• Timers

Support for Legacy Native Modules

Interoperability layer to continue support for legacy native modules

Static ViewConfigs

• Optimises component rendering with Static

Enable Bridgeless Mode

1. Update Static ViewConfig Babel Plugin

To update the dependency on metro-react-native-babel-preset to @react-native/babel-preset@0.73.18, you can typically do this by modifying your project's package.json file. Locate the dependencies or devDependencies section (depending on whether this is a production or development dependency), and update the version for metro-react-native-babel-preset to the desired version:

{
  "dependencies": {
    // other dependencies
    "metro-react-native-babel-preset": "@react-native/babel-preset@0.73.18"
  }
}

2. Enable Bridgeless flag in native

Android

// MyMainApplication.kt

import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load

override fun onCreate() {
  ...
  if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
    // Set bridgelessEnabled to true here to enable Bridgeless, it's false by default
-   load()
+   load(bridgelessEnabled = true)
  }
  ...
}

IOS

// AppDelegate.mm
 
- (BOOL)bridgelessEnabled
{
    return YES;
}

3. Migrate legacy APIs

The interoperability layer guarantees compatibility with legacy bridge calls, although certain APIs may require migration. Please review the provided instructions and inform us if your specific use-case is not addressed.

Reference :

React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more · React Native

https://github.com/reactwg/react-native-new-architecture/discussions/154