@shopify/react-native-skia 2.2.14 → 2.2.15

package/src/renderer/Canvas.tsx

@@ -17,6 +17,7 @@ import type {
 } from "react-native";
 import { type SharedValue } from "react-native-reanimated";
 
+import Rea from "../external/reanimated/ReanimatedProxy";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
@@ -88,10 +89,39 @@ export const Canvas = ({
   }, []);
 
   // Root
-  const root = useMemo(
-    () => new SkiaSGRoot(Skia, nativeId, onSize),
-    [nativeId, onSize]
+  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+
+  const updateSize = useCallback(
+    (value: SkSize) => {
+      if (onSize) {
+        onSize.value = value;
+      }
+    },
+    [onSize]
   );
+  useEffect(() => {
+    if (onSize) {
+      const { runOnJS } = Rea;
+      const uiOnSize = Rea.makeMutable({ width: 0, height: 0 });
+      Rea.runOnUI(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        global[`__onSize_${nativeId}`] = uiOnSize;
+        uiOnSize.addListener(nativeId, (value) => {
+          runOnJS(updateSize)(value);
+        });
+      })();
+      return () => {
+        Rea.runOnUI(() => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          delete global[`__onSize_${nativeId}`];
+          uiOnSize.removeListener(nativeId);
+        })();
+      };
+    }
+    return undefined;
+  }, [onSize, nativeId, updateSize]);
 
   // Render effects
   useLayoutEffect(() => {

package/src/skia/core/SVG.web.ts

@@ -11,6 +11,9 @@ export const useSVG = (
   if (
     typeof source !== "object" ||
     source instanceof Uint8Array ||
+    !("uri" in source) ||
+    typeof source.uri !== "string" ||
+    !("default" in source) ||
     typeof source.default !== "string"
   ) {
     throw new Error(

package/src/skia/types/Data/Data.ts

@@ -7,7 +7,13 @@ type ESModule = {
   __esModule: true;
   default: string;
 };
-export type DataModule = RNModule | ESModule;
+type MetroAsset = {
+  uri: string;
+  width: number;
+  height: number;
+};
+
+export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
 export type DataSourceParam = DataSource | null | undefined;
 

package/src/sksg/Container.native.ts

@@ -1,7 +1,5 @@
-import type { SharedValue } from "react-native-reanimated";
-
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkSize } from "../skia/types";
+import type { Skia } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
 
@@ -12,15 +10,9 @@ import { visit } from "./Recorder/Visitor";
 import "../skia/NativeSetup";
 import "../views/api";
 
-const nativeDrawOnscreen = (
-  nativeId: number,
-  recorder: JsiRecorder,
-  onSize?: SharedValue<SkSize>
-) => {
+const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
   "worklet";
-  if (onSize) {
-    SkiaViewApi.setJsiProperty(nativeId, "onSize", onSize);
-  }
+
   //const start = performance.now();
   const picture = recorder.play();
   //const end = performance.now();
@@ -31,11 +23,7 @@ const nativeDrawOnscreen = (
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
-  constructor(
-    Skia: Skia,
-    private nativeId: number,
-    private onSize?: SharedValue<SkSize>
-  ) {
+  constructor(Skia: Skia, private nativeId: number) {
     super(Skia);
   }
 
@@ -51,28 +39,23 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
+    Rea.runOnUI(() => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
-    })(this.onSize);
+      nativeDrawOnscreen(nativeId, sharedRecorder);
+    })();
     if (sharedValues.length > 0) {
-      const { onSize } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+        nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
   }
 }
 
-export const createContainer = (
-  Skia: Skia,
-  nativeId: number,
-  onSize?: SharedValue<SkSize>
-) => {
+export const createContainer = (Skia: Skia, nativeId: number) => {
   if (HAS_REANIMATED_3 && nativeId !== -1) {
-    return new NativeReanimatedContainer(Skia, nativeId, onSize);
+    return new NativeReanimatedContainer(Skia, nativeId);
   } else {
     return new StaticContainer(Skia, nativeId);
   }

package/src/sksg/Container.ts

@@ -1,13 +1,7 @@
-import type { SharedValue } from "react-native-reanimated";
-
-import type { Skia, SkSize } from "../skia/types";
+import type { Skia } from "../skia/types";
 
 import { StaticContainer } from "./StaticContainer";
 
-export const createContainer = (
-  Skia: Skia,
-  nativeId: number,
-  _onSize?: SharedValue<SkSize>
-) => {
+export const createContainer = (Skia: Skia, nativeId: number) => {
   return new StaticContainer(Skia, nativeId);
 };

package/src/sksg/Container.web.ts

@@ -1,7 +1,5 @@
-import type { SharedValue } from "react-native-reanimated";
-
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkSize } from "../skia/types";
+import type { Skia } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 
 import type { Recording } from "./Recorder/Recorder";
@@ -64,11 +62,7 @@ class ReanimatedContainer extends Container {
   }
 }
 
-export const createContainer = (
-  Skia: Skia,
-  nativeId: number,
-  _onSize?: SharedValue<SkSize>
-) => {
+export const createContainer = (Skia: Skia, nativeId: number) => {
   if (HAS_REANIMATED_3 && nativeId !== -1) {
     return new ReanimatedContainer(Skia, nativeId);
   } else {

package/src/sksg/Reconciler.ts

@@ -1,9 +1,8 @@
 import type { ReactNode } from "react";
 import type { OpaqueRoot } from "react-reconciler";
-import type { SharedValue } from "react-native-reanimated";
 import ReactReconciler from "react-reconciler";
 
-import type { SkCanvas, Skia, SkSize } from "../skia/types";
+import type { SkCanvas, Skia } from "../skia/types";
 import { NodeType } from "../dom/types";
 
 import { debug, sksgHostConfig } from "./HostConfig";
@@ -24,8 +23,8 @@ export class SkiaSGRoot {
   private root: OpaqueRoot;
   private container: Container;
 
-  constructor(public Skia: Skia, nativeId = -1, onSize?: SharedValue<SkSize>) {
-    this.container = createContainer(Skia, nativeId, onSize);
+  constructor(public Skia: Skia, nativeId = -1) {
+    this.container = createContainer(Skia, nativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,