fix(🌎): fix major regression on RN Web (#3276)

Author: wcandillon

packages/skia/src/sksg/Container.ts

@@ -170,10 +170,10 @@ class ReanimatedContainer extends Container {
         drawOnscreen(Skia, nativeId, recording!);
       }, Array.from(animationValues));
     }
-    Rea.runOnUI(() => {
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
       "worklet";
-      drawOnscreen(Skia, nativeId, recording!, this.onSize);
-    })();
+      drawOnscreen(Skia, nativeId, recording!, onSize);
+    })(this.onSize);
   }
 }
 

packages/skia/src/specs/NativeSkiaModule.web.ts

@@ -30,6 +30,13 @@ global.SkiaViewApi = {
       }
     }
   },
+  size(nativeId: number) {
+    if (this.views[`${nativeId}`]) {
+      return this.views[`${nativeId}`].getSize();
+    } else {
+      return { width: 0, height: 0 };
+    }
+  },
   requestRedraw(nativeId: number) {
     this.views[`${nativeId}`].redraw();
   },

packages/skia/src/specs/SkiaPictureViewNativeComponent.web.ts

@@ -1,10 +1,8 @@
 import type { ViewProps } from "react-native";
-import { createElement, useEffect, useRef } from "react";
+import { createElement } from "react";
 
 import { SkiaPictureView } from "../views/SkiaPictureView.web";
 
-import type { ISkiaViewApiWeb } from "./NativeSkiaModule.web";
-
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
@@ -18,17 +16,8 @@ const SkiaPictureViewNativeComponent = ({
   onLayout,
   ...viewProps
 }: NativeProps) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (ref.current) {
-      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(
-        nativeID,
-        ref.current
-      );
-    }
-  }, [nativeID]);
   return createElement(SkiaPictureView, {
-    ref,
+    nativeID,
     debug,
     opaque,
     onLayout,

packages/skia/src/views/SkiaBaseWebView.tsx

@@ -59,7 +59,7 @@ export abstract class SkiaBaseWebView<
     }
   }
 
-  protected getSize() {
+  getSize() {
     return { width: this.width, height: this.height };
   }
 

packages/skia/src/views/SkiaPictureView.web.tsx

@@ -1,4 +1,5 @@
 import type { SkCanvas, SkPicture } from "../skia/types";
+import type { ISkiaViewApiWeb } from "../specs/NativeSkiaModule.web";
 
 import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
@@ -8,6 +9,11 @@ export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps>
 
   constructor(props: SkiaPictureViewNativeProps) {
     super(props);
+    const { nativeID } = props;
+    if (!nativeID) {
+      throw new Error("SkiaPictureView requires a nativeID prop");
+    }
+    (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, this);
   }
 
   public setPicture(picture: SkPicture) {