👋 Hello! This example app loads my home page and uses a custom attachment processor to inject JavaScript code for alerts.

🇮🇹 I recently returned from Italy, visiting Milan and Venice. They were beautiful, and the food was great! Now, I'm updating my mobile app and want to share a tip on inter-communication between native modules in React Native.

🔧 I hacked React Native to enable communication between native modules and the WebView for better performance. The app supports displaying images in notes, which are rendered in the WebView.

📁 When displaying an image, data must be loaded from the local disk and passed to the WebView. This involves encoding image data in base64, which can be a bottleneck. My goal is to pass data directly from the native layer to the WebView.

🚀 React Native has evolved with a bridgeless mode for improved interaction between JavaScript and native layers. This new architecture includes TurboModules and Fabric for efficient native module usage.

🛠️ I need to update my custom native modules to adopt this new architecture. The React Native WebView already supports it, allowing for quick updates.

⚠️ Note that the new architecture lacks official documentation for direct communication between custom native modules and WebView, so proceed at your own risk.

📜 In the old architecture, my custom native module, attachment processor, loads images from disk and sends them to the WebView. You need to get a React Native tag in the JavaScript layer to communicate with the native module.

📱 For iOS, the implementation involves getting a reference to the WebView and injecting JavaScript code. The Android implementation is simpler, using the UIManager to resolve the view.

💻 The new architecture allows for easier communication. I created a JavaScript specification for the TurboModule and configured the module in the package JSON.

🎉 After implementing the new architecture, I successfully injected JavaScript to display an alert in the iOS simulator and Android.

📂 For those interested, the source code is available on GitHub at inkdrop/RN74Example. I hope this helps improve performance in React Native!

🙌 Thank you for watching, and have a productive day!