react-native-wgpu 0.4.1 → 0.4.2

package/README.md

@@ -1,9 +1,8 @@
 # React Native WebGPU
 
-React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).
-This is currently a technical preview for early adopters.
+React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).  
 
-React Native WebGPU requires React Native 0.81 or newer and doesn't run on legacy architecture.
+React Native WebGPU requires React Native 0.81 or newer. It doesn't support the legacy architecture.
 
 ## Installation
 
@@ -13,7 +12,16 @@ Please note that the package name is `react-native-wgpu`.
 npm install react-native-wgpu
 ```
 
-Note that if you use pnpm, you MUST use a `node-linker = hoisted` so that the external reference to the Dawn webgpu library can successfully link it.
+## With Expo
+
+Expo provides a React Native WebGPU template that works with React Three Fiber.
+The works on iOS, Android, and Web.
+
+```
+npx create-expo-app@latest -e with-webgpu
+```
+
+https://github.com/user-attachments/assets/efbd05f8-4ce0-46c2-919c-03e1095bc8ac
 
 Below are some examples from the [example app](/apps/example/).
 
@@ -38,13 +46,6 @@ We also provide prebuilt binaries for visionOS and macOS.
 
 https://github.com/user-attachments/assets/2d5c618e-5b15-4cef-8558-d4ddf8c70667
 
-## Diagnostics
-
-Two diagnostic screens were added to the example app so you can reproduce the issues highlighted in the code review:
-
-- `Async Runner Starvation` (`apps/example/src/Diagnostics/AsyncStarvation.tsx`) shows that a zero-delay `setTimeout` never fires before `device.createRenderPipelineAsync()` resolves because the event loop is kept busy. Launch the example app and open the screen from the home list to observe the stalled timer.
-- `Device Lost Promise Hang` (`apps/example/src/Diagnostics/DeviceLostHang.tsx`) forces a synthetic device loss by calling the native `forceLossForTesting()` helper. On the current build the `device.lost` promise remains pending indefinitely, confirming that the loss callback is never delivered once pumping stops.
-
 ## Usage
 
 Usage is identical to Web.
@@ -158,8 +159,8 @@ From there you will be able to run the example app properly.
 
 ## Similarities and Differences with the Web
 
-The API has been designed to be completely symmetric with the Web.
-For instance, you can access the WebGPU context synchronously, as well as the canvas size.
+The API has been designed to be completely symmetric with the Web.  
+For instance, you can access the WebGPU context synchronously, as well as the canvas size.  
 Pixel density and canvas resizing are handled exactly like on the Web as well.
 
 ```tsx
@@ -173,7 +174,7 @@ ctx.canvas.height = ctx.canvas.clientHeight * PixelRatio.get();
 
 ### Frame Scheduling
 
-In React Native, we want to keep frame presentation as a manual operation as we plan to provide more advanced rendering options that are React Native specific.
+In React Native, we want to keep frame presentation as a manual operation as we plan to provide more advanced rendering options that are React Native specific.  
 This means that when you are ready to present a frame, you need to call `present` on the context.
 
 ```tsx
@@ -184,6 +185,19 @@ device.queue.submit([commandEncoder.finish()]);
 context.present();
 ```
 
+### Canvas Transparency
+
+On Android, the `alphaMode` property is ignored when configuring the canvas.
+To have a transparent canvas by default, use the `transparent` property.
+
+```tsx
+return (
+  <View style={style.container}>
+    <Canvas ref={ref} style={style.webgpu} transparent />
+  </View>
+);
+```
+
 ### External Textures
 
 This module provides a `createImageBitmap` function that you can use in `copyExternalImageToTexture`.

package/lib/commonjs/Canvas.js

@@ -14,11 +14,11 @@ let CONTEXT_COUNTER = 1;
 function generateContextId() {
   return CONTEXT_COUNTER++;
 }
