react-native-wgpu 0.3.2 → 0.4.1

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

@@ -1 +1 @@
-{"version":3,"file":"WebGPUViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,WAAY,SAAQ,SAAS;IACrC,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;;AAGD,wBAAiE"}
+{"version":3,"file":"WebGPUViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;;AAGD,wBAAiE"}

package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts

@@ -0,0 +1,118 @@
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    contextId: Int32;
+    transparent: boolean;
+}
+export default function WebGPUViewNativeComponent(props: NativeProps): import("react").ReactElement<{
+    style: (import("react-native").StyleProp<import("react-native").ViewStyle> | {
+        flex: number;
+    } | {
+        alignItems: "stretch";
+        backgroundColor: string;
+        border: string;
+        boxSizing: "border-box";
+        display: "flex";
+        flexBasis: "auto";
+        flexDirection: "column";
+        flexShrink: number;
+        listStyle: string;
+        margin: number;
+        minHeight: number;
+        minWidth: number;
+        padding: number;
+        position: "relative";
+        zIndex: number;
+    })[];
+    id: string;
+    ref: (ref: HTMLCanvasElement) => void;
+    children?: React.ReactNode | undefined;
+    hitSlop?: null | import("react-native").Insets | number | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
+    collapsable?: boolean | undefined;
+    collapsableChildren?: boolean | undefined;
+    onBlur?: ((e: import("react-native").BlurEvent) => void) | null | undefined;
+    onFocus?: ((e: import("react-native").FocusEvent) => void) | null | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    tabIndex?: 0 | -1 | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: ReadonlyArray<import("react-native").AccessibilityActionInfo> | undefined;
+    accessibilityLabel?: string | undefined;
+    'aria-label'?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    'aria-valuemax'?: import("react-native").AccessibilityValue["max"] | undefined;
+    'aria-valuemin'?: import("react-native").AccessibilityValue["min"] | undefined;
+    'aria-valuenow'?: import("react-native").AccessibilityValue["now"] | undefined;
+    'aria-valuetext'?: import("react-native").AccessibilityValue["text"] | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-modal'?: boolean | undefined;
+    role?: import("react-native").Role | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined;
+    'aria-labelledby'?: string | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    'aria-live'?: ("polite" | "assertive" | "off") | undefined;
+    screenReaderFocusable?: boolean | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityShowsLargeContentViewer?: boolean | undefined;
+    accessibilityLargeContentTitle?: string | undefined;
+    accessibilityRespondsToUserInteraction?: boolean | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=WebGPUViewNativeComponent.web.d.ts.map

package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;AA2CD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;eAsBrD,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAO/B"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=WebPolyfillGPUModule.d.ts.map

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

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

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { CanvasRef, NativeCanvas } from "./Canvas";
 export declare const warnIfNotHardwareAccelerated: (adapter: GPUAdapter) => void;
@@ -5,19 +6,19 @@ interface DeviceContext {
     device: GPUDevice | null;
     adapter: GPUAdapter | null;
 }
-declare const DeviceContext: import("react").Context<DeviceContext | null>;
+declare const DeviceContext: React.Context<DeviceContext | null>;
 interface DeviceProviderProps {
     children?: ReactNode | ReactNode[];
     adapterOptions?: GPURequestAdapterOptions;
     deviceDescriptor?: GPUDeviceDescriptor;
 }
-export declare const GPUDeviceProvider: ({ children, adapterOptions, deviceDescriptor, }: DeviceProviderProps) => import("react").JSX.Element | null;
+export declare const GPUDeviceProvider: ({ children, adapterOptions, deviceDescriptor, }: DeviceProviderProps) => React.JSX.Element | null;
 export declare const useSurface: () => {
-    ref: import("react").RefObject<CanvasRef>;
+    ref: React.RefObject<CanvasRef>;
     surface: NativeCanvas | null;
 };
 export declare const useMainDevice: () => DeviceContext;
-export declare const useCanvasRef: () => import("react").RefObject<CanvasRef>;
+export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
 export declare const useDevice: (adapterOptions?: GPURequestAdapterOptions, deviceDescriptor?: GPUDeviceDescriptor) => {
     adapter: GPUAdapter | null;
     device: GPUDevice | null;

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,4BAA4B,GAAI,SAAS,UAAU,SAQ/D,CAAC;AAEF,UAAU,aAAa;IACrB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,+CAA4C,CAAC;AAEhE,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED,eAAO,MAAM,iBAAiB,GAAI,iDAI/B,mBAAmB,uCAQrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAQtB,CAAC;AAEF,eAAO,MAAM,aAAa,qBAMzB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAgC,CAAC;AAE1D,eAAO,MAAM,SAAS,GACpB,iBAAiB,wBAAwB,EACzC,mBAAmB,mBAAmB;;;CAqBvC,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,4BAA4B,GAAI,SAAS,UAAU,SAQ/D,CAAC;AAEF,UAAU,aAAa;IACrB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,qCAA4C,CAAC;AAEhE,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED,eAAO,MAAM,iBAAiB,GAAI,iDAI/B,mBAAmB,6BAQrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAQtB,CAAC;AAEF,eAAO,MAAM,aAAa,qBAMzB,CAAC;AAEF,eAAO,MAAM,YAAY,kCAAgC,CAAC;AAE1D,eAAO,MAAM,SAAS,GACpB,iBAAiB,wBAAwB,EACzC,mBAAmB,mBAAmB;;;CAqBvC,CAAC"}

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

@@ -1,6 +1,17 @@
-export * from "./Canvas";
-export * from "./Offscreen";
-export * from "./WebGPUViewNativeComponent";
-export * from "./hooks";
-export { default as WebGPUModule } from "./NativeWebGPUModule";
+import type { NativeCanvas, RNCanvasContext } from "./types";
+export * from "./main";
+declare global {
+    interface Navigator {
+        gpu: GPU;
+    }
+    var navigator: Navigator;
+    var RNWebGPU: {
+        gpu: GPU;
+        fabric: boolean;
+        getNativeSurface: (contextId: number) => NativeCanvas;
+        MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+        DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
+        createImageBitmap: typeof createImageBitmap;
+    };
+}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7D,cAAc,QAAQ,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,GAAG,EAAE,GAAG,CAAC;KACV;IAED,IAAI,SAAS,EAAE,SAAS,CAAC;IAEzB,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"}

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

@@ -0,0 +1,6 @@
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+export { default as WebGPUModule } from "../NativeWebGPUModule";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main/index.tsx"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/src/main/index.web.d.ts

@@ -0,0 +1,6 @@
+import "../WebPolyfillGPUModule";
+export * from "../Canvas";
+export * from "../Offscreen";
+export * from "../WebGPUViewNativeComponent";
+export * from "../hooks";
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/src/main/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/main/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,19 @@
+type SurfacePointer = bigint;
+export interface NativeCanvas {
+    surface: SurfacePointer;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface CanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+    whenReady: (callback: () => void) => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,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;IACrC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC3C"}

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

@@ -0,0 +1,2 @@
+export declare function contextIdToId(contextId: number): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AACA,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,UAE9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -81,6 +81,7 @@
     "react": "19.1.0",
     "react-native": "0.81.4",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-web": "^0.21.2",
     "rimraf": "^5.0.7",
     "seedrandom": "^3.0.5",
     "teapot": "^1.0.0",

package/src/Canvas.tsx

@@ -1,6 +1,11 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import type { ViewProps } from "react-native";
-import { View } from "react-native";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { Platform, View } from "react-native";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
 
@@ -62,9 +67,16 @@ export const Canvas = forwardRef<
       if (!viewRef.current) {
         throw new Error("[WebGPU] Cannot get context before mount");
       }
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      const size = viewRef.current.unstable_getBoundingClientRect();
+      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();
+      }
       return RNWebGPU.MakeWebGPUCanvasContext(
         contextId,
         size.width,
@@ -72,6 +84,7 @@ export const Canvas = forwardRef<
       );
     },
   }));
