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
- 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 :
https://github.com/reactwg/react-native-new-architecture/discussions/154