fix(🍏): add Bridgeless mode support for JSI installation

apps/example/package.json

@@ -18,7 +18,7 @@
     "postinstall": "node -e \"if (process.platform !== 'darwin') { console.log('Skipping iOS pod install on non-macOS environment.'); process.exit(0); } const { execSync } = require('child_process'); execSync('yarn pod:install:ios', { stdio: 'inherit' });\""
   },
   "dependencies": {
-    "@callstack/react-native-visionos": "^0.74.0",
+    "@callstack/react-native-visionos": "^0.79.6",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
     "@react-three/fiber": "^9.4.0",
@@ -28,11 +28,11 @@
     "@tensorflow/tfjs-vis": "^1.5.1",
     "async-mutex": "^0.5.0",
     "fast-text-encoding": "^1.0.6",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.84.0",
     "react-native-gesture-handler": "^2.28.0",
-    "react-native-macos": "^0.79.0",
+    "react-native-macos": "^0.81.2",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-web": "^0.21.2",
@@ -47,14 +47,15 @@
     "@babel/core": "^7.25.0",
     "@babel/preset-env": "^7.25.0",
     "@babel/runtime": "^7.25.0",
-    "@react-native/babel-preset": "0.81.0",
-    "@react-native/eslint-config": "0.81.0",
-    "@react-native/metro-config": "0.81.0",
-    "@react-native/typescript-config": "0.81.0",
+    "@react-native-community/cli": "^18.0.0",
+    "@react-native/babel-preset": "0.84.0",
+    "@react-native/eslint-config": "0.84.0",
+    "@react-native/metro-config": "0.84.0",
+    "@react-native/typescript-config": "0.84.0",
     "@rnx-kit/metro-config": "^2.0.0",
     "@types/node": "^20.14.7",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0",
     "@types/react-test-renderer": "^18.0.0",
     "@types/three": "0.172.0",
     "@webgpu/types": "0.1.65",
@@ -64,11 +65,11 @@
     "eslint-plugin-prettier": "^5.4.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
-    "react-native-test-app": "4.4.10",
-    "react-test-renderer": "18.2.0",
+    "react-native-test-app": "5.0.13",
+    "react-test-renderer": "19.2.3",
     "typescript": "5.0.4"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=22.11"
   }
 }

apps/example/src/Cube/Cubemap.tsx

@@ -108,9 +108,10 @@ export const Cubemap = () => {
           require("../assets/cubemap/posz.jpg"),
           require("../assets/cubemap/negz.jpg"),
         ];
+        // TODO: use response.blob() once RN 0.84 blob bug is fixed
         const promises = imgSrcs.map(async (src) => {
           const response = await fetchAsset(src);
-          return createImageBitmap(await response.blob());
+          return createImageBitmap(await response.arrayBuffer());
         });
         const imageBitmaps = await Promise.all(promises);
 

apps/example/src/Particles/Particles.tsx

