react-native-wgpu 0.4.1 → 0.5.0

package/lib/typescript/lib/module/Canvas.d.ts

@@ -1,3 +1,8 @@
-export const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export function Canvas({ transparent, ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): React.CElement<import("react-native").ViewProps, View>;
+import { View } from "react-native";
 import React from "react";
 //# sourceMappingURL=Canvas.d.ts.map

package/lib/typescript/lib/module/Canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAQA,+EA0CG;kBAjDsE,OAAO"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAQO;;;;2DAoCN;qBA1CoB,cAAc;kBAD0B,OAAO"}

package/lib/typescript/lib/module/external/ModuleProxy.d.ts

@@ -0,0 +1,7 @@
+export function createModuleProxy(getModule: any): {
+    module: undefined;
+};
+export class OptionalDependencyNotInstalledError extends Error {
+    constructor(name: any);
+}
+//# sourceMappingURL=ModuleProxy.d.ts.map

package/lib/typescript/lib/module/external/ModuleProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleProxy.d.ts","sourceRoot":"","sources":["../../../../module/external/ModuleProxy.js"],"names":[],"mappings":"AAMO;;EAeN;AACD;IACE,uBAEC;CACF"}

package/lib/typescript/lib/module/external/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./reanimated";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/lib/module/external/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../module/external/index.js"],"names":[],"mappings":""}

package/lib/typescript/lib/module/external/reanimated/ReanimatedProxy.d.ts

@@ -0,0 +1,5 @@
+export default Reanimated;
+declare const Reanimated: {
+    module: undefined;
+};
+//# sourceMappingURL=ReanimatedProxy.d.ts.map

package/lib/typescript/lib/module/external/reanimated/ReanimatedProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReanimatedProxy.d.ts","sourceRoot":"","sources":["../../../../../module/external/reanimated/ReanimatedProxy.js"],"names":[],"mappings":";AACA;;EAMG"}

package/lib/typescript/lib/module/external/reanimated/index.d.ts

@@ -0,0 +1,3 @@
+export { registerWebGPUForReanimated } from "./registerWebGPUForReanimated";
+export { default as Reanimated } from "./ReanimatedProxy";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/lib/module/external/reanimated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../module/external/reanimated/index.js"],"names":[],"mappings":""}

package/lib/typescript/lib/module/external/reanimated/registerWebGPUForReanimated.d.ts

@@ -0,0 +1,2 @@
+export function registerWebGPUForReanimated(): void;
+//# sourceMappingURL=registerWebGPUForReanimated.d.ts.map

package/lib/typescript/lib/module/external/reanimated/registerWebGPUForReanimated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerWebGPUForReanimated.d.ts","sourceRoot":"","sources":["../../../../../module/external/reanimated/registerWebGPUForReanimated.js"],"names":[],"mappings":"AAUO,oDA+BN"}

package/lib/typescript/src/Canvas.d.ts