-const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
-  onLayout: _onLayout,
+const Canvas = ({
   transparent,
+  ref,
   ...props
-}, ref) => {
+}) => {
   const viewRef = (0, _react.useRef)(null);
   const [contextId, _] = (0, _react.useState)(() => generateContextId());
   (0, _react.useImperativeHandle)(ref, () => ({
@@ -33,16 +33,10 @@ const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
       if (!viewRef.current) {
         throw new Error("[WebGPU] Cannot get context before mount");
       }
-      let size;
-      if (_reactNative.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;
+      const size = "getBoundingClientRect" in view ? view.getBoundingClientRect() : view.unstable_getBoundingClientRect();
       return RNWebGPU.MakeWebGPUCanvasContext(contextId, size.width, size.height);
     }
   }));
@@ -56,5 +50,6 @@ const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
     contextId: contextId,
     transparent: !!transparent
   }));
-});
+};
+exports.Canvas = Canvas;
 //# sourceMappingURL=Canvas.js.map

package/lib/commonjs/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","CONTEXT_COUNTER","generateContextId","Canvas","exports","forwardRef","onLayout","_onLayout","transparent","props","ref","viewRef","useRef","contextId","_","useState","useImperativeHandle","getContextId","getNativeSurface","RNWebGPU","getContext","contextName","Error","current","size","Platform","OS","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","createElement","View","collapsable","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","CONTEXT_COUNTER","generateContextId","Canvas","transparent","ref","props","viewRef","useRef","contextId","_","useState","useImperativeHandle","getContextId","getNativeSurface","RNWebGPU","getContext","contextName","Error","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","createElement","View","collapsable","style","flex","exports"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Canvas.js

@@ -1,16 +1,16 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { Platform, View } from "react-native";
+import React, { useImperativeHandle, useRef, useState } from "react";
+import { View } from "react-native";
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
 let CONTEXT_COUNTER = 1;
 function generateContextId() {
   return CONTEXT_COUNTER++;
 }
-export const Canvas = /*#__PURE__*/forwardRef(({
-  onLayout: _onLayout,
+export const Canvas = ({
   transparent,
+  ref,
   ...props
-}, ref) => {
+}) => {
   const viewRef = useRef(null);
   const [contextId, _] = useState(() => generateContextId());
   useImperativeHandle(ref, () => ({
@@ -25,16 +25,10 @@ export const Canvas = /*#__PURE__*/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;
+      const size = "getBoundingClientRect" in view ? view.getBoundingClientRect() : view.unstable_getBoundingClientRect();
       return RNWebGPU.MakeWebGPUCanvasContext(contextId, size.width, size.height);
     }
   }));
@@ -48,5 +42,5 @@ export const Canvas = /*#__PURE__*/forwardRef(({
     contextId: contextId,
     transparent: !!transparent
   }));
-});
+};
 //# sourceMappingURL=Canvas.js.map

