@shopify/react-native-skia 2.2.0 → 2.2.1

package/lib/typescript/lib/module/renderer/Canvas.d.ts

@@ -1,12 +1,20 @@
 export function useCanvasRef(): React.RefObject<null>;
-export function Canvas({ debug, opaque, children, onSize, onLayout: _onLayout, colorSpace, ref, ...viewProps }: {
+export function useCanvasSize(): {
+    ref: React.RefObject<null>;
+    size: {
+        width: number;
+        height: number;
+    };
+};
+export const isFabric: boolean;
+export function Canvas({ debug, opaque, children, onSize, colorSpace, ref, onLayout, ...viewProps }: {
     [x: string]: any;
     debug: any;
     opaque: any;
     children: any;
     onSize: any;
-    onLayout: any;
     colorSpace?: string | undefined;
     ref: any;
+    onLayout: any;
 }): React.CElement<object, React.Component<object, {}, any> & import("react-native").NativeMethods>;
 import React from "react";

package/lib/typescript/lib/module/sksg/Container.d.ts

@@ -1,7 +1,6 @@
 export class Container {
-    constructor(Skia: any, nativeId: any);
+    constructor(Skia: any);
     Skia: any;
-    nativeId: any;
     set root(value: any);
     get root(): any;
     _root: any;
@@ -10,8 +9,11 @@ export class Container {
     unmount(): void;
     drawOnCanvas(canvas: any): void;
 }
-export function createContainer(Skia: any, nativeId: any): StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
+export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
 declare class StaticContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
     redraw(): void;
     recording: {
         commands: any;
@@ -20,6 +22,9 @@ declare class StaticContainer extends Container {
     } | undefined;
 }
 declare class ReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
     redraw(): void;
     recording: {
         commands: any;
@@ -28,6 +33,9 @@ declare class ReanimatedContainer extends Container {
     mapperId: any;
 }
 declare class NativeReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
     redraw(): void;
     mapperId: any;
 }

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

@@ -1,7 +1,9 @@
 export class SkiaSGRoot {
-    constructor(Skia: any, nativeId?: number);
+    constructor(Skia: any, nativeId: number | undefined, onSize: any);
     Skia: any;
     container: {
+        nativeId: any;
+        onSize: any;
         redraw(): void;
         recording: {
             commands: any;
@@ -9,7 +11,6 @@ export class SkiaSGRoot {
             animationValues: any;
         } | undefined;
         Skia: any;
-        nativeId: any;
         root: any;
         _root: any;
         mount(): void;
@@ -17,6 +18,8 @@ export class SkiaSGRoot {
         unmount(): void;
         drawOnCanvas(canvas: any): void;
     } | {
+        nativeId: any;
+        onSize: any;
         redraw(): void;
         recording: {
             commands: any;
@@ -24,7 +27,6 @@ export class SkiaSGRoot {
         } | undefined;
         mapperId: any;
         Skia: any;
-        nativeId: any;
         root: any;
         _root: any;
         mount(): void;
@@ -32,10 +34,11 @@ export class SkiaSGRoot {
         unmount(): void;
         drawOnCanvas(canvas: any): void;
     } | {
+        nativeId: any;
+        onSize: any;
         redraw(): void;
         mapperId: any;
         Skia: any;
-        nativeId: any;
         root: any;
         _root: any;
         mount(): void;

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -1,20 +1,27 @@
 import type { FC } from "react";
 import React from "react";
-import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
+import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
+import { type SharedValue } from "react-native-reanimated";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 export interface CanvasRef extends FC<CanvasProps> {
     makeImageSnapshot(rect?: SkRect): SkImage;
     makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
     redraw(): void;
     getNativeId(): number;
+    measure(callback: MeasureOnSuccessCallback): void;
+    measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
 }
 export declare const useCanvasRef: () => React.RefObject<CanvasRef | null>;
-export interface CanvasProps extends ViewProps {
+export declare const useCanvasSize: () => {
+    ref: React.RefObject<CanvasRef | null>;
+    size: SkSize;
+};
+export declare const isFabric: boolean;
+export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
     debug?: boolean;
     opaque?: boolean;
     onSize?: SharedValue<SkSize>;
     colorSpace?: "p3" | "srgb";
     ref?: React.Ref<CanvasRef>;
 }
-export declare const Canvas: ({ debug, opaque, children, onSize, onLayout: _onLayout, colorSpace, ref, ...viewProps }: CanvasProps) => React.JSX.Element;
+export declare const Canvas: ({ debug, opaque, children, onSize, colorSpace, ref, onLayout, ...viewProps }: CanvasProps) => React.JSX.Element;

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

@@ -1,14 +1,14 @@
-import type { Skia, SkCanvas } from "../skia/types";
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkCanvas, SkSize } from "../skia/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
 import "../views/api";
 export declare abstract class Container {
     protected Skia: Skia;
-    protected nativeId: number;
     private _root;
     protected recording: Recording | null;
     protected unmounted: boolean;
-    constructor(Skia: Skia, nativeId: number);
+    constructor(Skia: Skia);
     get root(): Node[];
     set root(value: Node[]);
     mount(): void;
@@ -17,18 +17,24 @@ export declare abstract class Container {
     abstract redraw(): void;
 }
 declare class StaticContainer extends Container {
-    constructor(Skia: Skia, nativeId: number);
+    private nativeId;
+    private onSize?;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
     redraw(): void;
 }
 declare class ReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
     private mapperId;
-    constructor(Skia: Skia, nativeId: number);
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
     redraw(): void;
 }
 declare class NativeReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
     private mapperId;
-    constructor(Skia: Skia, nativeId: number);
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
     redraw(): void;
 }
-export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
 export {};

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

@@ -1,12 +1,13 @@
 import type { ReactNode } from "react";
-import type { SkCanvas, Skia } from "../skia/types";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkCanvas, Skia, SkSize } 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);
+    constructor(Skia: Skia, nativeId?: number, onSize?: SharedValue<SkSize>);
     get sg(): {
         type: NodeType;
         props: {};

package/lib/typescript/src/views/types.d.ts

@@ -12,6 +12,7 @@ export interface ISkiaViewApi {
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
     makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
+    size: (nativeId: number) => SkSize;
 }
 export interface SkiaBaseViewProps extends ViewProps {
     /**

package/package.json

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

package/src/renderer/Canvas.tsx

@@ -1,54 +1,55 @@
 import type { FC } from "react";
 import React, {
-  useCallback,
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
-import type { LayoutChangeEvent, ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
+import type {
+  MeasureInWindowOnSuccessCallback,
+  MeasureOnSuccessCallback,
+  View,
+  ViewProps,
+} from "react-native";
+import { type SharedValue } from "react-native-reanimated";
 
 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 type { SkiaBaseViewProps } from "../views";
 
 export interface CanvasRef extends FC<CanvasProps> {
   makeImageSnapshot(rect?: SkRect): SkImage;
   makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
   redraw(): void;
   getNativeId(): number;
+  measure(callback: MeasureOnSuccessCallback): void;
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
 }
 
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
-//const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
-
-// TODO: no need to go through the JS thread for this
-const useOnSizeEvent = (
-  resultValue: SkiaBaseViewProps["onSize"],
-  onLayout?: (event: LayoutChangeEvent) => void
-) => {
-  return useCallback(
-    (event: LayoutChangeEvent) => {
-      if (onLayout) {
-        onLayout(event);
-      }
-      const { width, height } = event.nativeEvent.layout;
-
-      if (resultValue) {
-        resultValue.value = { width, height };
-      }
-    },
-    [onLayout, resultValue]
-  );
+export const useCanvasSize = () => {
+  const ref = useCanvasRef();
+  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.measure((_x, _y, width, height) => {
+        setSize({ width, height });
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return { ref, size };
 };
 
-export interface CanvasProps extends ViewProps {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isFabric = Boolean((global as any)?.nativeFabricUIManager);
+
+export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   debug?: boolean;
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
@@ -61,24 +62,36 @@ export const Canvas = ({
   opaque,
   children,
   onSize,
-  onLayout: _onLayout,
   colorSpace = "p3",
   ref,
+  // Here know this is a type error but this is done on purpose to check it at runtime
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  onLayout,
   ...viewProps
 }: CanvasProps) => {
-  const onLayout = useOnSizeEvent(onSize, _onLayout);
+  if (onLayout && isFabric) {
+    console.error(
+      // eslint-disable-next-line max-len
+      "<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size"
+    );
+  }
+  const viewRef = useRef<View>(null);
   // Native ID
   const nativeId = useMemo(() => {
     return SkiaViewNativeId.current++;
   }, []);
 
   // Root
-  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+  const root = useMemo(
+    () => new SkiaSGRoot(Skia, nativeId, onSize),
+    [nativeId, onSize]
+  );
 
   // Render effects
   useLayoutEffect(() => {
     root.render(children);
-  }, [children, root]);
+  }, [children, root, nativeId]);
 
   useEffect(() => {
     return () => {
@@ -103,16 +116,23 @@ export const Canvas = ({
         getNativeId: () => {
           return nativeId;
         },
+        measure: (callback) => {
+          viewRef.current?.measure(callback);
+        },
+        measureInWindow: (callback) => {
+          viewRef.current?.measureInWindow(callback);
+        },
       } as CanvasRef)
   );
+
   return (
     <SkiaPictureViewNativeComponent
+      ref={viewRef}
       collapsable={false}
       nativeID={`${nativeId}`}
       debug={debug}
       opaque={opaque}
       colorSpace={colorSpace}
-      onLayout={onLayout}
       {...viewProps}
     />
   );

package/src/sksg/Container.ts

@@ -1,5 +1,7 @@
+import type { SharedValue } from "react-native-reanimated";
+
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkCanvas } from "../skia/types";
+import type { Skia, SkCanvas, SkSize } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
 
@@ -13,9 +15,22 @@ import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
 import "../views/api";
 
-const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
+const drawOnscreen = (
+  Skia: Skia,
+  nativeId: number,
+  recording: Recording,
+  onSize?: SharedValue<SkSize>
+) => {
   "worklet";
-
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
   //const start = performance.now();
@@ -28,11 +43,23 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
 
-const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
+const nativeDrawOnscreen = (
+  nativeId: number,
+  recorder: JsiRecorder,
+  onSize?: SharedValue<SkSize>
+) => {
   "worklet";
 
   //const start = performance.now();
-
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
   const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
@@ -44,7 +71,7 @@ export abstract class Container {
   protected recording: Recording | null = null;
   protected unmounted = false;
 
-  constructor(protected Skia: Skia, protected nativeId: number) {}
+  constructor(protected Skia: Skia) {}
 
   get root() {
     return this._root;
@@ -78,8 +105,12 @@ export abstract class Container {
 }
 
 class StaticContainer extends Container {
-  constructor(Skia: Skia, nativeId: number) {
-    super(Skia, nativeId);
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
   }
 
   redraw() {
@@ -88,6 +119,15 @@ class StaticContainer extends Container {
     this.recording = recorder.getRecording();
     const isOnScreen = this.nativeId !== -1;
     if (isOnScreen) {
+      if (this.onSize) {
+        const size = SkiaViewApi.size(this.nativeId);
+        if (
+          size.width !== this.onSize.value.width ||
+          size.height !== this.onSize.value.height
+        ) {
+          this.onSize.value = size;
+        }
+      }
       const rec = this.Skia.PictureRecorder();
       const canvas = rec.beginRecording();
       this.drawOnCanvas(canvas);
@@ -100,8 +140,12 @@ class StaticContainer extends Container {
 class ReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
-  constructor(Skia: Skia, nativeId: number) {
-    super(Skia, nativeId);
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
   }
 
   redraw() {
@@ -128,7 +172,7 @@ class ReanimatedContainer extends Container {
     }
     Rea.runOnUI(() => {
       "worklet";
-      drawOnscreen(Skia, nativeId, recording!);
+      drawOnscreen(Skia, nativeId, recording!, this.onSize);
     })();
   }
 }
@@ -136,8 +180,12 @@ class ReanimatedContainer extends Container {
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
-  constructor(Skia: Skia, nativeId: number) {
-    super(Skia, nativeId);
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
   }
 
   redraw() {
@@ -152,27 +200,32 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI(() => {
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder);
-    })();
+      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+    })(this.onSize);
     if (sharedValues.length > 0) {
+      const { onSize } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
       }, sharedValues);
     }
   }
 }
 
-export const createContainer = (Skia: Skia, nativeId: number) => {
+export const createContainer = (
+  Skia: Skia,
+  nativeId: number,
+  onSize?: SharedValue<SkSize>
+) => {
   const web = global.SkiaViewApi && global.SkiaViewApi.web;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
     if (!web) {
-      return new NativeReanimatedContainer(Skia, nativeId);
+      return new NativeReanimatedContainer(Skia, nativeId, onSize);
     } else {
-      return new ReanimatedContainer(Skia, nativeId);
+      return new ReanimatedContainer(Skia, nativeId, onSize);
     }
   } else {
     return new StaticContainer(Skia, nativeId);

package/src/sksg/Reconciler.ts

@@ -1,13 +1,15 @@
 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 } from "../skia/types";
+import type { SkCanvas, Skia, SkSize } from "../skia/types";
 import { NodeType } from "../dom/types";
 
 import { debug, sksgHostConfig } from "./HostConfig";
 import type { Container } from "./Container";
 import { createContainer } from "./Container";
+
 import "./Elements";
 
 const skiaReconciler = ReactReconciler(sksgHostConfig);
@@ -22,8 +24,8 @@ export class SkiaSGRoot {
   private root: OpaqueRoot;
   private container: Container;
 
-  constructor(public Skia: Skia, nativeId = -1) {
-    this.container = createContainer(Skia, nativeId);
+  constructor(public Skia: Skia, nativeId = -1, onSize?: SharedValue<SkSize>) {
+    this.container = createContainer(Skia, nativeId, onSize);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,

package/src/views/types.ts

@@ -15,6 +15,7 @@ export interface ISkiaViewApi {
   requestRedraw: (nativeId: number) => void;
   makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
   makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
+  size: (nativeId: number) => SkSize;
 }
 
 export interface SkiaBaseViewProps extends ViewProps {