@@ -26,8 +26,10 @@ export interface CanvasRef {
     getContext(contextName: "webgpu"): RNCanvasContext | null;
     getNativeSurface: () => NativeCanvas;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<ViewProps & {
+interface CanvasProps extends ViewProps {
     transparent?: boolean;
-} & React.RefAttributes<CanvasRef>>;
+    ref?: React.Ref<CanvasRef>;
+}
+export declare const Canvas: ({ transparent, ref, ...props }: CanvasProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Canvas.d.ts.map

package/lib/typescript/src/Canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,OAAO,CAAC,MAAM,CAAC;IACb,IAAI,QAAQ,EAAE;QACZ,GAAG,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,YAAY,CAAC;QACtD,uBAAuB,EAAE,CACvB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,KACX,eAAe,CAAC;QACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,MAAM,CAAC;QACvE,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;KAC7C,CAAC;CACH;AAED,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;CACtC;AAED,eAAO,MAAM,MAAM;kBAEW,OAAO;mCA2CnC,CAAC"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,OAAO,CAAC,MAAM,CAAC;IACb,IAAI,QAAQ,EAAE;QACZ,GAAG,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,YAAY,CAAC;QACtD,uBAAuB,EAAE,CACvB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,KACX,eAAe,CAAC;QACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,MAAM,CAAC;QACvE,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;KAC7C,CAAC;CACH;AAED,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;CACtC;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,GAAI,gCAAgC,WAAW,sBAuCjE,CAAC"}

package/lib/typescript/src/external/ModuleProxy.d.ts

@@ -0,0 +1,11 @@
+type ImportType = ReturnType<typeof require>;
+/**
+ * Create a lazily-imported module proxy.
+ * This is useful for lazily requiring optional dependencies.
+ */
+export declare const createModuleProxy: <TModule>(getModule: () => ImportType) => TModule;
+export declare class OptionalDependencyNotInstalledError extends Error {
+    constructor(name: string);
+}
+export {};
+//# sourceMappingURL=ModuleProxy.d.ts.map

package/lib/typescript/src/external/ModuleProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleProxy.d.ts","sourceRoot":"","sources":["../../../../src/external/ModuleProxy.ts"],"names":[],"mappings":"AACA,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,EACvC,WAAW,MAAM,UAAU,KAC1B,OAcF,CAAC;AAEF,qBAAa,mCAAoC,SAAQ,KAAK;gBAChD,IAAI,EAAE,MAAM;CAGzB"}

package/lib/typescript/src/external/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./reanimated";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/external/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/external/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/typescript/src/external/reanimated/ReanimatedProxy.d.ts

@@ -0,0 +1,4 @@
+import type * as ReanimatedT from "react-native-reanimated";
+declare const Reanimated: typeof ReanimatedT;
+export default Reanimated;
+//# sourceMappingURL=ReanimatedProxy.d.ts.map

package/lib/typescript/src/external/reanimated/ReanimatedProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReanimatedProxy.d.ts","sourceRoot":"","sources":["../../../../../src/external/reanimated/ReanimatedProxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,WAAW,MAAM,yBAAyB,CAAC;AAS5D,QAAA,MAAM,UAAU,oBAMd,CAAC;AAGH,eAAe,UAAU,CAAC"}

package/lib/typescript/src/external/reanimated/index.d.ts

@@ -0,0 +1,3 @@
+export { registerWebGPUForReanimated } from "./registerWebGPUForReanimated";
+export { default as Reanimated } from "./ReanimatedProxy";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/external/reanimated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/external/reanimated/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/typescript/src/external/reanimated/registerWebGPUForReanimated.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Register WebGPU objects for Worklets serialization.
+ * This allows GPUDevice, GPUCanvasContext, etc. to be passed to worklets.
+ *
+ * This is called automatically when the module loads if react-native-worklets is installed.
+ */
+export declare const registerWebGPUForReanimated: () => void;
+//# sourceMappingURL=registerWebGPUForReanimated.d.ts.map

package/lib/typescript/src/external/reanimated/registerWebGPUForReanimated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerWebGPUForReanimated.d.ts","sourceRoot":"","sources":["../../../../../src/external/reanimated/registerWebGPUForReanimated.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,YA4BvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -65,6 +65,7 @@
     "@types/seedrandom": "^3.0.8",
     "@types/ws": "^8.5.10",
     "@webgpu/types": "0.1.65",
+    "baseline-browser-mapping": "^2.9.14",
     "clang-format": "^1.8.0",
     "del-cli": "^5.1.0",
     "eslint": "9.35.0",
@@ -81,7 +82,9 @@
     "react": "19.1.0",
     "react-native": "0.81.4",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-reanimated": "^3.16.0",
     "react-native-web": "^0.21.2",
+    "react-native-worklets": "^0.7.0",
     "rimraf": "^5.0.7",
     "seedrandom": "^3.0.5",
     "teapot": "^1.0.0",
@@ -94,7 +97,17 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-worklets": ">=0.7.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    }
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/Canvas.tsx

@@ -1,11 +1,6 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import React, { useImperativeHandle, useRef, useState } from "react";
 import type { ViewProps } from "react-native";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
 
@@ -49,10 +44,12 @@ export interface CanvasRef {
   getNativeSurface: () => NativeCanvas;
 }
 
