Better zero height/width behavior and warning

Author: scottmas

apps/example/index.html

@@ -9,7 +9,7 @@
 
     <title>Example</title>
     <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
-    <style id="expo-reset">
+    <style id="react-native-web-reset">
       /* These styles make the body full-height */
       html,
       body {

packages/webgpu/src/Canvas.tsx

@@ -69,9 +69,19 @@ export const Canvas = forwardRef<
   const cb = useRef<() => void>();
   const { size, onLayout } = useSize(viewRef);
   useEffect(() => {
-    if (size && cb.current) {
+    const hasNonZeroDims = !!size?.height && !!size?.width;
+    if (size && hasNonZeroDims && cb.current) {
       cb.current();
     }
+
+    if (size && !hasNonZeroDims) {
+      console.warn(
+        [
+          `react-native-wgpu canvas has zero dimensions (width:${size.width}px; height:${size.height}px)!`,
+          "Unable to initialize underlying canvas.",
+        ].join(" "),
+      );
+    }
   }, [size]);
 
   useImperativeHandle(ref, () => ({

packages/webgpu/src/index.tsx

@@ -1 +1,9 @@
+import "@webgpu/types";
+
 export * from "./main";
+
+declare global {
+  interface Navigator {
+    gpu: GPU;
+  }
+}

packages/webgpu/src/main.tsx

@@ -201,8 +201,7 @@ if (!navigator) {
   // @ts-expect-error
   navigator = {};
 }
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
+
 navigator.gpu = RNWebGPU.gpu;
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment