@shopify/react-native-skia 2.2.0 → 2.2.1

package/lib/module/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/module/renderer/Canvas.js

@@ -1,54 +1,67 @@
+var _global;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from "react";
+import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
 export const useCanvasRef = () => useRef(null);
-
-//const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
-
-// TODO: no need to go through the JS thread for this
-const useOnSizeEvent = (resultValue, onLayout) => {
-  return useCallback(event => {
-    if (onLayout) {
-      onLayout(event);
-    }
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    if (resultValue) {
-      resultValue.value = {
-        width,
-        height
-      };
+export const useCanvasSize = () => {
+  const ref = useCanvasRef();
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.measure((_x, _y, width, height) => {
+        setSize({
+          width,
+          height
+        });
+      });
     }
-  }, [onLayout, resultValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    ref,
+    size
+  };
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isFabric = Boolean((_global = global) === null || _global === void 0 ? void 0 : _global.nativeFabricUIManager);
 export const Canvas = ({
   debug,
   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
 }) => {
-  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(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 () => {
       root.unmount();
@@ -68,15 +81,23 @@ export const Canvas = ({
     },
     getNativeId: () => {
       return nativeId;
+    },
+    measure: callback => {
+      var _viewRef$current;
+      (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 || _viewRef$current.measure(callback);
+    },
+    measureInWindow: callback => {
+      var _viewRef$current2;
+      (_viewRef$current2 = viewRef.current) === null || _viewRef$current2 === void 0 || _viewRef$current2.measureInWindow(callback);
     }
   }));
   return /*#__PURE__*/React.createElement(SkiaPictureViewNativeComponent, _extends({
+    ref: viewRef,
     collapsable: false,
     nativeID: `${nativeId}`,
     debug: debug,
     opaque: opaque,
-    colorSpace: colorSpace,
-    onLayout: onLayout
+    colorSpace: colorSpace
   }, viewProps));
 };
 //# sourceMappingURL=Canvas.js.map

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","debug","opaque","children","onSize","_onLayout","colorSpace","ref","viewProps","nativeId","current","root","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\n//const NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  onLayout: _onLayout,\n  colorSpace = \"p3\",\n  ref,\n  ...viewProps\n}: CanvasProps) => {\n  const onLayout = useOnSizeEvent(onSize, _onLayout);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n      } as CanvasRef)\n  );\n  return (\n    <SkiaPictureViewNativeComponent\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayout}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":";AACA,OAAOA,KAAK,IACVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,eAAe,EACfC,OAAO,EACPC,MAAM,QACD,OAAO;AAId,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAOC,8BAA8B,MAAM,yCAAyC;AAEpF,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAU9B,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAML,MAAM,CAAY,IAAI,CAAC;;AAEzD;;AAEA;AACA,MAAMM,cAAc,GAAGA,CACrBC,WAAwC,EACxCC,QAA6C,KAC1C;EACH,OAAOb,WAAW,CACfc,KAAwB,IAAK;IAC5B,IAAID,QAAQ,EAAE;MACZA,QAAQ,CAACC,KAAK,CAAC;IACjB;IACA,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAACC,MAAM;IAElD,IAAIN,WAAW,EAAE;MACfA,WAAW,CAACO,KAAK,GAAG;QAAEJ,KAAK;QAAEC;MAAO,CAAC;IACvC;EACF,CAAC,EACD,CAACH,QAAQ,EAAED,WAAW,CACxB,CAAC;AACH,CAAC;AAUD,OAAO,MAAMQ,MAAM,GAAGA,CAAC;EACrBC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNX,QAAQ,EAAEY,SAAS;EACnBC,UAAU,GAAG,IAAI;EACjBC,GAAG;EACH,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMf,QAAQ,GAAGF,cAAc,CAACa,MAAM,EAAEC,SAAS,CAAC;EAClD;EACA,MAAMI,QAAQ,GAAGzB,OAAO,CAAC,MAAM;IAC7B,OAAOE,gBAAgB,CAACwB,OAAO,EAAE;EACnC,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMC,IAAI,GAAG3B,OAAO,CAAC,MAAM,IAAII,UAAU,CAACC,IAAI,EAAEoB,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEtE;EACA1B,eAAe,CAAC,MAAM;IACpB4B,IAAI,CAACC,MAAM,CAACT,QAAQ,CAAC;EACvB,CAAC,EAAE,CAACA,QAAQ,EAAEQ,IAAI,CAAC,CAAC;EAEpB9B,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX8B,IAAI,CAACE,OAAO,CAAC,CAAC;IAChB,CAAC;EACH,CAAC,EAAE,CAACF,IAAI,CAAC,CAAC;;EAEV;EACA7B,mBAAmB,CACjByB,GAAG,EACH,OACG;IACCO,iBAAiB,EAAGC,IAAa,IAAK;MACpC,OAAOC,WAAW,CAACF,iBAAiB,CAACL,QAAQ,EAAEM,IAAI,CAAC;IACtD,CAAC;IACDE,sBAAsB,EAAGF,IAAa,IAAK;MACzC,OAAOC,WAAW,CAACC,sBAAsB,CAACR,QAAQ,EAAEM,IAAI,CAAC;IAC3D,CAAC;IACDG,MAAM,EAAEA,CAAA,KAAM;MACZF,WAAW,CAACG,aAAa,CAACV,QAAQ,CAAC;IACrC,CAAC;IACDW,WAAW,EAAEA,CAAA,KAAM;MACjB,OAAOX,QAAQ;IACjB;EACF,CAAC,CACL,CAAC;EACD,oBACE9B,KAAA,CAAA0C,aAAA,CAAClC,8BAA8B,EAAAmC,QAAA;IAC7BC,WAAW,EAAE,KAAM;IACnBC,QAAQ,EAAE,GAAGf,QAAQ,EAAG;IACxBR,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfI,UAAU,EAAEA,UAAW;IACvBb,QAAQ,EAAEA;EAAS,GACfe,SAAS,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","useCanvasSize","ref","size","setSize","width","height","current","measure","_x","_y","isFabric","Boolean","_global","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","root","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport { type SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nexport const useCanvasSize = () => {\n  const ref = useCanvasRef();\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<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\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(\n    () => new SkiaSGRoot(Skia, nativeId, onSize),\n    [nativeId, onSize]\n  );\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/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/module/sksg/Container.js

@@ -9,9 +9,15 @@ import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 import "../views/api";
-const drawOnscreen = (Skia, nativeId, recording) => {
+const drawOnscreen = (Skia, nativeId, recording, onSize) => {
   "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();
@@ -23,19 +29,24 @@ const drawOnscreen = (Skia, nativeId, recording) => {
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
-const nativeDrawOnscreen = (nativeId, recorder) => {
+const nativeDrawOnscreen = (nativeId, recorder, onSize) => {
   "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);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
 export class Container {
-  constructor(Skia, nativeId) {
+  constructor(Skia) {
     this.Skia = Skia;
-    this.nativeId = nativeId;
     _defineProperty(this, "_root", []);
     _defineProperty(this, "recording", null);
     _defineProperty(this, "unmounted", false);
@@ -61,8 +72,10 @@ export class Container {
   }
 }
 class StaticContainer extends Container {
-  constructor(Skia, nativeId) {
-    super(Skia, nativeId);
+  constructor(Skia, nativeId, onSize) {
+    super(Skia);
+    this.nativeId = nativeId;
+    this.onSize = onSize;
   }
   redraw() {
     const recorder = new Recorder();
@@ -70,6 +83,12 @@ 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);
@@ -79,8 +98,10 @@ class StaticContainer extends Container {
   }
 }
 class ReanimatedContainer extends Container {
-  constructor(Skia, nativeId) {
-    super(Skia, nativeId);
+  constructor(Skia, nativeId, onSize) {
+    super(Skia);
+    this.nativeId = nativeId;
+    this.onSize = onSize;
     _defineProperty(this, "mapperId", null);
   }
   redraw() {
@@ -115,13 +136,15 @@ class ReanimatedContainer extends Container {
     Rea.runOnUI(() => {
       "worklet";
 
-      drawOnscreen(Skia, nativeId, recording);
+      drawOnscreen(Skia, nativeId, recording, this.onSize);
     })();
   }
 }
 class NativeReanimatedContainer extends Container {
-  constructor(Skia, nativeId) {
-    super(Skia, nativeId);
+  constructor(Skia, nativeId, onSize) {
+    super(Skia);
+    this.nativeId = nativeId;
+    this.onSize = onSize;
     _defineProperty(this, "mapperId", null);
   }
   redraw() {
@@ -139,28 +162,31 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI(() => {
+    Rea.runOnUI(onSize => {
       "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, nativeId) => {
+export const createContainer = (Skia, nativeId, onSize) => {
   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/lib/module/sksg/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","ReanimatedRecorder","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","nativeDrawOnscreen","recorder","play","Container","constructor","_defineProperty","root","_root","value","mount","unmounted","unmount","drawOnCanvas","Error","StaticContainer","redraw","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","web","global"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nimport \"../views/api\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nconst nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {\n  \"worklet\";\n\n  //const start = performance.now();\n\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  private _root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  get root() {\n    return this._root;\n  }\n\n  set root(value: Node[]) {\n    this._root = value;\n  }\n\n  mount() {\n    this.unmounted = false;\n  }\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder);\n    })();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const web = global.SkiaViewApi && global.SkiaViewApi.web;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (!web) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","ReanimatedRecorder","drawOnscreen","Skia","nativeId","recording","onSize","size","SkiaViewApi","width","value","height","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","setJsiProperty","nativeDrawOnscreen","recorder","play","Container","constructor","_defineProperty","root","_root","mount","unmounted","unmount","drawOnCanvas","Error","StaticContainer","redraw","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","startMapper","Array","from","runOnUI","NativeReanimatedContainer","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","web","global"],"sources":["Container.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nimport \"../views/api\";\n\nconst drawOnscreen = (\n  Skia: Skia,\n  nativeId: number,\n  recording: Recording,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  private _root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia) {}\n\n  get root() {\n    return this._root;\n  }\n\n  set root(value: Node[]) {\n    this._root = value;\n  }\n\n  mount() {\n    this.unmounted = false;\n  }\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      if (this.onSize) {\n        const size = SkiaViewApi.size(this.nativeId);\n        if (\n          size.width !== this.onSize.value.width ||\n          size.height !== this.onSize.value.height\n        ) {\n          this.onSize.value = size;\n        }\n      }\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!, this.onSize);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n    })(this.onSize);\n    if (sharedValues.length > 0) {\n      const { onSize } = this;\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  const web = global.SkiaViewApi && global.SkiaViewApi.web;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (!web) {\n      return new NativeReanimatedContainer(Skia, nativeId, onSize);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId, onSize);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":";;;AAEA,OAAOA,GAAG,MAAM,wCAAwC;AAExD,SAASC,gBAAgB,QAAQ,sCAAsC;AAKvE,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,OAAO,cAAc;AAErB,MAAMC,YAAY,GAAGA,CACnBC,IAAU,EACVC,QAAgB,EAChBC,SAAoB,EACpBC,MAA4B,KACzB;EACH,SAAS;;EACT,IAAIA,MAAM,EAAE;IACV,MAAMC,IAAI,GAAGC,WAAW,CAACD,IAAI,CAACH,QAAQ,CAAC;IACvC,IACEG,IAAI,CAACE,KAAK,KAAKH,MAAM,CAACI,KAAK,CAACD,KAAK,IACjCF,IAAI,CAACI,MAAM,KAAKL,MAAM,CAACI,KAAK,CAACC,MAAM,EACnC;MACAL,MAAM,CAACI,KAAK,GAAGH,IAAI;IACrB;EACF;EACA,MAAMK,GAAG,GAAGT,IAAI,CAACU,eAAe,CAAC,CAAC;EAClC,MAAMC,MAAM,GAAGF,GAAG,CAACG,cAAc,CAAC,CAAC;EACnC;;EAEA,MAAMC,GAAG,GAAGhB,oBAAoB,CAACG,IAAI,EAAEE,SAAS,CAACY,SAAS,EAAEH,MAAM,CAAC;EACnEf,MAAM,CAACiB,GAAG,EAAEX,SAAS,CAACa,QAAQ,CAAC;EAC/B,MAAMC,OAAO,GAAGP,GAAG,CAACQ,wBAAwB,CAAC,CAAC;EAC9C;EACA;EACAZ,WAAW,CAACa,cAAc,CAACjB,QAAQ,EAAE,SAAS,EAAEe,OAAO,CAAC;AAC1D,CAAC;AAED,MAAMG,kBAAkB,GAAGA,CACzBlB,QAAgB,EAChBmB,QAAqB,EACrBjB,MAA4B,KACzB;EACH,SAAS;;EAET;EACA,IAAIA,MAAM,EAAE;IACV,MAAMC,IAAI,GAAGC,WAAW,CAACD,IAAI,CAACH,QAAQ,CAAC;IACvC,IACEG,IAAI,CAACE,KAAK,KAAKH,MAAM,CAACI,KAAK,CAACD,KAAK,IACjCF,IAAI,CAACI,MAAM,KAAKL,MAAM,CAACI,KAAK,CAACC,MAAM,EACnC;MACAL,MAAM,CAACI,KAAK,GAAGH,IAAI;IACrB;EACF;EACA,MAAMY,OAAO,GAAGI,QAAQ,CAACC,IAAI,CAAC,CAAC;EAC/B;EACA;EACAhB,WAAW,CAACa,cAAc,CAACjB,QAAQ,EAAE,SAAS,EAAEe,OAAO,CAAC;AAC1D,CAAC;AAED,OAAO,MAAeM,SAAS,CAAC;EAK9BC,WAAWA,CAAWvB,IAAU,EAAE;IAAA,KAAZA,IAAU,GAAVA,IAAU;IAAAwB,eAAA,gBAJR,EAAE;IAAAA,eAAA,oBACc,IAAI;IAAAA,eAAA,oBACtB,KAAK;EAEQ;EAEnC,IAAIC,IAAIA,CAAA,EAAG;IACT,OAAO,IAAI,CAACC,KAAK;EACnB;EAEA,IAAID,IAAIA,CAAClB,KAAa,EAAE;IACtB,IAAI,CAACmB,KAAK,GAAGnB,KAAK;EACpB;EAEAoB,KAAKA,CAAA,EAAG;IACN,IAAI,CAACC,SAAS,GAAG,KAAK;EACxB;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACD,SAAS,GAAG,IAAI;EACvB;EAEAE,YAAYA,CAACnB,MAAgB,EAAE;IAC7B,IAAI,CAAC,IAAI,CAACT,SAAS,EAAE;MACnB,MAAM,IAAI6B,KAAK,CAAC,sBAAsB,CAAC;IACzC;IACA,MAAMlB,GAAG,GAAGhB,oBAAoB,CAC9B,IAAI,CAACG,IAAI,EACT,IAAI,CAACE,SAAS,CAACY,SAAS,EACxBH,MACF,CAAC;IACDf,MAAM,CAACiB,GAAG,EAAE,IAAI,CAACX,SAAS,CAACa,QAAQ,CAAC;EACtC;AAGF;AAEA,MAAMiB,eAAe,SAASV,SAAS,CAAC;EACtCC,WAAWA,CACTvB,IAAU,EACFC,QAAgB,EAChBE,MAA4B,EACpC;IACA,KAAK,CAACH,IAAI,CAAC;IAAC,KAHJC,QAAgB,GAAhBA,QAAgB;IAAA,KAChBE,MAA4B,GAA5BA,MAA4B;EAGtC;EAEA8B,MAAMA,CAAA,EAAG;IACP,MAAMb,QAAQ,GAAG,IAAI1B,QAAQ,CAAC,CAAC;IAC/BC,KAAK,CAACyB,QAAQ,EAAE,IAAI,CAACK,IAAI,CAAC;IAC1B,IAAI,CAACvB,SAAS,GAAGkB,QAAQ,CAACc,YAAY,CAAC,CAAC;IACxC,MAAMC,UAAU,GAAG,IAAI,CAAClC,QAAQ,KAAK,CAAC,CAAC;IACvC,IAAIkC,UAAU,EAAE;MACd,IAAI,IAAI,CAAChC,MAAM,EAAE;QACf,MAAMC,IAAI,GAAGC,WAAW,CAACD,IAAI,CAAC,IAAI,CAACH,QAAQ,CAAC;QAC5C,IACEG,IAAI,CAACE,KAAK,KAAK,IAAI,CAACH,MAAM,CAACI,KAAK,CAACD,KAAK,IACtCF,IAAI,CAACI,MAAM,KAAK,IAAI,CAACL,MAAM,CAACI,KAAK,CAACC,MAAM,EACxC;UACA,IAAI,CAACL,MAAM,CAACI,KAAK,GAAGH,IAAI;QAC1B;MACF;MACA,MAAMK,GAAG,GAAG,IAAI,CAACT,IAAI,CAACU,eAAe,CAAC,CAAC;MACvC,MAAMC,MAAM,GAAGF,GAAG,CAACG,cAAc,CAAC,CAAC;MACnC,IAAI,CAACkB,YAAY,CAACnB,MAAM,CAAC;MACzB,MAAMK,OAAO,GAAGP,GAAG,CAACQ,wBAAwB,CAAC,CAAC;MAC9CZ,WAAW,CAACa,cAAc,CAAC,IAAI,CAACjB,QAAQ,EAAE,SAAS,EAAEe,OAAO,CAAC;IAC/D;EACF;AACF;AAEA,MAAMoB,mBAAmB,SAASd,SAAS,CAAC;EAG1CC,WAAWA,CACTvB,IAAU,EACFC,QAAgB,EAChBE,MAA4B,EACpC;IACA,KAAK,CAACH,IAAI,CAAC;IAAC,KAHJC,QAAgB,GAAhBA,QAAgB;IAAA,KAChBE,MAA4B,GAA5BA,MAA4B;IAAAqB,eAAA,mBALJ,IAAI;EAQtC;EAEAS,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACI,QAAQ,KAAK,IAAI,EAAE;MAC1B7C,GAAG,CAAC8C,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACT,SAAS,EAAE;MAClB;IACF;IACA,MAAMR,QAAQ,GAAG,IAAI1B,QAAQ,CAAC,CAAC;IAC/BC,KAAK,CAACyB,QAAQ,EAAE,IAAI,CAACK,IAAI,CAAC;IAC1B,MAAMc,MAAM,GAAGnB,QAAQ,CAACc,YAAY,CAAC,CAAC;IACtC,MAAM;MAAEM;IAAgB,CAAC,GAAGD,MAAM;IAClC,IAAI,CAACrC,SAAS,GAAG;MACfa,QAAQ,EAAEwB,MAAM,CAACxB,QAAQ;MACzBD,SAAS,EAAEyB,MAAM,CAACzB;IACpB,CAAC;IACD,MAAM;MAAEb,QAAQ;MAAED,IAAI;MAAEE;IAAU,CAAC,GAAG,IAAI;IAC1C,IAAIsC,eAAe,CAACpC,IAAI,GAAG,CAAC,EAAE;MAC5B,IAAI,CAACiC,QAAQ,GAAG7C,GAAG,CAACiD,WAAW,CAAC,MAAM;QACpC,SAAS;;QACT1C,YAAY,CAACC,IAAI,EAAEC,QAAQ,EAAEC,SAAU,CAAC;MAC1C,CAAC,EAAEwC,KAAK,CAACC,IAAI,CAACH,eAAe,CAAC,CAAC;IACjC;IACAhD,GAAG,CAACoD,OAAO,CAAC,MAAM;MAChB,SAAS;;MACT7C,YAAY,CAACC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAG,IAAI,CAACC,MAAM,CAAC;IACvD,CAAC,CAAC,CAAC,CAAC;EACN;AACF;AAEA,MAAM0C,yBAAyB,SAASvB,SAAS,CAAC;EAGhDC,WAAWA,CACTvB,IAAU,EACFC,QAAgB,EAChBE,MAA4B,EACpC;IACA,KAAK,CAACH,IAAI,CAAC;IAAC,KAHJC,QAAgB,GAAhBA,QAAgB;IAAA,KAChBE,MAA4B,GAA5BA,MAA4B;IAAAqB,eAAA,mBALJ,IAAI;EAQtC;EAEAS,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACI,QAAQ,KAAK,IAAI,EAAE;MAC1B7C,GAAG,CAAC8C,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACT,SAAS,EAAE;MAClB;IACF;IACA,MAAM;MAAE3B,QAAQ;MAAED;IAAK,CAAC,GAAG,IAAI;IAC/B,MAAMoB,QAAQ,GAAG,IAAItB,kBAAkB,CAACE,IAAI,CAAC;IAC7CL,KAAK,CAACyB,QAAQ,EAAE,IAAI,CAACK,IAAI,CAAC;IAC1B,MAAMqB,YAAY,GAAG1B,QAAQ,CAAC2B,eAAe,CAAC,CAAC;IAC/C,MAAMC,cAAc,GAAG5B,QAAQ,CAAC6B,WAAW,CAAC,CAAC;IAC7CzD,GAAG,CAACoD,OAAO,CAAEzC,MAA4B,IAAK;MAC5C,SAAS;;MACTgB,kBAAkB,CAAClB,QAAQ,EAAE+C,cAAc,EAAE7C,MAAM,CAAC;IACtD,CAAC,CAAC,CAAC,IAAI,CAACA,MAAM,CAAC;IACf,IAAI2C,YAAY,CAACI,MAAM,GAAG,CAAC,EAAE;MAC3B,MAAM;QAAE/C;MAAO,CAAC,GAAG,IAAI;MACvB,IAAI,CAACkC,QAAQ,GAAG7C,GAAG,CAACiD,WAAW,CAAC,MAAM;QACpC,SAAS;;QACTO,cAAc,CAACG,YAAY,CAACL,YAAY,CAAC;QACzC3B,kBAAkB,CAAClB,QAAQ,EAAE+C,cAAc,EAAE7C,MAAM,CAAC;MACtD,CAAC,EAAE2C,YAAY,CAAC;IAClB;EACF;AACF;AAEA,OAAO,MAAMM,eAAe,GAAGA,CAC7BpD,IAAU,EACVC,QAAgB,EAChBE,MAA4B,KACzB;EACH,MAAMkD,GAAG,GAAGC,MAAM,CAACjD,WAAW,IAAIiD,MAAM,CAACjD,WAAW,CAACgD,GAAG;EACxD,IAAI5D,gBAAgB,IAAIQ,QAAQ,KAAK,CAAC,CAAC,EAAE;IACvC,IAAI,CAACoD,GAAG,EAAE;MACR,OAAO,IAAIR,yBAAyB,CAAC7C,IAAI,EAAEC,QAAQ,EAAEE,MAAM,CAAC;IAC9D,CAAC,MAAM;MACL,OAAO,IAAIiC,mBAAmB,CAACpC,IAAI,EAAEC,QAAQ,EAAEE,MAAM,CAAC;IACxD;EACF,CAAC,MAAM;IACL,OAAO,IAAI6B,eAAe,CAAChC,IAAI,EAAEC,QAAQ,CAAC;EAC5C;AACF,CAAC","ignoreList":[]}

package/lib/module/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/module/sksg/Reconciler.js

@@ -13,11 +13,11 @@ skiaReconciler.injectIntoDevTools({
   rendererPackageName: "react-native-skia"
 });
 export class SkiaSGRoot {
-  constructor(Skia, nativeId = -1) {
+  constructor(Skia, nativeId = -1, onSize) {
     this.Skia = Skia;
     _defineProperty(this, "root", void 0);
     _defineProperty(this, "container", void 0);
-    this.container = createContainer(Skia, nativeId);
+    this.container = createContainer(Skia, nativeId, onSize);
     this.root = skiaReconciler.createContainer(this.container, 0, null, true, null, "", console.error, null);
   }
   get sg() {

package/lib/module/sksg/Reconciler.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactReconciler","NodeType","debug","sksgHostConfig","createContainer","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaSGRoot","constructor","Skia","nativeId","_defineProperty","container","root","console","error","sg","children","type","Group","props","isDeclaration","updateContainer","element","Promise","resolve","render","mount","redraw","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","finishRecordingAsPicture","unmount"],"sources":["Reconciler.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { SkCanvas, Skia } from \"../skia/types\";\nimport { NodeType } from \"../dom/types\";\n\nimport { debug, sksgHostConfig } from \"./HostConfig\";\nimport type { Container } from \"./Container\";\nimport { createContainer } from \"./Container\";\nimport \"./Elements\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaSGRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(public Skia: Skia, nativeId = -1) {\n    this.container = createContainer(Skia, nativeId);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      true,\n      null,\n      \"\",\n      console.error,\n      null\n    );\n  }\n\n  get sg() {\n    const children = this.container.root;\n    return { type: NodeType.Group, props: {}, children, isDeclaration: false };\n  }\n\n  private updateContainer(element: ReactNode) {\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(element, this.root, null, () => {\n        debug(\"updateContainer\");\n        resolve(true);\n      });\n    });\n  }\n\n  async render(element: ReactNode) {\n    this.container.mount();\n    await this.updateContainer(element);\n    this.container.redraw();\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    this.container.drawOnCanvas(canvas);\n  }\n\n  getPicture() {\n    const recorder = this.Skia.PictureRecorder();\n    const canvas = recorder.beginRecording();\n    this.drawOnCanvas(canvas);\n    return recorder.finishRecordingAsPicture();\n  }\n\n  unmount() {\n    this.container.unmount();\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(null, this.root, null, () => {\n        debug(\"unmountContainer\");\n        resolve(true);\n      });\n    });\n  }\n}\n"],"mappings":";;;AAEA,OAAOA,eAAe,MAAM,kBAAkB;AAG9C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,KAAK,EAAEC,cAAc,QAAQ,cAAc;AAEpD,SAASC,eAAe,QAAQ,aAAa;AAC7C,OAAO,YAAY;AAEnB,MAAMC,cAAc,GAAGL,eAAe,CAACG,cAAc,CAAC;AAEtDE,cAAc,CAACC,kBAAkB,CAAC;EAChCC,UAAU,EAAE,CAAC;EACbC,OAAO,EAAE,OAAO;EAChBC,mBAAmB,EAAE;AACvB,CAAC,CAAC;AAEF,OAAO,MAAMC,UAAU,CAAC;EAItBC,WAAWA,CAAQC,IAAU,EAAEC,QAAQ,GAAG,CAAC,CAAC,EAAE;IAAA,KAA3BD,IAAU,GAAVA,IAAU;IAAAE,eAAA;IAAAA,eAAA;IAC3B,IAAI,CAACC,SAAS,GAAGX,eAAe,CAACQ,IAAI,EAAEC,QAAQ,CAAC;IAChD,IAAI,CAACG,IAAI,GAAGX,cAAc,CAACD,eAAe,CACxC,IAAI,CAACW,SAAS,EACd,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,EAAE,EACFE,OAAO,CAACC,KAAK,EACb,IACF,CAAC;EACH;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACP,MAAMC,QAAQ,GAAG,IAAI,CAACL,SAAS,CAACC,IAAI;IACpC,OAAO;MAAEK,IAAI,EAAEpB,QAAQ,CAACqB,KAAK;MAAEC,KAAK,EAAE,CAAC,CAAC;MAAEH,QAAQ;MAAEI,aAAa,EAAE;IAAM,CAAC;EAC5E;EAEQC,eAAeA,CAACC,OAAkB,EAAE;IAC1C,OAAO,IAAIC,OAAO,CAAEC,OAAO,IAAK;MAC9BvB,cAAc,CAACoB,eAAe,CAACC,OAAO,EAAE,IAAI,CAACV,IAAI,EAAE,IAAI,EAAE,MAAM;QAC7Dd,KAAK,CAAC,iBAAiB,CAAC;QACxB0B,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;EAEA,MAAMC,MAAMA,CAACH,OAAkB,EAAE;IAC/B,IAAI,CAACX,SAAS,CAACe,KAAK,CAAC,CAAC;IACtB,MAAM,IAAI,CAACL,eAAe,CAACC,OAAO,CAAC;IACnC,IAAI,CAACX,SAAS,CAACgB,MAAM,CAAC,CAAC;EACzB;EAEAC,YAAYA,CAACC,MAAgB,EAAE;IAC7B,IAAI,CAAClB,SAAS,CAACiB,YAAY,CAACC,MAAM,CAAC;EACrC;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAMC,QAAQ,GAAG,IAAI,CAACvB,IAAI,CAACwB,eAAe,CAAC,CAAC;IAC5C,MAAMH,MAAM,GAAGE,QAAQ,CAACE,cAAc,CAAC,CAAC;IACxC,IAAI,CAACL,YAAY,CAACC,MAAM,CAAC;IACzB,OAAOE,QAAQ,CAACG,wBAAwB,CAAC,CAAC;EAC5C;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACxB,SAAS,CAACwB,OAAO,CAAC,CAAC;IACxB,OAAO,IAAIZ,OAAO,CAAEC,OAAO,IAAK;MAC9BvB,cAAc,CAACoB,eAAe,CAAC,IAAI,EAAE,IAAI,CAACT,IAAI,EAAE,IAAI,EAAE,MAAM;QAC1Dd,KAAK,CAAC,kBAAkB,CAAC;QACzB0B,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;AACF","ignoreList":[]}
+{"version":3,"names":["ReactReconciler","NodeType","debug","sksgHostConfig","createContainer","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaSGRoot","constructor","Skia","nativeId","onSize","_defineProperty","container","root","console","error","sg","children","type","Group","props","isDeclaration","updateContainer","element","Promise","resolve","render","mount","redraw","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","finishRecordingAsPicture","unmount"],"sources":["Reconciler.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport type { SharedValue } from \"react-native-reanimated\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { SkCanvas, Skia, SkSize } from \"../skia/types\";\nimport { NodeType } from \"../dom/types\";\n\nimport { debug, sksgHostConfig } from \"./HostConfig\";\nimport type { Container } from \"./Container\";\nimport { createContainer } from \"./Container\";\n\nimport \"./Elements\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaSGRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(public Skia: Skia, nativeId = -1, onSize?: SharedValue<SkSize>) {\n    this.container = createContainer(Skia, nativeId, onSize);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      true,\n      null,\n      \"\",\n      console.error,\n      null\n    );\n  }\n\n  get sg() {\n    const children = this.container.root;\n    return { type: NodeType.Group, props: {}, children, isDeclaration: false };\n  }\n\n  private updateContainer(element: ReactNode) {\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(element, this.root, null, () => {\n        debug(\"updateContainer\");\n        resolve(true);\n      });\n    });\n  }\n\n  async render(element: ReactNode) {\n    this.container.mount();\n    await this.updateContainer(element);\n    this.container.redraw();\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    this.container.drawOnCanvas(canvas);\n  }\n\n  getPicture() {\n    const recorder = this.Skia.PictureRecorder();\n    const canvas = recorder.beginRecording();\n    this.drawOnCanvas(canvas);\n    return recorder.finishRecordingAsPicture();\n  }\n\n  unmount() {\n    this.container.unmount();\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(null, this.root, null, () => {\n        debug(\"unmountContainer\");\n        resolve(true);\n      });\n    });\n  }\n}\n"],"mappings":";;;AAGA,OAAOA,eAAe,MAAM,kBAAkB;AAG9C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,KAAK,EAAEC,cAAc,QAAQ,cAAc;AAEpD,SAASC,eAAe,QAAQ,aAAa;AAE7C,OAAO,YAAY;AAEnB,MAAMC,cAAc,GAAGL,eAAe,CAACG,cAAc,CAAC;AAEtDE,cAAc,CAACC,kBAAkB,CAAC;EAChCC,UAAU,EAAE,CAAC;EACbC,OAAO,EAAE,OAAO;EAChBC,mBAAmB,EAAE;AACvB,CAAC,CAAC;AAEF,OAAO,MAAMC,UAAU,CAAC;EAItBC,WAAWA,CAAQC,IAAU,EAAEC,QAAQ,GAAG,CAAC,CAAC,EAAEC,MAA4B,EAAE;IAAA,KAAzDF,IAAU,GAAVA,IAAU;IAAAG,eAAA;IAAAA,eAAA;IAC3B,IAAI,CAACC,SAAS,GAAGZ,eAAe,CAACQ,IAAI,EAAEC,QAAQ,EAAEC,MAAM,CAAC;IACxD,IAAI,CAACG,IAAI,GAAGZ,cAAc,CAACD,eAAe,CACxC,IAAI,CAACY,SAAS,EACd,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,EAAE,EACFE,OAAO,CAACC,KAAK,EACb,IACF,CAAC;EACH;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACP,MAAMC,QAAQ,GAAG,IAAI,CAACL,SAAS,CAACC,IAAI;IACpC,OAAO;MAAEK,IAAI,EAAErB,QAAQ,CAACsB,KAAK;MAAEC,KAAK,EAAE,CAAC,CAAC;MAAEH,QAAQ;MAAEI,aAAa,EAAE;IAAM,CAAC;EAC5E;EAEQC,eAAeA,CAACC,OAAkB,EAAE;IAC1C,OAAO,IAAIC,OAAO,CAAEC,OAAO,IAAK;MAC9BxB,cAAc,CAACqB,eAAe,CAACC,OAAO,EAAE,IAAI,CAACV,IAAI,EAAE,IAAI,EAAE,MAAM;QAC7Df,KAAK,CAAC,iBAAiB,CAAC;QACxB2B,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;EAEA,MAAMC,MAAMA,CAACH,OAAkB,EAAE;IAC/B,IAAI,CAACX,SAAS,CAACe,KAAK,CAAC,CAAC;IACtB,MAAM,IAAI,CAACL,eAAe,CAACC,OAAO,CAAC;IACnC,IAAI,CAACX,SAAS,CAACgB,MAAM,CAAC,CAAC;EACzB;EAEAC,YAAYA,CAACC,MAAgB,EAAE;IAC7B,IAAI,CAAClB,SAAS,CAACiB,YAAY,CAACC,MAAM,CAAC;EACrC;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAMC,QAAQ,GAAG,IAAI,CAACxB,IAAI,CAACyB,eAAe,CAAC,CAAC;IAC5C,MAAMH,MAAM,GAAGE,QAAQ,CAACE,cAAc,CAAC,CAAC;IACxC,IAAI,CAACL,YAAY,CAACC,MAAM,CAAC;IACzB,OAAOE,QAAQ,CAACG,wBAAwB,CAAC,CAAC;EAC5C;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACxB,SAAS,CAACwB,OAAO,CAAC,CAAC;IACxB,OAAO,IAAIZ,OAAO,CAAEC,OAAO,IAAK;MAC9BxB,cAAc,CAACqB,eAAe,CAAC,IAAI,EAAE,IAAI,CAACT,IAAI,EAAE,IAAI,EAAE,MAAM;QAC1Df,KAAK,CAAC,kBAAkB,CAAC;QACzB2B,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/lib/module/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/lib/module/views/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Node } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValue<SkSize>;\n\n  opaque?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewNativeProps extends SkiaBaseViewProps {\n  root?: Node<unknown>;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Node } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n  size: (nativeId: number) => SkSize;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValue<SkSize>;\n\n  opaque?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewNativeProps extends SkiaBaseViewProps {\n  root?: Node<unknown>;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -1,12 +1,17 @@
 export const __esModule: boolean;
+export const isFabric: boolean;
 export function useCanvasRef(): any;
-export function Canvas({ debug, opaque, children, onSize, onLayout: _onLayout, colorSpace, ref, ...viewProps }: {
+export function useCanvasSize(): {
+    ref: any;
+    size: any;
+};
+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;
 }): any;

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

@@ -1,8 +1,7 @@
 export const __esModule: boolean;
 export class Container {
-    constructor(Skia: any, nativeId: any);
+    constructor(Skia: any);
     Skia: any;
-    nativeId: any;
     set root(value: any);
     get root(): any;
     _root: any;
@@ -11,12 +10,18 @@ export class Container {
     unmount(): void;
     drawOnCanvas(canvas: any): void;
 }
-export function createContainer(Skia: any, nativeId: any): NativeReanimatedContainer | ReanimatedContainer | StaticContainer;
+export function createContainer(Skia: any, nativeId: any, onSize: any): NativeReanimatedContainer | ReanimatedContainer | StaticContainer;
 declare class NativeReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
     redraw(): void;
     mapperId: any;
 }
 declare class ReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
     redraw(): void;
     recording: {
         commands: any;
@@ -25,6 +30,9 @@ declare class ReanimatedContainer extends Container {
     mapperId: any;
 }
 declare class StaticContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
     redraw(): void;
     recording: {
         commands: any;

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

@@ -1,12 +1,13 @@
 export const __esModule: boolean;
 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;
         mapperId: any;
         Skia: any;
-        nativeId: any;
         root: any;
         _root: any;
         mount(): void;
@@ -14,6 +15,8 @@ export class SkiaSGRoot {
         unmount(): void;
         drawOnCanvas(canvas: any): void;
     } | {
+        nativeId: any;
+        onSize: any;
         redraw(): void;
         recording: {
             commands: any;
@@ -21,7 +24,6 @@ export class SkiaSGRoot {
         } | undefined;
         mapperId: any;
         Skia: any;
-        nativeId: any;
         root: any;
         _root: any;
         mount(): void;
@@ -29,6 +31,8 @@ export class SkiaSGRoot {
         unmount(): void;
         drawOnCanvas(canvas: any): void;
     } | {
+        nativeId: any;
+        onSize: any;
         redraw(): void;
         recording: {
             commands: any;
@@ -36,7 +40,6 @@ export class SkiaSGRoot {
             animationValues: any;
         } | undefined;
         Skia: any;
-        nativeId: any;
         root: any;
         _root: any;
         mount(): void;