-export const Canvas = forwardRef<
-  CanvasRef,
-  ViewProps & { transparent?: boolean }
->(({ onLayout: _onLayout, transparent, ...props }, ref) => {
+interface CanvasProps extends ViewProps {
+  transparent?: boolean;
+  ref?: React.Ref<CanvasRef>;
+}
+
+export const Canvas = ({ transparent, ref, ...props }: CanvasProps) => {
   const viewRef = useRef(null);
   const [contextId, _] = useState(() => generateContextId());
   useImperativeHandle(ref, () => ({
@@ -67,16 +64,13 @@ export const Canvas = forwardRef<
       if (!viewRef.current) {
         throw new Error("[WebGPU] Cannot get context before mount");
       }
-      let size;
-      if (Platform.OS === "web") {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        size = viewRef.current.getBoundingClientRect();
-      } else {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        size = viewRef.current.unstable_getBoundingClientRect();
-      }
+      // getBoundingClientRect became stable in RN 0.83
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = viewRef.current as any;
+      const size =
+        "getBoundingClientRect" in view
+          ? view.getBoundingClientRect()
+          : view.unstable_getBoundingClientRect();
       return RNWebGPU.MakeWebGPUCanvasContext(
         contextId,
         size.width,
@@ -94,4 +88,4 @@ export const Canvas = forwardRef<
       />
     </View>
   );
-});
+};

package/src/external/ModuleProxy.ts

@@ -0,0 +1,30 @@
+// https://github.com/mrousavy/react-native-vision-camera/blob/main/package/src/dependencies/ModuleProxy.ts
+type ImportType = ReturnType<typeof require>;
+
+/**
+ * Create a lazily-imported module proxy.
+ * This is useful for lazily requiring optional dependencies.
+ */
+export const createModuleProxy = <TModule>(
+  getModule: () => ImportType
+): TModule => {
+  const holder: { module: TModule | undefined } = { module: undefined };
+
+  const proxy = new Proxy(holder, {
+    get: (target, property) => {
+      if (target.module == null) {
+        // lazy initialize module via require()
+        // caller needs to make sure the require() call is wrapped in a try/catch
+        target.module = getModule() as TModule;
+      }
+      return target.module[property as keyof typeof holder.module];
+    },
+  });
+  return proxy as unknown as TModule;
+};
+
+export class OptionalDependencyNotInstalledError extends Error {
+  constructor(name: string) {
+    super(`${name} is not installed!`);
+  }
+}

package/src/external/index.ts

@@ -0,0 +1 @@
+export * from "./reanimated";

package/src/external/reanimated/ReanimatedProxy.ts

@@ -0,0 +1,19 @@
+import type * as ReanimatedT from "react-native-reanimated";
+
+import {
+  OptionalDependencyNotInstalledError,
+  createModuleProxy,
+} from "../ModuleProxy";
+
+type TReanimated = typeof ReanimatedT;
+
+const Reanimated = createModuleProxy<TReanimated>(() => {
+  try {
+    return require("react-native-reanimated");
+  } catch (e) {
+    throw new OptionalDependencyNotInstalledError("react-native-reanimated");
+  }
+});
+
+// eslint-disable-next-line import/no-default-export
+export default Reanimated;

package/src/external/reanimated/index.ts

@@ -0,0 +1,2 @@
+export { registerWebGPUForReanimated } from "./registerWebGPUForReanimated";
+export { default as Reanimated } from "./ReanimatedProxy";

package/src/external/reanimated/registerWebGPUForReanimated.ts

@@ -0,0 +1,43 @@
+// Declare global WebGPU worklet helper functions (installed by native module)
+declare function __webgpuIsWebGPUObject(obj: unknown): boolean;
+declare function __webgpuBox(
+  obj: object
+): { unbox: () => object; __boxedWebGPU: true };
+
+let isRegistered = false;
+
+/**
+ * Register WebGPU objects for Worklets serialization.
+ * This allows GPUDevice, GPUCanvasContext, etc. to be passed to worklets.
+ *
+ * This is called automatically when the module loads if react-native-worklets is installed.
+ */
+export const registerWebGPUForReanimated = () => {
+  if (isRegistered) {
+    return;
+  }
+  isRegistered = true;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { registerCustomSerializable } = require("react-native-worklets");
+
+    registerCustomSerializable({
+      name: "WebGPU",
+      determine: (value: object): value is object => {
+        "worklet";
+        return __webgpuIsWebGPUObject(value);
+      },
+      pack: (value: object) => {
+        "worklet";
+        return __webgpuBox(value);
+      },
+      unpack: (boxed: { unbox: () => object }) => {
+        "worklet";
+        return boxed.unbox();
+      },
+    });
+  } catch {
+    // react-native-worklets not installed, skip registration
+  }
+};

package/src/main/index.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import { registerWebGPUForReanimated } from "../external";
 import WebGPUModule from "../NativeWebGPUModule";
 
 export * from "../Canvas";
@@ -8,177 +8,10 @@ export * from "../hooks";
 
 export { default as WebGPUModule } from "../NativeWebGPUModule";
 
-const GPU: any = {};
-GPU[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPU";
-};
-
-const GPUAdapter: any = {};
-GPUAdapter[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUAdapter";
-};
-
-const GPUAdapterInfo: any = {};
-GPUAdapterInfo[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUAdapterInfo";
-};
-
-const GPUBindGroup: any = {};
-GPUBindGroup[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUBindGroup";
-};
-
-const GPUBindGroupLayout: any = {};
-GPUBindGroupLayout[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUBindGroupLayout";
-};
-
-const GPUBuffer: any = {};
-GPUBuffer[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUBuffer";
-};
-
-const GPUCanvasContext: any = {};
-GPUCanvasContext[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCanvasContext";
-};
-
-const GPUCommandBuffer: any = {};
-GPUCommandBuffer[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCommandBuffer";
-};
-
-const GPUCommandEncoder: any = {};
-GPUCommandEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCommandEncoder";
-};
-
-const GPUCompilationInfo: any = {};
-GPUCompilationInfo[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCompilationInfo";
-};
-
-const GPUCompilationMessage: any = {};
-GPUCompilationMessage[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUCompilationMessage";
-};
-
-const GPUComputePassEncoder: any = {};
-GPUComputePassEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUComputePassEncoder";
-};
-
-const GPUComputePipeline: any = {};
-GPUComputePipeline[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUComputePipeline";
-};
-
-const GPUDevice: any = {};
-GPUDevice[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUDevice";
-};
-
-const GPUDeviceLostInfo: any = {};
-GPUDeviceLostInfo[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUDeviceLostInfo";
-};
-
-const GPUError: any = {};
-GPUError[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUError";
-};
-
-const GPUExternalTexture: any = {};
-GPUExternalTexture[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUExternalTexture";
-};
-
-const GPUPipelineLayout: any = {};
-GPUPipelineLayout[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUPipelineLayout";
-};
-
-const GPUQuerySet: any = {};
-GPUQuerySet[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUQuerySet";
-};
-
-const GPUQueue: any = {};
-GPUQueue[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUQueue";
-};
-
-const GPURenderBundle: any = {};
-GPURenderBundle[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderBundle";
-};
-
-const GPURenderBundleEncoder: any = {};
-GPURenderBundleEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderBundleEncoder";
-};
-
-const GPURenderPassEncoder: any = {};
-GPURenderPassEncoder[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderPassEncoder";
-};
-
-const GPURenderPipeline: any = {};
-GPURenderPipeline[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPURenderPipeline";
-};
-
-const GPUSampler: any = {};
-GPUSampler[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUSampler";
-};
-
-const GPUShaderModule: any = {};
-GPUShaderModule[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUShaderModule";
-};
-
-const GPUTexture: any = {};
-GPUTexture[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUTexture";
-};
-
-const GPUTextureView: any = {};
-GPUTextureView[Symbol.hasInstance] = function (instance: object) {
-  return "__brand" in instance && instance.__brand === "GPUTextureView";
-};
-
-global.GPU = GPU;
-global.GPUAdapter = GPUAdapter;
-global.GPUAdapterInfo = GPUAdapterInfo;
-global.GPUBindGroup = GPUBindGroup;
-global.GPUBindGroupLayout = GPUBindGroupLayout;
-global.GPUBuffer = GPUBuffer;
-global.GPUCanvasContext = GPUCanvasContext;
-global.GPUCommandBuffer = GPUCommandBuffer;
-global.GPUCommandEncoder = GPUCommandEncoder;
-global.GPUCompilationInfo = GPUCompilationInfo;
-global.GPUCompilationMessage = GPUCompilationMessage;
-global.GPUComputePassEncoder = GPUComputePassEncoder;
-global.GPUComputePipeline = GPUComputePipeline;
-global.GPUDevice = GPUDevice;
-global.GPUDeviceLostInfo = GPUDeviceLostInfo;
-global.GPUError = GPUError;
-global.GPUExternalTexture = GPUExternalTexture;
-global.GPUPipelineLayout = GPUPipelineLayout;
-global.GPUQuerySet = GPUQuerySet;
-global.GPUQueue = GPUQueue;
-global.GPURenderBundle = GPURenderBundle;
-global.GPURenderBundleEncoder = GPURenderBundleEncoder;
-global.GPURenderPassEncoder = GPURenderPassEncoder;
-global.GPURenderPipeline = GPURenderPipeline;
-global.GPUSampler = GPUSampler;
-global.GPUShaderModule = GPUShaderModule;
-global.GPUTexture = GPUTexture;
-global.GPUTextureView = GPUTextureView;
-
 WebGPUModule.install();
 
+registerWebGPUForReanimated();
+
 if (!navigator) {
   // @ts-expect-error Navigation object is more complex than this, setting it to an empty object to add gpu property
   navigator = {