fix(🌍): Fix RN Web support (#2954)

Author: wcandillon

packages/skia/src/renderer/Canvas.web.tsx

@@ -2,7 +2,6 @@ import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
-import type { ISkiaViewApi } from "../views/types";
 
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
@@ -12,9 +11,7 @@ import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
-declare global {
-  var SkiaViewApi: ISkiaViewApi;
-}
+import "../views/api";
 
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
@@ -29,8 +26,6 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-  rec.dispose();
-  picture.dispose();
 };
 
 const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
@@ -145,24 +140,24 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
+    Rea.runOnUI(() => {
+      "worklet";
+      nativeDrawOnscreen(nativeId, sharedRecorder);
+    })();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
         nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
-    Rea.runOnUI(() => {
-      "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder);
-    })();
   }
 }
 
 export const createContainer = (Skia: Skia, nativeId: number) => {
-  const native = global.SkiaViewApi !== undefined;
+  const web = global.SkiaViewApi && global.SkiaViewApi.web;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
-    if (native) {
+    if (!web) {
       return new NativeReanimatedContainer(Skia, nativeId);
     } else {
       return new ReanimatedContainer(Skia, nativeId);

packages/skia/src/sksg/Container.ts

@@ -0,0 +1,38 @@
+import type { SkRect } from "../skia/types";
+import type { ISkiaViewApi } from "../views/types";
+import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+
+export type ISkiaViewApiWeb = ISkiaViewApi & {
+  views: Record<string, SkiaPictureView>;
+  registerView(nativeId: string, view: SkiaPictureView): void;
+};
+
+global.SkiaViewApi = {
+  views: {},
+  web: true,
+  registerView(nativeId: string, view: SkiaPictureView) {
+    this.views[nativeId] = view;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setJsiProperty(nativeId: number, name: string, value: any) {
+    if (name === "picture") {
+      this.views[`${nativeId}`].setPicture(value);
+    }
+  },
+  requestRedraw(nativeId: number) {
+    this.views[`${nativeId}`].redraw();
+  },
+  makeImageSnapshot(nativeId: number, rect?: SkRect) {
+    return this.views[`${nativeId}`].makeImageSnapshot(rect);
+  },
+  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {
+    return new Promise((resolve, reject) => {
+      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);
+      if (result) {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to make image snapshot"));
+      }
+    });
+  },
+} as ISkiaViewApiWeb;

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

@@ -0,0 +1,39 @@
+import type { ViewProps } from "react-native";
+import { createElement, useEffect, useRef } from "react";
+
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+
+import type { ISkiaViewApiWeb } from "./NativeSkiaModule.web";
+
+export interface NativeProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  nativeID: string;
+}
+
+const SkiaPictureViewNativeComponent = ({
+  nativeID,
+  debug,
+  opaque,
+  onLayout,
+  ...viewProps
+}: NativeProps) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(
+        nativeID,
+        ref.current
+      );
+    }
+  }, [nativeID]);
+  return createElement(SkiaPictureView, {
+    ref,
+    debug,
+    opaque,
+    onLayout,
+    ...viewProps,
+  });
+};
+// eslint-disable-next-line import/no-default-export
+export default SkiaPictureViewNativeComponent;

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

@@ -10,6 +10,7 @@ export type NativeSkiaViewProps = ViewProps & {
 };
 
 export interface ISkiaViewApi {
+  web?: boolean;
   setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
   requestRedraw: (nativeId: number) => void;
   makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;