@@ -185,8 +185,9 @@ export function Particules() {
     let numMipLevels = 1;
     let texture: GPUTexture;
     {
+      // TODO: use response.blob() once RN 0.84 blob bug is fixed
       const response = await fetchAsset(require("../assets/react.png"));
-      const imageBitmap = await createImageBitmap(await response.blob());
+      const imageBitmap = await createImageBitmap(await response.arrayBuffer());
 
       // Calculate number of mip levels required to generate the probability map
       while (

apps/example/src/RenderBundles/RenderBundles.tsx

@@ -97,10 +97,11 @@ export const RenderBundles = () => {
 
       // Fetch the images and upload them into a GPUTexture.
       // Fetch the images and upload them into a GPUTexture.
+      // TODO: use response.blob() once RN 0.84 blob bug is fixed
       let planetTexture: GPUTexture;
       {
         const response = await fetchAsset(require("../assets/saturn.png"));
-        const imageBitmap = await createImageBitmap(await response.blob());
+        const imageBitmap = await createImageBitmap(await response.arrayBuffer());
 
         planetTexture = device.createTexture({
           size: [imageBitmap.width, imageBitmap.height, 1],
@@ -120,7 +121,7 @@ export const RenderBundles = () => {
       let moonTexture: GPUTexture;
       {
         const response = await fetchAsset(require("../assets/moon.png"));
-        const imageBitmap = await createImageBitmap(await response.blob());
+        const imageBitmap = await createImageBitmap(await response.arrayBuffer());
 
         moonTexture = device.createTexture({
           size: [imageBitmap.width, imageBitmap.height, 1],

apps/example/src/components/useAssets.ts

@@ -10,8 +10,9 @@ export const fetchAsset = async (mod: number) => {
 export const decodeImage = async (mod: number) => {
   const { uri } = Image.resolveAssetSource(mod);
   const response = await fetch(uri);
-  const blob = await response.blob();
-  const image = await createImageBitmap(blob);
+  // TODO: use response.blob() once RN 0.84 blob bug is fixed
+  const arrayBuffer = await response.arrayBuffer();
+  const image = await createImageBitmap(arrayBuffer);
   return image;
 };
 

package.json

@@ -6,9 +6,13 @@
     "apps/*"
   ],
   "resolutions": {
-    "@types/react": "^18.2.44",
+    "@types/react": "^19.2.0",
     "@webgpu/types": "^0.1.42",
-    "@react-three/fiber@^9.4.0": "patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch"
+    "@react-three/fiber@^9.4.0": "patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch",
+    "react-native-reanimated@^4.2.1": "patch:react-native-reanimated@npm%3A4.2.1#./.yarn/patches/react-native-reanimated-npm-4.2.1-8be3b216b9.patch",
+    "react-native-reanimated@4.2.1": "patch:react-native-reanimated@npm%3A4.2.1#./.yarn/patches/react-native-reanimated-npm-4.2.1-8be3b216b9.patch",
+    "react-native-worklets@^0.7.0": "patch:react-native-worklets@npm%3A0.7.2#./.yarn/patches/react-native-worklets-npm-0.7.2-dd0e6c2e74.patch",
+    "react-native-worklets@0.7.2": "patch:react-native-worklets@npm%3A0.7.2#./.yarn/patches/react-native-worklets-npm-0.7.2-dd0e6c2e74.patch"
   },
   "packageManager": "yarn@3.6.1",
   "scripts": {

packages/webgpu/apple/WebGPUModule.h

@@ -2,9 +2,11 @@
 
 #import "RNWebGPUManager.h"
 #import <RNWgpuViewSpec/RNWgpuViewSpec.h>
+#import <React/RCTCallInvokerModule.h>
 #import <React/RCTEventEmitter.h>
 
-@interface WebGPUModule : RCTEventEmitter <NativeWebGPUModuleSpec>
+@interface WebGPUModule
+    : RCTEventEmitter <NativeWebGPUModuleSpec, RCTCallInvokerModule>
 
 + (std::shared_ptr<rnwgpu::RNWebGPUManager>)getManager;
 

packages/webgpu/apple/WebGPUModule.mm

@@ -11,12 +11,20 @@
 namespace jsi = facebook::jsi;
 namespace react = facebook::react;
 
-@implementation WebGPUModule
+@implementation WebGPUModule {
+  std::shared_ptr<react::CallInvoker> _callInvoker;
+}
 
 RCT_EXPORT_MODULE(WebGPUModule)
 
 static std::shared_ptr<rnwgpu::RNWebGPUManager> webgpuManager;
 
+#pragma mark - RCTCallInvokerModule
+
+- (void)setCallInvoker:(std::shared_ptr<react::CallInvoker>)callInvoker {
+  _callInvoker = callInvoker;
+}
+
 + (std::shared_ptr<rnwgpu::RNWebGPUManager>)getManager {
   return webgpuManager;
 }
@@ -43,38 +51,37 @@ - (void)invalidate {
     // Already initialized, ignore call.
     return @true;
   }
-  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)[RCTBridge currentBridge];
-  if (!cxxBridge.runtime) {
-    NSLog(@"Failed to install react-native-wgpu: RCTBridge is not a "
-          @"RCTCxxBridge!");
+
+  RCTBridge *bridge = self.bridge;
+  if (!bridge) {
+    NSLog(@"Failed to install react-native-wgpu: RCTBridge was nil!");
     return [NSNumber numberWithBool:NO];
   }
 
+  // In Bridgeless mode, self.bridge is an RCTBridgeProxy which exposes runtime
+  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
   jsi::Runtime *runtime = (jsi::Runtime *)cxxBridge.runtime;
   if (!runtime) {
     NSLog(@"Failed to install react-native-wgpu: jsi::Runtime* was null!");
     return [NSNumber numberWithBool:NO];
   }
-  std::shared_ptr<react::CallInvoker> jsInvoker = cxxBridge.jsCallInvoker;
-  if (!jsInvoker) {
+
+  if (!_callInvoker) {
     NSLog(@"Failed to install react-native-wgpu: react::CallInvoker was "
           @"null!");
     return [NSNumber numberWithBool:NO];
   }
 
-  if (!jsInvoker) {
-    jsInvoker = cxxBridge.jsCallInvoker;
-  }
   std::shared_ptr<rnwgpu::PlatformContext> platformContext =
       std::make_shared<rnwgpu::ApplePlatformContext>();
-  // TODO: remove allocation here
-  webgpuManager = std::make_shared<rnwgpu::RNWebGPUManager>(runtime, jsInvoker,
-                                                            platformContext);
+  webgpuManager =
+      std::make_shared<rnwgpu::RNWebGPUManager>(runtime, _callInvoker, platformContext);
   return @true;
 }
 
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params {
+  _callInvoker = params.jsInvoker;
   return std::make_shared<facebook::react::NativeWebGPUModuleSpecJSI>(params);
 }
 

packages/webgpu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -61,7 +61,7 @@
     "@types/node": "^20.14.7",
     "@types/pixelmatch": "5.2.4",
     "@types/pngjs": "^6.0.5",
-    "@types/react": "^18.2.44",
+    "@types/react": "^19.2.0",
     "@types/seedrandom": "^3.0.8",
     "@types/ws": "^8.5.10",
     "@webgpu/types": "0.1.65",
@@ -79,8 +79,8 @@
     "pngjs": "^7.0.0",
     "prettier": "^3.0.3",
     "puppeteer": "24.24.1",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react": "19.2.3",
+    "react-native": "0.84.0",
     "react-native-builder-bob": "^0.23.2",
     "react-native-reanimated": "^4.2.1",
     "react-native-web": "^0.21.2",