fix(⬆️): Upgrade to React Native 0.81

apps/example/metro.config.js

@@ -1,12 +1,15 @@
-const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 const path = require('path');
 
 const root = path.resolve(__dirname, '../..');
 const threePackagePath = path.resolve(root, 'node_modules/three');
 
-const extraConfig = {
+const defaultConfig = getDefaultConfig(__dirname);
+
+const customConfig = {
   watchFolders: [root],
   resolver: {
+    ...defaultConfig.resolver,
     extraNodeModules: {
       'three': threePackagePath,
     },
@@ -17,13 +20,13 @@ const extraConfig = {
           type: 'sourceFile',
         };
       }
-      if (moduleName === 'three' || moduleName === 'three/webgpu') { 
+      if (moduleName === 'three' || moduleName === 'three/webgpu') {
         return {
           filePath: path.resolve(threePackagePath, 'build/three.webgpu.js'),
           type: 'sourceFile',
         };
       }
-      if (moduleName === 'three/tsl') { 
+      if (moduleName === 'three/tsl') {
         return {
           filePath: path.resolve(threePackagePath, 'build/three.tsl.js'),
           type: 'sourceFile',
@@ -32,9 +35,11 @@ const extraConfig = {
       // Let Metro handle other modules
       return context.resolveRequest(context, moduleName, platform);
     },
+    assetExts: [...defaultConfig.resolver.assetExts, 'glb', 'gltf', 'jpg', 'bin', 'hdr'],
   },
 
   transformer: {
+    ...defaultConfig.transformer,
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
@@ -44,8 +49,7 @@ const extraConfig = {
   },
 };
 
-const metroConfig = makeMetroConfig(extraConfig);
-metroConfig.resolver.assetExts.push('glb', 'gltf', 'jpg', 'bin', 'hdr');
+const metroConfig = mergeConfig(defaultConfig, customConfig);
 
 
 module.exports = metroConfig;

apps/example/package.json

@@ -25,10 +25,10 @@
     "@tensorflow/tfjs-backend-webgpu": "^4.22.0",
     "@tensorflow/tfjs-vis": "^1.5.1",
     "fast-text-encoding": "^1.0.6",
-    "react": "19.0.0",
-    "react-native": "0.79.2",
-    "react-native-gesture-handler": "^2.17.1",
-    "react-native-macos": "^0.78.3",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-macos": "^0.79.0",
     "react-native-reanimated": "3.19.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-wgpu": "*",
@@ -41,10 +41,10 @@
     "@babel/core": "^7.25.0",
     "@babel/preset-env": "^7.25.0",
     "@babel/runtime": "^7.25.0",
-    "@react-native/babel-preset": "0.78.0",
-    "@react-native/eslint-config": "0.78.0",
-    "@react-native/metro-config": "0.78.0",
-    "@react-native/typescript-config": "0.78.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",
     "@rnx-kit/metro-config": "^2.0.0",
     "@types/node": "^20.14.7",
     "@types/react": "^18.2.6",
@@ -57,7 +57,7 @@
     "eslint-plugin-prettier": "^5.4.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
-    "react-native-test-app": "4.3.10",
+    "react-native-test-app": "4.4.10",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"
   },

packages/webgpu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -79,8 +79,8 @@
     "pngjs": "^7.0.0",
     "prettier": "^3.0.3",
     "puppeteer": "22",
-    "react": "19.0.0",
-    "react-native": "0.79.2",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.23.2",
     "rimraf": "^5.0.7",
     "seedrandom": "^3.0.5",
@@ -116,6 +116,11 @@
     "jsSrcsDir": "src",
     "android": {
       "javaPackageName": "com.webgpu"
+    },
+    "ios": {
+      "componentProviders": {
+        "WebGPUView": "WebGPUView"
+      }
     }
   }
 }

packages/webgpu/scripts/build/dawn-configuration.ts

@@ -1,7 +1,8 @@
 /* eslint-disable max-len */
-import { $, checkFileExists, runAsync } from "./util";
 import { checkDuplicateHeaders } from "../codegen/util";
 
+import { $, checkFileExists, runAsync } from "./util";
+
 export const libs = ["libwebgpu_dawn"] as const;
 
 export const projectRoot = "packages/webgpu";

packages/webgpu/src/NativeWebGPUModule.ts

@@ -1,5 +1,5 @@
-import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
 import { TurboModuleRegistry } from "react-native";
+import type { TurboModule } from "react-native";
 
 export interface Spec extends TurboModule {
   install: () => boolean;

packages/webgpu/src/WebGPUViewNativeComponent.ts

@@ -1,6 +1,6 @@
-import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
-import type { ViewProps } from "react-native";
+import { codegenNativeComponent } from "react-native";
 import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
 
 interface NativeProps extends ViewProps {
   contextId: Int32;