+
   return (
     <View collapsable={false} ref={viewRef} {...props}>
       <WebGPUNativeView

package/src/WebGPUViewNativeComponent.ts

@@ -2,7 +2,7 @@ import { codegenNativeComponent } from "react-native";
 import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import type { ViewProps } from "react-native";
 
-interface NativeProps extends ViewProps {
+export interface NativeProps extends ViewProps {
   contextId: Int32;
   transparent: boolean;
 }

package/src/WebGPUViewNativeComponent.web.ts

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from "react";
+import { StyleSheet } from "react-native";
+import { unstable_createElement as unstableCreateElement } from "react-native-web";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+import { contextIdToId } from "./utils";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+  immediate = false,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return function debounced(
+    this: ThisParameterType<T>,
+    ...args: Parameters<T>
+  ) {
+    const context = this;
+    const callNow = immediate && !timeout;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = undefined;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}
+
+function resizeCanvas(canvas?: HTMLCanvasElement) {
+  if (!canvas) {
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+
+  const { height, width } = canvas.getBoundingClientRect();
+  canvas.setAttribute("height", (height * dpr).toString());
+  canvas.setAttribute("width", (width * dpr).toString());
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function WebGPUViewNativeComponent(props: NativeProps) {
+  const { contextId, style, transparent, ...rest } = props;
+
+  const canvasElm = useRef<HTMLCanvasElement>();
+
+  useEffect(() => {
+    const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return unstableCreateElement("canvas", {
+    ...rest,
+    style: [
+      styles.view,
+      styles.flex1,
+      transparent === false && { backgroundColor: "white" }, // Canvas elements are transparent by default on the web
+      style,
+    ],
+    id: contextIdToId(contextId),
+    ref: (ref: HTMLCanvasElement) => {
+      canvasElm.current = ref;
+      if (ref) {
+        resizeCanvas(ref);
+      }
+    },
+  });
+}
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  view: {
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    // @ts-expect-error - not a valid RN style, but it's valid for web
+    border: "0 solid black",
+    boxSizing: "border-box",
+    display: "flex",
+    flexBasis: "auto",
+    flexDirection: "column",
+    flexShrink: 0,
+    listStyle: "none",
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+  },
+});

package/src/WebPolyfillGPUModule.ts

@@ -0,0 +1,53 @@
+import { contextIdToId } from "./utils";
+
+const fabric = true;
+
+function getNativeSurface(contextId: number) {
+  const canvas = document.getElementById(
+    contextIdToId(contextId),
+  ) as HTMLCanvasElement;
+
+  const { height, width } = canvas.getBoundingClientRect()!;
+
+  return {
+    surface: BigInt(contextId),
+    height,
+    width,
+    clientHeight: height,
+    clientWidth: width,
+  };
+}
+
+function makeWebGPUCanvasContext(
+  contextId: number,
+  width: number,
+  height: number,
+) {
+  const canvas = document.getElementById(
+    contextIdToId(contextId),
+  ) as HTMLCanvasElement;
+
+  const dpr = window.devicePixelRatio || 1;
+  const pixelWidth = (width * dpr).toString();
+  const pixelHeight = (height * dpr).toString();
+
+  if (
+    canvas.getAttribute("width") !== pixelWidth ||
+    canvas.getAttribute("height") !== pixelHeight
+  ) {
+    canvas.setAttribute("width", pixelWidth);
+    canvas.setAttribute("height", pixelHeight);
+  }
+
+  const context = canvas.getContext("webgpu")!;
+  return Object.assign(context, {
+    present: () => {},
+  });
+}
+
+// @ts-expect-error - polyfill for RNWebGPU native module
+window.RNWebGPU = {
+  getNativeSurface,
+  MakeWebGPUCanvasContext: makeWebGPUCanvasContext,
+  fabric,
+};

package/src/hooks.tsx

@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import {
+import React, {
   createContext,
   useContext,
   useEffect,
@@ -7,6 +6,7 @@ import {
   useRef,
   useState,
 } from "react";
+import type { ReactNode } from "react";
 
 import type { CanvasRef, NativeCanvas } from "./Canvas";