@shopify/react-native-skia 2.2.14 → 2.2.16

package/lib/typescript/src/sksg/Container.native.d.ts

@@ -1,14 +1,12 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkSize } from "../skia/types";
+import type { Skia } from "../skia/types";
 import { Container, StaticContainer } from "./StaticContainer";
 import "../skia/NativeSetup";
 import "../views/api";
 declare class NativeReanimatedContainer extends Container {
     private nativeId;
-    private onSize?;
     private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }
-export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | NativeReanimatedContainer;
+export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | NativeReanimatedContainer;
 export {};

package/lib/typescript/src/sksg/Container.web.d.ts

@@ -1,5 +1,4 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkSize } from "../skia/types";
+import type { Skia } from "../skia/types";
 import { Container, StaticContainer } from "./StaticContainer";
 import "../skia/NativeSetup";
 import "../views/api";
@@ -9,5 +8,5 @@ declare class ReanimatedContainer extends Container {
     constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }
-export declare const createContainer: (Skia: Skia, nativeId: number, _onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer;
+export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | ReanimatedContainer;
 export {};

package/lib/typescript/src/sksg/Reconciler.d.ts

@@ -1,13 +1,12 @@
 import type { ReactNode } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import type { SkCanvas, Skia, SkSize } from "../skia/types";
+import type { SkCanvas, Skia } from "../skia/types";
 import { NodeType } from "../dom/types";
 import "./Elements";
 export declare class SkiaSGRoot {
     Skia: Skia;
     private root;
     private container;
-    constructor(Skia: Skia, nativeId?: number, onSize?: SharedValue<SkSize>);
+    constructor(Skia: Skia, nativeId?: number);
     get sg(): {
         type: NodeType;
         props: {};

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/Platform/Platform.ts

@@ -15,8 +15,11 @@ export const Platform: IPlatform = {
   OS: RNPlatform.OS,
   PixelRatio: PixelRatio.get(),
   resolveAsset: (source: DataModule) => {
+    // eslint-disable-next-line no-nested-ternary
     return isRNModule(source)
       ? Image.resolveAssetSource(source).uri
+      : "uri" in source
+      ? source.uri
       : source.default;
   },
   findNodeHandle,

package/src/Platform/Platform.web.tsx

@@ -146,6 +146,9 @@ export const Platform: IPlatform = {
         "Asset source is a number - this is not supported on the web"
       );
     }
+    if ("uri" in source) {
+      return source.uri;
+    }
     return source.default;
   },
   findNodeHandle: () => {

package/src/__tests__/globalSetup.ts

@@ -4,12 +4,14 @@ import { WebSocketServer } from "ws";
 declare global {
   var testServer: Server;
   var testClient: WebSocket;
-  var testOS: "ios" | "android" | "web" | "node";
+  var testOS: "ios" | "android" | "web" | "node" | "macos";
   var testArch: "paper" | "fabric";
 }
 
-const isOS = (os: string): os is "android" | "ios" | "web" => {
-  return ["ios", "android", "web"].indexOf(os) !== -1;
+const isOS = (
+  os: string
+): os is "android" | "ios" | "web" | "node" | "macos" => {
+  return ["ios", "android", "web", "node", "macos"].indexOf(os) !== -1;
 };
 
 const isArch = (arc: string): arc is "paper" | "fabric" => {

package/src/renderer/Canvas.tsx

@@ -15,14 +15,16 @@ import type {
   View,
   ViewProps,
 } from "react-native";
-import { type SharedValue } from "react-native-reanimated";
+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";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
 import { Platform } from "../Platform";
+import { HAS_REANIMATED_3 } from "../external";
 
 export interface CanvasRef extends FC<CanvasProps> {
   makeImageSnapshot(rect?: SkRect): SkImage;
@@ -35,6 +37,8 @@ export interface CanvasRef extends FC<CanvasProps> {
 
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
+const useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;
+
 export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
   const ourRef = useCanvasRef();
   const ref = userRef ?? ourRef;
@@ -88,10 +92,28 @@ export const Canvas = ({
   }, []);
 
   // Root
-  const root = useMemo(
-    () => new SkiaSGRoot(Skia, nativeId, onSize),
-    [nativeId, onSize]
-  );
+  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+
+  useReanimatedFrame(() => {
+    "worklet";
+  }, !!onSize);
+  useEffect(() => {
+    if (onSize) {
+      Rea.runOnUI(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        global[`__onSize_${nativeId}`] = onSize;
+      })();
+      return () => {
+        Rea.runOnUI(() => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          delete global[`__onSize_${nativeId}`];
+        })();
+      };
+    }
+    return undefined;
+  }, [onSize, nativeId]);
 
   // Render effects
   useLayoutEffect(() => {

package/src/renderer/__tests__/setup.tsx

@@ -21,7 +21,7 @@ import { SkiaObject } from "./e2e/setup";
 
 jest.setTimeout(180 * 1000);
 
-type TestOS = "ios" | "android" | "web" | "node";
+type TestOS = "ios" | "android" | "web" | "node" | "macos";
 
 declare global {
   var testServer: Server;

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,