react-native-wgpu 0.1.8 → 0.1.9

package/lib/typescript/lib/commonjs/Offscreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Offscreen.d.ts","sourceRoot":"","sources":["../../../commonjs/Offscreen.js"],"names":[],"mappings":";AAOA;IAGE,qCAIC;IAND,oBAAqB;IACrB,wBAAyB;IAEvB,WAAkB;IAClB,YAAoB;IACpB,mCAAkD;IAEpD,mCAGC;IAID,4EAMC;IACD,8BAGC;IACD,kEAGC;IACD,qEAGC;IACD,iCAGC;IACD,oBA4BC;CACF;AAED;IAIE,yBAGC;IAND,gBAA6B;IAC7B,cAAe;IACf,aAAc;IAEZ,YAAoB;IACpB,gCAA6D;IAE/D,mBAKC;IACD,oBAKC;IACD,kCASC;IACD,yBAMC;IACD,2BAKC;CACF"}
+{"version":3,"file":"Offscreen.d.ts","sourceRoot":"","sources":["../../../commonjs/Offscreen.js"],"names":[],"mappings":";AAOA;IAGE,qCAIC;IAND,oBAAqB;IACrB,wBAAyB;IAEvB,WAAkB;IAClB,YAAoB;IACpB,mCAAkD;IAEpD,mCAGC;IAID,4EAMC;IACD,8BAGC;IACD,kEAGC;IACD,qEAGC;IACD,iCAGC;IACD,oBA4BC;CACF;AAED;IAIE,yBAGC;IAND,gBAA6B;IAC7B,cAAe;IACf,aAAc;IAEZ,YAAoB;IACpB,gCAA6D;IAE/D,gBAEC;IACD,mBAKC;IACD,oBAKC;IACD,kCASC;IACD,yBAMC;IACD,2BAKC;CACF"}

package/lib/typescript/lib/commonjs/utils.d.ts

@@ -1,5 +1,9 @@
 export const __esModule: boolean;
 export function warnIfNotHardwareAccelerated(adapter: any): void;
-export function useCanvasEffect(effect: any, deps?: any[]): _react.MutableRefObject<null>;
+export function useGPUContext(): {
+    ref: _react.MutableRefObject<null>;
+    context: null;
+};
+export function useCanvasEffect(effect: any): _react.MutableRefObject<null>;
 import _react = require("react");
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/lib/commonjs/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../commonjs/utils.js"],"names":[],"mappings":";AAOA,iEAIC;AAED,0FAuBC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../commonjs/utils.js"],"names":[],"mappings":";AAOA,iEAIC;AAED;;;EAUC;AAED,4EAsBC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAUA,mGA4BG"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAgDA,mGAmDG"}

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

@@ -20,6 +20,7 @@ declare class GPUOffscreenCanvasContext {
     device: null;
     canvas: any;
     textureFormat: GPUTextureFormat;
+    present(): void;
     getDevice(): never;
     getTexture(): never;
     configure(config: any): undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Offscreen.d.ts","sourceRoot":"","sources":["../../../module/Offscreen.js"],"names":[],"mappings":"AACA;IAGE,qCAIC;IAND,oBAAqB;IACrB,wBAAyB;IAEvB,WAAkB;IAClB,YAAoB;IACpB,mCAAkD;IAEpD,mCAGC;IAID,4EAMC;IACD,8BAGC;IACD,kEAGC;IACD,qEAGC;IACD,iCAGC;IACD,oBA4BC;CACF;AACD;IAIE,yBAGC;IAND,gBAA6B;IAC7B,cAAe;IACf,aAAc;IAEZ,YAAoB;IACpB,gCAA6D;IAE/D,mBAKC;IACD,oBAKC;IACD,kCASC;IACD,yBAMC;IACD,2BAKC;CACF"}
+{"version":3,"file":"Offscreen.d.ts","sourceRoot":"","sources":["../../../module/Offscreen.js"],"names":[],"mappings":"AACA;IAGE,qCAIC;IAND,oBAAqB;IACrB,wBAAyB;IAEvB,WAAkB;IAClB,YAAoB;IACpB,mCAAkD;IAEpD,mCAGC;IAID,4EAMC;IACD,8BAGC;IACD,kEAGC;IACD,qEAGC;IACD,iCAGC;IACD,oBA4BC;CACF;AACD;IAIE,yBAGC;IAND,gBAA6B;IAC7B,cAAe;IACf,aAAc;IAEZ,YAAoB;IACpB,gCAA6D;IAE/D,gBAEC;IACD,mBAKC;IACD,oBAKC;IACD,kCASC;IACD,yBAMC;IACD,2BAKC;CACF"}

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

@@ -1,3 +1,7 @@
 export function warnIfNotHardwareAccelerated(adapter: any): void;
-export function useCanvasEffect(effect: any, deps?: any[]): import("react").MutableRefObject<null>;
+export function useGPUContext(): {
+    ref: import("react").MutableRefObject<null>;
+    context: null;
+};
+export function useCanvasEffect(effect: any): import("react").MutableRefObject<null>;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../module/utils.js"],"names":[],"mappings":"AACO,iEAIN;AACM,mGAuBN"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../module/utils.js"],"names":[],"mappings":"AACO,iEAIN;AACM;;;EAUN;AACM,qFAsBN"}

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