package/lib/module/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useImperativeHandle","useRef","useState","Platform","View","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","Canvas","onLayout","_onLayout","transparent","props","ref","viewRef","contextId","_","getContextId","getNativeSurface","RNWebGPU","getContext","contextName","Error","current","size","OS","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","createElement","_extends","collapsable","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":";AAAA,OAAOA,KAAK,IACVC,UAAU,EACVC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SAASC,QAAQ,EAAEC,IAAI,QAAQ,cAAc;AAE7C,OAAOC,gBAAgB,MAAM,6BAA6B;AAE1D,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AAqCA,OAAO,MAAME,MAAM,gBAAGT,UAAU,CAG9B,CAAC;EAAEU,QAAQ,EAAEC,SAAS;EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAMC,OAAO,GAAGb,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACc,SAAS,EAAEC,CAAC,CAAC,GAAGd,QAAQ,CAAC,MAAMK,iBAAiB,CAAC,CAAC,CAAC;EAC1DP,mBAAmB,CAACa,GAAG,EAAE,OAAO;IAC9BI,YAAY,EAAEA,CAAA,KAAMF,SAAS;IAC7BG,gBAAgB,EAAEA,CAAA,KAAM;MACtB,OAAOC,QAAQ,CAACD,gBAAgB,CAACH,SAAS,CAAC;IAC7C,CAAC;IACDK,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIC,KAAK,CAAC,iCAAiCD,WAAW,EAAE,CAAC;MACjE;MACA,IAAI,CAACP,OAAO,CAACS,OAAO,EAAE;QACpB,MAAM,IAAID,KAAK,CAAC,0CAA0C,CAAC;MAC7D;MACA,IAAIE,IAAI;MACR,IAAIrB,QAAQ,CAACsB,EAAE,KAAK,KAAK,EAAE;QACzB;QACA;QACAD,IAAI,GAAGV,OAAO,CAACS,OAAO,CAACG,qBAAqB,CAAC,CAAC;MAChD,CAAC,MAAM;QACL;QACA;QACAF,IAAI,GAAGV,OAAO,CAACS,OAAO,CAACI,8BAA8B,CAAC,CAAC;MACzD;MACA,OAAOR,QAAQ,CAACS,uBAAuB,CACrCb,SAAS,EACTS,IAAI,CAACK,KAAK,EACVL,IAAI,CAACM,MACP,CAAC;IACH;EACF,CAAC,CAAC,CAAC;EAEH,oBACEhC,KAAA,CAAAiC,aAAA,CAAC3B,IAAI,EAAA4B,QAAA;IAACC,WAAW,EAAE,KAAM;IAACpB,GAAG,EAAEC;EAAQ,GAAKF,KAAK,gBAC/Cd,KAAA,CAAAiC,aAAA,CAAC1B,gBAAgB;IACf6B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IACnBpB,SAAS,EAAEA,SAAU;IACrBJ,WAAW,EAAE,CAAC,CAACA;EAAY,CAC5B,CACG,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useImperativeHandle","useRef","useState","View","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","Canvas","transparent","ref","props","viewRef","contextId","_","getContextId","getNativeSurface","RNWebGPU","getContext","contextName","Error","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","createElement","_extends","collapsable","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEpE,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAOC,gBAAgB,MAAM,6BAA6B;AAE1D,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AA0CA,OAAO,MAAME,MAAM,GAAGA,CAAC;EAAEC,WAAW;EAAEC,GAAG;EAAE,GAAGC;AAAmB,CAAC,KAAK;EACrE,MAAMC,OAAO,GAAGV,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACW,SAAS,EAAEC,CAAC,CAAC,GAAGX,QAAQ,CAAC,MAAMI,iBAAiB,CAAC,CAAC,CAAC;EAC1DN,mBAAmB,CAACS,GAAG,EAAE,OAAO;IAC9BK,YAAY,EAAEA,CAAA,KAAMF,SAAS;IAC7BG,gBAAgB,EAAEA,CAAA,KAAM;MACtB,OAAOC,QAAQ,CAACD,gBAAgB,CAACH,SAAS,CAAC;IAC7C,CAAC;IACDK,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIC,KAAK,CAAC,iCAAiCD,WAAW,EAAE,CAAC;MACjE;MACA,IAAI,CAACP,OAAO,CAACS,OAAO,EAAE;QACpB,MAAM,IAAID,KAAK,CAAC,0CAA0C,CAAC;MAC7D;MACA;MACA;MACA,MAAME,IAAI,GAAGV,OAAO,CAACS,OAAc;MACnC,MAAME,IAAI,GACR,uBAAuB,IAAID,IAAI,GAC3BA,IAAI,CAACE,qBAAqB,CAAC,CAAC,GAC5BF,IAAI,CAACG,8BAA8B,CAAC,CAAC;MAC3C,OAAOR,QAAQ,CAACS,uBAAuB,CACrCb,SAAS,EACTU,IAAI,CAACI,KAAK,EACVJ,IAAI,CAACK,MACP,CAAC;IACH;EACF,CAAC,CAAC,CAAC;EAEH,oBACE5B,KAAA,CAAA6B,aAAA,CAACzB,IAAI,EAAA0B,QAAA;IAACC,WAAW,EAAE,KAAM;IAACrB,GAAG,EAAEE;EAAQ,GAAKD,KAAK,gBAC/CX,KAAA,CAAA6B,aAAA,CAACxB,gBAAgB;IACf2B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IACnBpB,SAAS,EAAEA,SAAU;IACrBJ,WAAW,EAAE,CAAC,CAACA;EAAY,CAC5B,CACG,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -1,3 +1,7 @@
 export const __esModule: boolean;
-export const Canvas: any;
+export function Canvas({ transparent, ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): any;
 //# sourceMappingURL=Canvas.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../commonjs/Canvas.js"],"names":[],"mappings":""}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../commonjs/Canvas.js"],"names":[],"mappings":";AAgBA;;;;QAoCC"}

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -123,4 +123,4 @@
       }
     }
   }
-}
+}

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>
   );
-});
+};