Hacking the new bridgeless architecture of React Native (as of 0.73) to boost my app performance

It works! Ta-da! So, this example app loads my home page and my custom attachment processor injects JavaScript code to display an alert. 'Hello' Hey, what's up? It's Takuya here. Welcome back to my channel. I'm back from Italy and I visited Milan and Venice. They were so beautiful and the food was very good. And now, I started working on updating my mobile app. And I wanted to share a quick tip that I found while updating my React Native app. Yeah, so it's gonna be an advanced topic. So hang tight. I mean hacked React Native to make it possible to inter-communicate between the native modules. I have a custom native module that needs to communicate with the WebView to inject JavaScript. that needs to be accomplished on the native layer instead of JavaScript layer to get more performance. Because the mobile app supports displaying images attached to the note because the Inkdrop is a note-taking app. And you can insert images and the notes are rendered in the WebView. So my app has a WebView and back button and yeah edit button toolbar editor toolbar Things like that and a node images So when the app has to display an inserted image You have to load an image data from the local disk and It has to be passed to the WebView somehow It can be done by just by writing a simple JavaScript so you can pass from the React Native layer, so JavaScript WebView So the file is the image file is stored So in a native layer And you have to load the file in the JavaScript layer So you have to load the image data From the native layer to JavaScript and pass it to the WebView by encoding In JSON, which means the image data is binary Data So you have to encode it into base64 So it can be massive and this Part is the biggest bottleneck Okay, so I wanted to skip this so I want to just pass the native layer to WebView directly That's my plan

And I've done this In the current version already, but React Native has been evolved and it got a bridgeless mode So what does that mean? The bridgeless mode Is a new way to interact With the JavaScript layer and native layer so When you interact when you use the native module React Native So when you use a native module from your JS React Native helps you to communicate Uh By providing Bridge And so it makes it easy to communicate with native modules in the JavaScript layer but As I talked here Uh This is the bottleneck so everything You pass to the bridge is encoded in JSON This is the old architecture And React Native Has got a new architecture which provides bridgeless way To communicate with the JS and native layers by providing turbomodule Module and uh for the Like The basic native modules and for the UI modules, they provide Fabric These two technologies help you efficiently use the native modules So I have to update my native module my custom native modules To adopt this new architecture And I use React Native WebView which is the most popular one For using WebView which already supports the new architecture so by simply updating this module you can quickly adopt new architecture But As I said the bridge module is no longer available. So you have to update Somehow to use the to get the Way to communicate directly from my custom native modules to WebView instance this is going to be Undocumented so There is no official way to Do that both in old architecture or new architecture So do that at your own risk Yeah, so the old on the old architecture Here is my custom native module which is called attachment processor which loads images from disk and Send it to WebView And You have to get A react native tag native tag In the javascript layer because react native is a React-based ui system and Every component has its own view tag And you can get a tag

By referring a native tag in the event object I'll cover it later So you can get a view tag and Tell it to Your custom native module And I have a method To set WebView reactor tag here So stores it to the property and When you have to send a image data to WebView This is the part and it injects JavaScript code into an WebView instance And here is the method that injects javascript On the main thread So this is the old implementation And as I mentioned, the old architecture has a bridge module so you can refer the bridge you can get A reference of the bridge module here And you can call module for class method to get an instance of rctuimanager which is an internal module, so You don't you shouldn't know that So you don't have to remember this class and so it manages the native view components so you can get Instance of WebView by calling view for reactor tag with the WebView reactor tag which got in this method Then you can finally get RNCWebView Object here, so this is the React Native WebView class Cool, man and you can Call inject javascript here Yeah, that's the iOS implementation. So Next is Android implementation So here is the attachment module For Android written in java So here is the inject javascript method and the every native module has a reference to react context which provides a method which allows you to get Another native module by specifying a class And so this in this case I get a UI manager module here So it also manages the views native views And it provides a method Called resolveView And you can specify the WebView react tag so you can get a WebView object here and you can inject javascript code your own javascript code on the safe thread here that's the old implementation So let's migrate my code to The new architecture which is going to be turbo native modules so turbo native modules Is Usually called turbo modules Is the new architecture for native implementing native modules And so first the first step is to define the javascript specification So I created an example app To understand how to implement The intercommunication On the new architecture, so I create it Here and I've enabled a new architecture here Then Here is the yeah here is the javascript specification for turbo module

