Replies: 13 comments 61 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.
-
A C++-only TurboModule would definitely solve the problem! Is this good enough for your use-case? If there are problems, I'd love to hear them. |
Beta Was this translation helpful? Give feedback.
-
|
For the first one that'd be fine, but how about the second one (VisionCamera), which is kinda hybrid, I need some C++ JSI methods and some basic view manager Kotlin/ObjC methods for the same view? |
Beta Was this translation helpful? Give feedback.
-
|
@mrousavy, are you referring to these ViewManager methods? Fabric components support commands. e.g: TextInputComponentView: I'll follow up with a few folks, and get you more code pointers! |
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.
-
This is actually a work in progress: facebook/react-native#41925 |
Beta Was this translation helpful? Give feedback.
-
|
Dope, love it! |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! Thank you very much @dmytrorykun @cortinico @RSNara |
Beta Was this translation helpful? Give feedback.
-
|
Just saw a or that makes bridgeless the default on 0.74? What's the final call here? Will we get access to the runtime from non cxx turbo modules? At least for op-sqlite I also need variables and paths not accessible from c++, so it would be great to keep it available there. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ospfranco, thanks for posting.
We are still discussing internally what's the best approach, but we are close to the final answer. We will provide docs and comms as soon as we reach an agreement point in this very same working group! |
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.
-
|
@WoLewicki, mUiMessageQueueThread should definitely not be null. There is probably an issue with the way how Bridgeless mode is configured. Is there a quick and easy way to reproduce this problem? Update: I also left a comment on https://github.com/software-mansion/react-native-screens/pull/1990/files#diff-ad35cf2dc9a86855afc1d2443a42a133ccf0dd8b17589719cb1aab4a81d20604R107 |
Beta Was this translation helpful? Give feedback.
-
Yes, just create a bare project, add |
Beta Was this translation helpful? Give feedback.
-
I replied to it |
Beta Was this translation helpful? Give feedback.
-
|
@WoLewicki, I just replied to your comments! In short, we'll have to create a hand-written component descriptor + shadow node to make this work. Component descriptors have access to the context container. Bridgeless mode puts the image loader into the context container. The component descriptor will (on iOS) pluck the event dispatcher and image loader from the context container, and decorate the shadow node with a C++ object that can call into both. See Image's component descriptor: Cross-platform code: Android impl (noop): iOS impl: The fabric native component has access to the shadow node. So, the fabric native component just grabs that c++ object from the shadow node, and calls into it, which delegates to image loader and event dispatcher under the hood. Please see the < Image /> component code examples! |
Beta Was this translation helpful? Give feedback.
-
|
Following up here. The problem with For 0.74 we'll actually have a better fix in place that handles all the scenarios and doesn't require change in the library code at all |
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.
-
|
@WoLewicki impressive stuff man - how do you get access to the |
Beta Was this translation helpful? Give feedback.
-
|
cpp TurboModule methods get |
Beta Was this translation helpful? Give feedback.
-
|
I was doing the same for Lottie and i came across the same item @WoLewicki found: |
Beta Was this translation helpful? Give feedback.
-
|
@WoLewicki, thank you so much for all this input! I'm just trying to finish up some end of year stuff. So, I haven't had some time to dig into this deeply. I will follow up early next year! I hope that is fine. |
Beta Was this translation helpful? Give feedback.
-
|
Following up on the topic since PR for RNGH seems to be ready:
|
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 @frankcalise!
I think, at the very least, if you could document what libraries were failing, and how, and share that list (+ code pointers) with us, that would be super helpful! If you think repros would also be valuable in understanding/solving the problems, that'd also be great! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, will do! |
Beta Was this translation helpful? Give feedback.
-
|
Hey folks, I'm adding support for bridgeless mode in
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @tido64, You might be interested in this PR that I've been working on: facebook/react-native#42263 Introducing |
Beta Was this translation helpful? Give feedback.
-
|
Hi @tido64, thanks for raising these issues.
I completely agree with you. I created the It is a work that I'd like to tackle somewhen in the near future, but currently we are focus on other priorities. If you can list what APIs you need, I'm sure we can find a way to expose them! :D |
Beta Was this translation helpful? Give feedback.
-
For starters, can we move all the methods in |
Beta Was this translation helpful? Give feedback.
-
|
🤔 Is there a specific reason why you can't/would rather to not import/include Is it just because the word |
Beta Was this translation helpful? Give feedback.
-
This is what I'm currently doing for 0.73 at least. The |
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.
-
Most of the libraries will just work in Bridgeless mode, and we're looking into having the most popular libraries supporting Bridgeless mode by the time 0.74 hits stable. If this is not the case, we'll add a 3rd column then |
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.
-
|
cc. @cortinico who worked on that part specifically.
We are aware that this process is a bit painful, but the New Architecture is still experimental, so we are suggesting to everyone who wants to use it to always be on the latest version of React Native. |
Beta Was this translation helpful? Give feedback.
-
@surajj2223 what you're trying to do here seems wrong. View manipulation should happen inside ViewManagers and not inside TurboModules. Can you elaborate on what you're attempting to achieve? |
Beta Was this translation helpful? Give feedback.
-
|
@cipolleschi the @cortinico The same behavior was doable using SInce I cannot go to 0.74-rc's & the uimanager.UIBlock doesnt work on 0.73 with newArch, hence now, we are trying to query the view using For most of the times, the |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I am still counting on this thread. Is there a better way to achieve this ? |
Beta Was this translation helpful? Give feedback.
-
@surajj2223 why you can't go to 0.74-rcs? The If you can't access the // Retrieve the UIManager from the viewTag
UIManager uiManager =
UIManagerHelper.getUIManagerForReactTag(mReactApplicationContext, viewTag);
// Use the same resolveView method from UIBlockViewResolver
uiManager.resolveView(viewTag);That works on every version on both Old and New Architecture. |
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.
-
|
@cortinico @RSNara can help you out with the Android implementation! 😄 |
Beta Was this translation helpful? Give feedback.
-
|
@fobos531 please look at my PR here: TL;DR: you should use |
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.
-
|
@philIip This is great. I've been able to re-enable bridgeless mode with access to the runtime. In my code I've added the following #ifdef REACT_NATIVE_HAS_JSI_BINDINGS_INSTALLER
#import <ReactCommon/RCTTurboModuleBindingsInstaller.h>
#endif
...
#ifdef REACT_NATIVE_HAS_JSI_BINDINGS_INSTALLER
- (RCTTurboModuleBindingsInstaller*) createBindingsInstaller {
....
}
#endifDoes React compile with version-specific definitions that I can use to |
Beta Was this translation helpful? Give feedback.
-
|
we won't have that but you can do something like
but technically you don't really need it, it's just an optional way to have some compile time safety check. we check for the selector, not the protocol due to perf constraints. on android though, you will probably need an explicit check for BindingsInstallerHolder.h |
Beta Was this translation helpful? Give feedback.
-
|
Hey @olokobayusuf I'm working on I've created a repo to get the initial implementation working. |
Beta Was this translation helpful? Give feedback.
-
|
@philIip thanks! I think I'm all set. @atlj this looks good. It looks like react-native-community/cli#2387 is ready to be merged? I see latest activity was 2 weeks ago, so do you know the current status? |
Beta Was this translation helpful? Give feedback.
-
|
We need to make a documentation update on that PR, but you can still have a cxx turbomodule without that, you would need a |
Beta Was this translation helpful? Give feedback.
-
|
can someone explain this to me please, When claiming there's nothing standing between JavaScript and the Native Code, how is that even possible exactly, there's a js thread and a UI thread that run on two different programming languages, there should be always a bridge of some sort for communication. |
Beta Was this translation helpful? Give feedback.
-
|
@AhmedAyachi great question! There is indeed something that bridges the two worlds, but this is not a single, specific component that works as a serialization point. Instead, React Native uses a technology called JavaScript Interface (JSI). With JSI, we can share memory between JavaScript and C++. We are not constrained anymore to serialize messages through a single component, as the JavaScript runtime can hold direct references to C++ objects and viceversa. |
Beta Was this translation helpful? Give feedback.
-
|
@cipolleschi You're saying, instead of sending serialized messages back and forth through the bridge, we just send a lighter message via JSI that tells c++ to call some sort of function called with params located in that shared memory, so basically instead of sending the whole serialized object, we just send its reference ? |
Beta Was this translation helpful? Give feedback.
-
|
yes, basically yes. But there is no sending around. Different objects in C++ can hold references to different JS objects. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks |
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.
// 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
To enable Bridgeless for your React Native app, you need to override function
bridgelessEnabledin 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.
catalystInstancereactContextiOS
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