@@ -1,9 +1,10 @@
 import type { ViewProps } from "react-native";
 declare global {
-    var __WebGPUContextRegistry: Record<number, NativeCanvas>;
     var RNWebGPU: {
         gpu: GPU;
-        MakeWebGPUCanvasContext: (nativeCanvas: NativeCanvas) => RNCanvasContext;
+        fabric: boolean;
+        getNativeSurface: (contextId: number) => NativeCanvas;
+        MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
         DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
         createImageBitmap: typeof createImageBitmap;
     };
@@ -22,6 +23,7 @@ export type RNCanvasContext = GPUCanvasContext & {
 export interface CanvasRef {
     getContext(contextName: "webgpu"): RNCanvasContext | null;
     getNativeSurface: () => NativeCanvas;
+    whenReady: (callback: () => void) => void;
 }
 export declare const Canvas: import("react").ForwardRefExoticComponent<ViewProps & import("react").RefAttributes<CanvasRef>>;
 export {};

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,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAW9C,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAE1D,IAAI,QAAQ,EAAE;QACZ,GAAG,EAAE,GAAG,CAAC;QACT,uBAAuB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,eAAe,CAAC;QACzE,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;AAKD,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;CACtC;AAED,eAAO,MAAM,MAAM,iGA6BjB,CAAC"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAqB,MAAM,cAAc,CAAC;AAoBjE,OAAO,CAAC,MAAM,CAAC;IAEb,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,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;IACrC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC3C;AAqCD,eAAO,MAAM,MAAM,iGA+ClB,CAAC"}

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

@@ -11,7 +11,7 @@ export declare class GPUOffscreenCanvas implements OffscreenCanvas {
     getContext(contextId: "webgl", options?: any): WebGLRenderingContext | null;
     getContext(contextId: "webgl2", options?: any): WebGL2RenderingContext | null;
     getContext(contextId: OffscreenRenderingContextId, options?: any): OffscreenRenderingContext | null;
-    getContext(contextId: "webgpu"): GPUCanvasContext | null;
+    getContext(contextId: "webgpu"): GPUOffscreenCanvasContext | null;
     transferToImageBitmap(): ImageBitmap;
     addEventListener<K extends keyof OffscreenCanvasEventMap>(_type: K, _listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any, _options?: boolean | AddEventListenerOptions): void;
     removeEventListener<K extends keyof OffscreenCanvasEventMap>(_type: K, _listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any, _options?: boolean | EventListenerOptions): void;
@@ -23,4 +23,19 @@ export declare class GPUOffscreenCanvas implements OffscreenCanvas {
         format: GPUTextureFormat;
     }>;
 }
+declare class GPUOffscreenCanvasContext implements GPUCanvasContext {
+    readonly canvas: OffscreenCanvas;
+    __brand: "GPUCanvasContext";
+    private textureFormat;
+    private texture;
+    private device;
+    constructor(canvas: OffscreenCanvas);
+    present(): void;
+    getDevice(): GPUDevice;
+    getTexture(): GPUTexture;
+    configure(config: GPUCanvasConfiguration): undefined;
+    unconfigure(): undefined;
+    getCurrentTexture(): GPUTexture;
+}
+export {};
 //# sourceMappingURL=Offscreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Offscreen.d.ts","sourceRoot":"","sources":["../../../src/Offscreen.ts"],"names":[],"mappings":"AACA,qBAAa,kBAAmB,YAAW,eAAe;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,IAAI,CAAQ;IACzE,iBAAiB,EAAE,CAAC,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,IAAI,CAAQ;IAE7E,OAAO,CAAC,OAAO,CAA4B;gBAE/B,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAMzC,aAAa,CAAC,QAAQ,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAM3D,UAAU,CACR,SAAS,EAAE,IAAI,EACf,OAAO,CAAC,EAAE,GAAG,GACZ,iCAAiC,GAAG,IAAI;IAC3C,UAAU,CACR,SAAS,EAAE,gBAAgB,EAC3B,OAAO,CAAC,EAAE,GAAG,GACZ,2BAA2B,GAAG,IAAI;IACrC,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,qBAAqB,GAAG,IAAI;IAC3E,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,sBAAsB,GAAG,IAAI;IAC7E,UAAU,CACR,SAAS,EAAE,2BAA2B,EACtC,OAAO,CAAC,EAAE,GAAG,GACZ,yBAAyB,GAAG,IAAI;IACnC,UAAU,CAAC,SAAS,EAAE,QAAQ,GAAG,gBAAgB,GAAG,IAAI;IAYxD,qBAAqB,IAAI,WAAW;IAKpC,gBAAgB,CAAC,CAAC,SAAS,MAAM,uBAAuB,EACtD,KAAK,EAAE,CAAC,EACR,SAAS,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,GAAG,EACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC3C,IAAI;IAKP,mBAAmB,CAAC,CAAC,SAAS,MAAM,uBAAuB,EACzD,KAAK,EAAE,CAAC,EACR,SAAS,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,GAAG,EACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACxC,IAAI;IAKP,aAAa,CAAC,MAAM,EAAE,KAAK,GAAG,OAAO;IAKrC,YAAY;;;;;;CA6Bb"}
+{"version":3,"file":"Offscreen.d.ts","sourceRoot":"","sources":["../../../src/Offscreen.ts"],"names":[],"mappings":"AACA,qBAAa,kBAAmB,YAAW,eAAe;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,IAAI,CAAQ;IACzE,iBAAiB,EAAE,CAAC,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,IAAI,CAAQ;IAE7E,OAAO,CAAC,OAAO,CAA4B;gBAE/B,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAMzC,aAAa,CAAC,QAAQ,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IAM3D,UAAU,CACR,SAAS,EAAE,IAAI,EACf,OAAO,CAAC,EAAE,GAAG,GACZ,iCAAiC,GAAG,IAAI;IAC3C,UAAU,CACR,SAAS,EAAE,gBAAgB,EAC3B,OAAO,CAAC,EAAE,GAAG,GACZ,2BAA2B,GAAG,IAAI;IACrC,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,qBAAqB,GAAG,IAAI;IAC3E,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,sBAAsB,GAAG,IAAI;IAC7E,UAAU,CACR,SAAS,EAAE,2BAA2B,EACtC,OAAO,CAAC,EAAE,GAAG,GACZ,yBAAyB,GAAG,IAAI;IACnC,UAAU,CAAC,SAAS,EAAE,QAAQ,GAAG,yBAAyB,GAAG,IAAI;IAYjE,qBAAqB,IAAI,WAAW;IAKpC,gBAAgB,CAAC,CAAC,SAAS,MAAM,uBAAuB,EACtD,KAAK,EAAE,CAAC,EACR,SAAS,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,GAAG,EACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC3C,IAAI;IAKP,mBAAmB,CAAC,CAAC,SAAS,MAAM,uBAAuB,EACzD,KAAK,EAAE,CAAC,EACR,SAAS,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,GAAG,EACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACxC,IAAI;IAKP,aAAa,CAAC,MAAM,EAAE,KAAK,GAAG,OAAO;IAKrC,YAAY;;;;;;CA6Bb;AAED,cAAM,yBAA0B,YAAW,gBAAgB;aAO7B,MAAM,EAAE,eAAe;IANnD,OAAO,qBAA+B;IAEtC,OAAO,CAAC,aAAa,CAAmB;IACxC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,MAAM,CAA0B;gBAEZ,MAAM,EAAE,eAAe;IAInD,OAAO;IAIP,SAAS;IAOT,UAAU;IAOV,SAAS,CAAC,MAAM,EAAE,sBAAsB;IAcxC,WAAW;IAQX,iBAAiB,IAAI,UAAU;CAMhC"}

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

@@ -1,7 +1,10 @@
-import type { DependencyList } from "react";
-import type { CanvasRef } from "./Canvas";
+import type { RNCanvasContext, CanvasRef } from "./Canvas";
 type Unsubscribe = () => void;
 export declare const warnIfNotHardwareAccelerated: (adapter: GPUAdapter) => void;
-export declare const useCanvasEffect: (effect: () => void | Unsubscribe | Promise<void | Unsubscribe>, deps?: DependencyList) => import("react").RefObject<CanvasRef>;
+export declare const useGPUContext: () => {
+    ref: import("react").RefObject<CanvasRef>;
+    context: RNCanvasContext | null;
+};
+export declare const useCanvasEffect: (effect: () => void | Unsubscribe | Promise<Unsubscribe | void> | Promise<void>) => import("react").RefObject<CanvasRef>;
 export {};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,WAAW,GAAG,MAAM,IAAI,CAAC;AAE9B,eAAO,MAAM,4BAA4B,YAAa,UAAU,SAM/D,CAAC;AAEF,eAAO,MAAM,eAAe,WAClB,MAAM,IAAI,GAAG,WAAW,GAAG,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC,SACxD,cAAc,yCAwBrB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE3D,KAAK,WAAW,GAAG,MAAM,IAAI,CAAC;AAE9B,eAAO,MAAM,4BAA4B,YAAa,UAAU,SAM/D,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,WAClB,MACJ,IAAI,GACJ,WAAW,GACX,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,GAC3B,OAAO,CAAC,IAAI,CAAC,yCAuBlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Canvas.tsx

@@ -1,8 +1,17 @@
-import type { ViewProps } from "react-native";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import type { ViewProps, LayoutChangeEvent } from "react-native";
+import { View } from "react-native";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useLayoutEffect,
+  useCallback,
+} from "react";
+import type { RefObject } from "react";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
-import WebGPUNativeModule from "./NativeWebGPUModule";
 
 let CONTEXT_COUNTER = 1;
 function generateContextId() {
@@ -10,12 +19,16 @@ function generateContextId() {
 }
 
 declare global {
-  // eslint-disable-next-line no-var
-  var __WebGPUContextRegistry: Record<number, NativeCanvas>;
   // eslint-disable-next-line no-var
   var RNWebGPU: {
     gpu: GPU;
-    MakeWebGPUCanvasContext: (nativeCanvas: NativeCanvas) => RNCanvasContext;
+    fabric: boolean;
+    getNativeSurface: (contextId: number) => NativeCanvas;
+    MakeWebGPUCanvasContext: (
+      contextId: number,
+      width: number,
+      height: number,
+    ) => RNCanvasContext;
     DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
     createImageBitmap: typeof createImageBitmap;
   };
@@ -31,9 +44,6 @@ export interface NativeCanvas {
   clientHeight: number;
 }
 
-global.__WebGPUContextRegistry = {};
-const WebGPUContextRegistry = global.__WebGPUContextRegistry;
-
 export type RNCanvasContext = GPUCanvasContext & {
   present: () => void;
 };
@@ -41,35 +51,89 @@ export type RNCanvasContext = GPUCanvasContext & {
 export interface CanvasRef {
   getContext(contextName: "webgpu"): RNCanvasContext | null;
   getNativeSurface: () => NativeCanvas;
+  whenReady: (callback: () => void) => void;
 }
 
-export const Canvas = forwardRef<CanvasRef, ViewProps>((props, ref) => {
-  const [contextId, _] = useState(() => generateContextId());
+interface Size {
+  width: number;
+  height: number;
+}
 
-  useImperativeHandle(ref, () => ({
-    getNativeSurface: () => {
-      WebGPUNativeModule.createSurfaceContext(contextId);
-      return WebGPUContextRegistry[contextId];
-    },
-    getContext(contextName: "webgpu"): RNCanvasContext | null {
-      if (contextName !== "webgpu") {
-        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
-      }
-      WebGPUNativeModule.createSurfaceContext(contextId);
-      const nativeSurface = WebGPUContextRegistry[contextId];
-      if (!nativeSurface) {
-        return null;
+const useSizeFabric = (ref: RefObject<View>) => {
+  const [size, setSize] = useState<null | Size>(null);
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      throw new Error("Canvas ref is null");
+    }
+    ref.current.measureInWindow((_x, _y, width, height) => {
+      setSize({ width, height });
+    });
+  }, [ref]);
+  return { size, onLayout: undefined };
+};
+
+const useSizePaper = (_ref: RefObject<View>) => {
+  const [size, setSize] = useState<null | Size>(null);
+  const onLayout = useCallback<(event: LayoutChangeEvent) => void>(
+    ({
+      nativeEvent: {
+        layout: { width, height },
+      },
+    }) => {
+      if (size === null) {
+        setSize({ width, height });
       }
-      const ctx = RNWebGPU.MakeWebGPUCanvasContext(nativeSurface);
-      return ctx;
     },
-  }));
-
-  useEffect(() => {
-    return () => {
-      delete WebGPUContextRegistry[contextId];
-    };
-  }, [contextId]);
+    [size],
+  );
+  return { size, onLayout };
+};
 
-  return <WebGPUNativeView {...props} contextId={contextId} />;
-});
+export const Canvas = forwardRef<CanvasRef, ViewProps>(
+  ({ onLayout: _onLayout, ...props }, ref) => {
+    const viewRef = useRef(null);
+    const FABRIC = RNWebGPU.fabric;
+    const useSize = FABRIC ? useSizeFabric : useSizePaper;
+    const [contextId, _] = useState(() => generateContextId());
+    const cb = useRef<() => void>();
+    const { size, onLayout } = useSize(viewRef);
+    useEffect(() => {
+      if (size && cb.current) {
+        cb.current();
+      }
+    }, [size]);
+    useImperativeHandle(ref, () => ({
+      getNativeSurface: () => {
+        if (size === null) {
+          throw new Error("[WebGPU] Canvas size is not available yet");
+        }
+        return RNWebGPU.getNativeSurface(contextId);
+      },
+      whenReady(callback: () => void) {
+        if (size === null) {
+          cb.current = callback;
+        } else {
+          callback();
+        }
+      },
+      getContext(contextName: "webgpu"): RNCanvasContext | null {
+        if (contextName !== "webgpu") {
+          throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+        }
+        if (size === null) {
+          throw new Error("[WebGPU] Canvas size is not available yet");
+        }
+        return RNWebGPU.MakeWebGPUCanvasContext(
+          contextId,
+          size.width,
+          size.height,
+        );
+      },
+    }));
+    return (
+      <View ref={viewRef} onLayout={onLayout} {...props}>
+        <WebGPUNativeView style={{ flex: 1 }} contextId={contextId} />
+      </View>
+    );
+  },
+);

package/src/Offscreen.ts

@@ -33,11 +33,11 @@ export class GPUOffscreenCanvas implements OffscreenCanvas {
     contextId: OffscreenRenderingContextId,
     options?: any,
   ): OffscreenRenderingContext | null;
-  getContext(contextId: "webgpu"): GPUCanvasContext | null;
+  getContext(contextId: "webgpu"): GPUOffscreenCanvasContext | null;
   getContext(
     contextId: unknown,
     _options?: any,
-  ): OffscreenRenderingContext | GPUCanvasContext | null {
+  ): OffscreenRenderingContext | GPUOffscreenCanvasContext | null {
     if (contextId === "webgpu") {
       return this.context;
     }
@@ -115,6 +115,10 @@ class GPUOffscreenCanvasContext implements GPUCanvasContext {
     this.textureFormat = navigator.gpu.getPreferredCanvasFormat();
   }
 
+  present() {
+    // Do nothing
+  }
+
   getDevice() {
     if (!this.device) {
       throw new Error("Device is not configured.");

package/src/utils.ts

@@ -1,7 +1,6 @@
-import type { DependencyList } from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import type { CanvasRef } from "./Canvas";
+import type { RNCanvasContext, CanvasRef } from "./Canvas";
 
 type Unsubscribe = () => void;
 
@@ -13,30 +12,41 @@ export const warnIfNotHardwareAccelerated = (adapter: GPUAdapter) => {
   }
 };
 
+export const useGPUContext = () => {
+  const [context, setContext] = useState<RNCanvasContext | null>(null);
+  const ref = useCanvasEffect(() => {
+    const ctx = ref.current!.getContext("webgpu")!;
+    setContext(ctx);
+  });
+  return { ref, context };
+};
+
 export const useCanvasEffect = (
-  effect: () => void | Unsubscribe | Promise<void | Unsubscribe>,
-  deps: DependencyList = [],
+  effect: () =>
+    | void
+    | Unsubscribe
+    | Promise<Unsubscribe | void>
+    | Promise<void>,
 ) => {
+  const unsub = useRef<Unsubscribe | null | Promise<Unsubscribe | void>>(null);
   const ref = useRef<CanvasRef>(null);
-  const unsubscribe = useRef<Unsubscribe>();
   useEffect(() => {
-    requestAnimationFrame(async () => {
-      // const adapter = await navigator.gpu.requestAdapter();
-      // if (!adapter) {
-      //   return;
-      // }
-      // const device = await adapter.requestDevice();
-      const unsub = await effect();
-      if (unsub) {
-        unsubscribe.current = unsub;
+    ref.current!.whenReady(async () => {
+      const sub = effect();
+      if (sub) {
+        unsub.current = sub;
       }
     });
     return () => {
-      if (unsubscribe.current) {
-        unsubscribe.current();
+      if (unsub.current) {
+        if (unsub.current instanceof Promise) {
+          unsub.current.then((sub) => sub && sub());
+        } else {
+          unsub.current();
+        }
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, []);
   return ref;
 };