So this module is gonna have Single method which is process Uh, so it's So its arguments is only one it is So it accepts the react view tag And here is the application code It uses the my attachment processor module And the latest version of react native web view And it has a onload event It provides a no And you can get a native event From the parameter 'e' event parameter This object has a target probably and target is the native tag so you can use it for Uh finding an instance of web view in the on the native layer But this is an unofficial way to get So this is undocumented so you have to ignore the typescript error here Yeah, but uh, yeah it is possible so you can use it for getting a instance Okay, that's the javascript side then Let's move on to the ios The next step is module configuration, yeah, yeah module configuration so after defining uh The module specification you have to define the codegen Configuration here in the your package json and I named it inkdrop module spec and The Directory is src/spec And I run the pod-install And you can generate the native code, uh by running a pod-install Okay, then you've got a native module In your ios project here Okay so as you can see here is the there is a native attachment processor spec And this is a generated code by the code gen And yeah, you don't have to understand everything but here is the process method here And this is the method you are gonna implement Yeah, and here is the my implementation so this method accepts a react tag as a parameter and this is a new way to get an instance of the web view. so first you have to get a app delegate object by Calling this doing this so UIApplication has a shared Ui application has a singleton object and You can get it by calling shared application Oh, no Yeah, and it has a delegate property so this is Your app delegate class Yeah, so this is the main Application instance. Yeah, and App delegate has a property App delegate is a subclass of RCTAppDelegate which has root view factory Okay root view factory Which creates the root view for your app And this module Has Yeah, this is so complicated

This module has a private member Called react host The react host I don't understand it. What is it for but it has a property That's necessary to get An instance that is surface presenter, right? Am I right? Okay. Yes. Yes Surface presenter. I don't understand. What is it for? but I guess it is for managing the view View, uh, I don't know. I don't know but it's uh for the it's the fabric It's the internal class of fabric. Yeah You don't have to understand it Then it has a property mounting manager Where is it mounting manager? Yeah That's it And yeah, this class manages mounting process I don't know So maybe it manages when to mount or unmount the views And this class has a component view with this registry Yes That's what I want so this class manages the views by React tag here so you can get An instance of components with tag So, let's use it So unfortunately in the root view factory, uh, the react host property is not public Uh, you can get you can't get a reference to the react host but In objective-c there is a way to Illegally get an access to the private properties by calling valueForKey. So this is the workaround and uh, so i've got successfully got a reference to react host here Then next Is to get a reference to the view registry So by referring the by referring A service presenter and the mounting manager and the component registry Then this class has a method for getting an instance by tag So this is the rct view component view And I guess it is a fabric component that holds an instance of the Native components views so you can use it Uh, so it is it has a content view and this is the what I want so this is then this is the instance of the React native web view and react native web views content view has a private property called webview So you can get an instance or you can get a reference Uh of the web view and by force With value for key here So Then you can finally Inject javascript by calling a variate javascript And display let's display A simple alert here. So let's learn it Let's try it Oh, yeah It works So that did this app example app loads my home page

and my custom attachment processor injects javascript code To display an alert Hello Yeah It works Uh, that's cool now I can quickly send a large binary data, uh directly from my custom module to webview component That's cool Yeah So this is the ios implementation This is the new way Okay, the next step is the android So here is the android example project And here is the attachment processor module the android part was So easier than I expected well This is the process method and with the parameter tag And you can get Yeah to get an instance of another native module You can simply use a fabric ui manager So this is a public member so you don't have to Use any workarounds and This class has a method called resolve view This is the same name as the old one Which is so nice so this is the old one and You can get a ui manager and ui manager has a resolve view. So this is the same Method to get an instance of the specified react tag id And by doing so you can get a rnc web view wrapper This view has a web view property And you can simply call a evaluate javascript on this web view object That's it very simple Uh, let's try it We have native run and dry Yeah It works cool So that's how to Inter-communicate with the native modules on the new architecture I hope it's helpful. Okay, so if you're interested in checking out, uh, the source code I published it on github here inkdrop/RN74Example. So please check it out Yeah, that's it so I hope it's helpful for hacking with React Native It's an unofficial way to improve the performance but Yeah, it was an interesting hack I'll keep improving my mobile app faster and more comfortable Thank you for watching and have a productive day Cheers