Replies: 12 comments 57 replies
-
So exciting!!! I guess it's time to migrate my libs to the new arch now... 😅 |
Beta Was this translation helpful? Give feedback.
-
Question; What would be the new way of accessing the JS Runtime in bridgeless mode? I guess I have two separate use-cases for this: 1. react-native-mmkvThis is a C++ JSI Module, which I currently initialize from a Native Module. • Android: https://github.com/mrousavy/react-native-mmkv/blob/de2bde2638498660f9fa070684bd2ca42bfbfc0f/android/src/main/java/com/reactnativemmkv/MmkvModule.java#L34 I guess in this case it would be possible to create a C++-only JSI TurboModule, then I assume I'd have direct access to the JSI Runtime there, right? 2. react-native-vision-cameraI have a View (the Camera) which I can call methods on, for example In addition to those methods, I also have one C++ method, called I am currently doing this a bit weird, where I just install this JSI function lazily in the global namespace, then look up the component via that - but this can go out of sync, I'd prefer to have that be directly associated to the view, just like Is there a recommended approach for this problem with the new arch? Can I add a custom C++ JSI method to my existing ObjC/Swift view? |
Beta Was this translation helpful? Give feedback.
-
I also have the same setup as @mrousavy in my libraries: I've been trying for the last couple of hours to migrate to a turbo module. I first started with a Kotlin Turbo Module, basing my work on this PR by @WoLewicki, where he migrated the old library to Turbo Modules. The nice part of his implementation is that it is compatible with the old arch. Only after I got it running, I realized it doesn't solve the issue with bridgeless, since there is still no way to access the JS runtime instance, even if it is a turbo module. This PR has been of great help in understanding what changes I have to make, without it I would have been even more lost. Following this discussion, I started to take a look into Cxx Turbo Modules but the guide is quite confusing actually. I've been trying to get it to work but with no success. From what I understand it would also require changes to the native code of the people consuming Cxx Turbo Modules, which I find not ideal at all. While I do not disagree with the move to bridgeless, there is currently no clear migration strategy, it would be great to have:
|
Beta Was this translation helpful? Give feedback.
-
I've just made a PR adding bridgeless compatibility for RNScreens: software-mansion/react-native-screens#1990. For now I use hacky way to get the |
Beta Was this translation helpful? Give feedback.
-
Things taken from bridge on
I can update the list after I go through more libraries and |
Beta Was this translation helpful? Give feedback.
-
Hi @RSNara, thanks for the information! Can I ask what is the best way to report issues back to library maintainers when testing bridgeless mode in an existing application to provide feedback for core RN / third party libraries? My assumption is that for this to work enabled in any application, all libraries must support these changes. If turning this on as an experiment, should we be looking for particular logs / information that would be helpful in reporting (or contributing changes) to packages that need work? |
Beta Was this translation helpful? Give feedback.
-
Hey folks, I'm adding support for bridgeless mode in
|
Beta Was this translation helpful? Give feedback.
-
We added support for Brigeless mode in 6.7.0 RC1 on Lottie React Native (had to tweak some type definitions and bring them in line with the docs / remove paper name from the |
Beta Was this translation helpful? Give feedback.
-
I am trying to find a Problem In RN 0.74-RC's there is a I am on 0.73.6 and the UIBlockViewResolver is introduced in 0.74-rc's & we cant upgrade to 0.74-rc as of yet. Relevant work done(facebook/react-native@24a3dad) for the Is there any other way this can be achieved without having to have the need for UIBlockViewResolver ? |
Beta Was this translation helpful? Give feedback.
-
Hello, I'm experimenting with bringing bridgeless support for Android to https://github.com/react-native-menu/menu. What would be the correct approach to dispatching events in that case? The library implementation utilizes an
However, in that case I get
Which is probably due to the fact that this work is performed within the |
Beta Was this translation helpful? Give feedback.
-
Nice 🔥 🔥 |
Beta Was this translation helpful? Give feedback.
-
I've looked through the discussion on accessing the
How can library authors who are building libraries for bridgeless mode access the |
Beta Was this translation helpful? Give feedback.
-
Important
Exciting news for Bridgeless, starting from React Native 0.74. Read more here
In React Native 0.68, we released the first pillars of the New Architecture: the new native module system (TurboModules) and the new renderer (Fabric). In 0.73 we are excited to release the next stage: Bridgeless Mode!
Read on to learn
What is Bridgeless Mode?
Prior to the New Architecture, the React Native bridge was used to facilitate communication between JavaScript and native. The bridge was a message queue for instructions like rendering views, calling native callables, or registered event handlers, to name a few. The bridge was limiting React Native in its asynchronous design, message batching and serialization costs.
Removing the bridge
A large part of the New Architecture effort is to remove React Native's dependency on the bridge. With TurboModules, we moved native calls off the bridge. With Fabric, we moved component rendering off the bridge.
With Bridgeless mode, we are moving everything else (i.e: the rest of the React Native runtime: error handling, global event emitters, timers, and more) off the bridge and no longer initializing the bridge.
For more background on removing the bridge, see [React Native EU] The New React Native.
Support for Legacy Native Modules
Since we no longer have access to a bridge in Bridgeless mode, we've introduced an interoperability layer to continue support for legacy native modules.
With the interlop layer, most legacy modules registered with React Native will be supported by the new native module system (TurboModules).
See Enabling Bridgeless Mode: Step 3 for more details on what is supported and caveats.
Static ViewConfigs
In addition, Bridgeless Mode optimizes component rendering with Static ViewConfigs.
ViewConfigs tell React what props and events a native component supports. Prior, ViewConfigs were generated at run-time by analyzing a native component's ViewManager.
With Static ViewConfigs, we move this work to build-time by analyzing a native component's Flow or TypeScript spec file. If a native component does not have a spec file, then Bridgeless will fallback to run-time ViewConfig generation.
For more background on this work, see Modernizing React Native's JavaScript.
Enable Bridgeless Mode
Prerequisites for enabling Bridgeless mode:
1. Update Static ViewConfig Babel Plugin
If your project has an explicit dependency on metro-react-native-babel-preset, update it to @react-native/babel-preset@0.73.18
More details in "v0.73 Release Notes/Babel Package Renames".
2. Enable Bridgeless flag in native
Android
In your MainApplication.kt file, update the onCreate function by passing the bridglessEnabled = true flag to the load invocation.
iOS
To enable Bridgeless for your React Native app, you need to override function
bridgelessEnabled
in app’s AppDelegate.mm:3. Migrate legacy APIs
The interop layer ensures compatibility with legacy bridge calls however there may be some APIs that need to be migrated. Review the following instructions and let us know if your use-case isn't covered.
JavaScript
If your JavaScript registers callable JavaScript modules, please migrate to this API:
Before:
After:
Android
Prior to Bridgeless Mode, native modules could access the bridge and call methods on it. In Bridgeless Mode, this call will throw an error.
Instead, move all previous calls on the bridge to reactContext directly
In most cases the method name will be the same. However these are the exceptions. If your method is not available, please comment below and let us know which method and your use-case.
catalystInstance
reactContext
iOS
For APIs that returned a bridge prior to Bridgeless, Bridgeless now returns a "bridge look-a-like" (RCTBridgeProxy) object.
RCTBridgeProxy supports the majority of legacy bridge APIs. Here are the APIs that it doesn't.
(void)loadAndExecuteSplitBundleURL:(NSURL*)bundleURL onError:(RCTLoadAndExecuteErrorBlock)onError onComplete:(dispatch_block_t)onComplete;
@property (nonatomic, assign) int64_t flowID;
@property (nonatomic, assign) CFMutableDictionaryRef flowIDMap;
@property (nonatomic, strong) NSLock *flowIDMapLock;
If you are using any of the above APIs, please comment and let us know which one and what your use-case is.
Feedback Welcome
Bridgeless mode is a huge milestone for New Architecture! Please let us know of any use-cases we may not be supporting today. Thanks!
Beta Was this translation helpful? Give feedback.
All reactions