@shopify/react-native-skia 2.2.1 → 2.2.3

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp

@@ -31,14 +31,14 @@ RNSkOpenGLCanvasProvider::RNSkOpenGLCanvasProvider(
 
 RNSkOpenGLCanvasProvider::~RNSkOpenGLCanvasProvider() = default;
 
-int RNSkOpenGLCanvasProvider::getScaledWidth() {
+int RNSkOpenGLCanvasProvider::getWidth() {
   if (_surfaceHolder) {
     return _surfaceHolder->getWidth();
   }
   return 0;
 }
 
-int RNSkOpenGLCanvasProvider::getScaledHeight() {
+int RNSkOpenGLCanvasProvider::getHeight() {
   if (_surfaceHolder) {
     return _surfaceHolder->getHeight();
   }

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.h

@@ -21,9 +21,9 @@ public:
 
   ~RNSkOpenGLCanvasProvider();
 
-  int getScaledWidth() override;
+  int getWidth() override;
 
-  int getScaledHeight() override;
+  int getHeight() override;
 
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 

package/android/src/paper/java/com/facebook/react/viewmanagers/SkiaPictureViewManagerInterface.java

@@ -12,6 +12,8 @@ package com.facebook.react.viewmanagers;
 import android.view.View;
 import androidx.annotation.Nullable;
 
+import com.shopify.reactnative.skia.SkiaPictureView;
+
 public interface SkiaPictureViewManagerInterface<T extends View> {
   void setDebug(T view, boolean value);
   void setOpaque(T view, boolean value);

package/apple/RNSkMetalCanvasProvider.h

@@ -21,8 +21,8 @@ public:
 
   ~RNSkMetalCanvasProvider();
 
-  int getScaledWidth() override;
-  int getScaledHeight() override;
+  int getWidth() override;
+  int getHeight() override;
 
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 

package/apple/RNSkMetalCanvasProvider.mm

@@ -37,14 +37,14 @@ RNSkMetalCanvasProvider::~RNSkMetalCanvasProvider() {}
 /**
  Returns the scaled width of the view
  */
-int RNSkMetalCanvasProvider::getScaledWidth() {
+int RNSkMetalCanvasProvider::getWidth() {
   return _ctx ? _ctx->getWidth() : -1;
 };
 
 /**
  Returns the scaled height of the view
  */
-int RNSkMetalCanvasProvider::getScaledHeight() {
+int RNSkMetalCanvasProvider::getHeight() {
   return _ctx ? _ctx->getHeight() : -1;
 };
 

package/cpp/rnskia/RNSkView.h

@@ -33,12 +33,12 @@ public:
   /**
    Returns the scaled width of the view
    */
-  virtual int getScaledWidth() = 0;
+  virtual int getWidth() = 0;
 
   /**
    Returns the scaled height of the view
    */
-  virtual int getScaledHeight() = 0;
+  virtual int getHeight() = 0;
 
   /**
    Render to a canvas
@@ -104,12 +104,12 @@ public:
   /**
    Returns the scaled width of the view
    */
-  int getScaledWidth() override { return _width; };
+  int getWidth() override { return _width; };
 
   /**
    Returns the scaled height of the view
    */
-  int getScaledHeight() override { return _height; };
+  int getHeight() override { return _height; };
 
   /**
    Render to a canvas
@@ -195,7 +195,7 @@ public:
 
     auto provider = std::make_shared<RNSkOffscreenCanvasProvider>(
         getPlatformContext(), std::bind(&RNSkView::requestRedraw, this),
-        _canvasProvider->getScaledWidth(), _canvasProvider->getScaledHeight());
+        _canvasProvider->getWidth(), _canvasProvider->getHeight());
 
     _renderer->renderImmediate(provider);
     return provider->makeSnapshot(bounds);
@@ -206,12 +206,12 @@ public:
   /**
    Returns the scaled width of the view
    */
-  int getScaledWidth() { return _canvasProvider->getScaledWidth(); }
+  int getScaledWidth() { return _canvasProvider->getWidth(); }
 
   /**
    Returns the scaled height of the view
    */
-  int getScaledHeight() { return _canvasProvider->getScaledHeight(); }
+  int getScaledHeight() { return _canvasProvider->getHeight(); }
 
 protected:
   std::shared_ptr<RNSkPlatformContext> getPlatformContext() {

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
 import { type SharedValue } from "react-native-reanimated";
@@ -11,9 +11,9 @@ export interface CanvasRef extends FC<CanvasProps> {
     measure(callback: MeasureOnSuccessCallback): void;
     measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
 }
-export declare const useCanvasRef: () => React.RefObject<CanvasRef | null>;
-export declare const useCanvasSize: () => {
-    ref: React.RefObject<CanvasRef | null>;
+export declare const useCanvasRef: () => RefObject<CanvasRef | null>;
+export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
+    ref: RefObject<CanvasRef | null>;
     size: SkSize;
 };
 export declare const isFabric: boolean;

package/lib/commonjs/renderer/Canvas.js

@@ -16,8 +16,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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); }
 const useCanvasRef = () => (0, _react.useRef)(null);
 exports.useCanvasRef = useCanvasRef;
-const useCanvasSize = () => {
-  const ref = useCanvasRef();
+const useCanvasSize = userRef => {
+  const ourRef = useCanvasRef();
+  const ref = userRef !== null && userRef !== void 0 ? userRef : ourRef;
   const [size, setSize] = (0, _react.useState)({
     width: 0,
     height: 0

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","_global","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useCanvasSize","ref","size","setSize","useState","width","height","useLayoutEffect","current","measure","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","createElement","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":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","_global","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","measure","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } 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 = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\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/commonjs/skia/core/Image.d.ts

@@ -13,4 +13,4 @@ export declare const useImage: (source: DataSourceParam, onError?: (err: Error)
  * @returns A promise that resolves to a Skia Image object or rejects
  * with an error id the view tag is invalid.
  */
-export declare const makeImageFromView: <T extends number | React.Component<unknown, unknown> | React.ComponentClass<unknown>>(viewRef: React.RefObject<T>, callback?: null | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>)) => Promise<SkImage | null>;
+export declare const makeImageFromView: <T extends number | React.Component<unknown, unknown> | React.ComponentClass<unknown> | null>(viewRef: React.RefObject<T>, callback?: null | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>)) => Promise<SkImage | null>;

package/lib/commonjs/skia/core/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Platform","require","_Skia","_Data","imgFactory","Skia","Image","MakeImageFromEncoded","bind","useImage","source","onError","useRawData","exports","makeImageFromView","viewRef","callback","Platform","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { Platform } from \"../../Platform\";\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = Platform.findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAGA,IAAAE,KAAA,GAAAF,OAAA;AAEA,MAAMG,UAAU,GAAGC,UAAI,CAACC,KAAK,CAACC,oBAAoB,CAACC,IAAI,CAACH,UAAI,CAACC,KAAK,CAAC;;AAEnE;AACA;AACA;AACO,MAAMG,QAAQ,GAAGA,CACtBC,MAAuB,EACvBC,OAA8B,KAC3B,IAAAC,gBAAU,EAACF,MAAM,EAAEN,UAAU,EAAEO,OAAO,CAAC;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATAE,OAAA,CAAAJ,QAAA,GAAAA,QAAA;AAUO,MAAMK,iBAAiB,GAAGA,CAM/BC,OAA2B,EAC3BC,QAE8D,GAAG,IAAI,KAClE;EACH;EACA,IAAIC,kBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACzB,IAAIF,QAAQ,EAAE;MACZ,OAAOA,QAAQ,CAACD,OAAO,CAAC;IAC1B,CAAC,MAAM;MACLI,OAAO,CAACC,MAAM,CACZ,IAAIC,KAAK,CACP,gEACF,CACF,CAAC;IACH;EACF;EACA,MAAMC,OAAO,GAAGL,kBAAQ,CAACM,cAAc,CAACR,OAAO,CAACS,OAAO,CAAC;EACxD,IAAIF,OAAO,KAAK,IAAI,IAAIA,OAAO,KAAK,CAAC,EAAE;IACrC,OAAOjB,UAAI,CAACC,KAAK,CAACmB,oBAAoB,CAACH,OAAO,CAAC;EACjD;EACA,OAAOH,OAAO,CAACC,MAAM,CAAC,IAAIC,KAAK,CAAC,kBAAkB,CAAC,CAAC;AACtD,CAAC;AAACR,OAAA,CAAAC,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"names":["_Platform","require","_Skia","_Data","imgFactory","Skia","Image","MakeImageFromEncoded","bind","useImage","source","onError","useRawData","exports","makeImageFromView","viewRef","callback","Platform","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { Platform } from \"../../Platform\";\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n    | null\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = Platform.findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAGA,IAAAE,KAAA,GAAAF,OAAA;AAEA,MAAMG,UAAU,GAAGC,UAAI,CAACC,KAAK,CAACC,oBAAoB,CAACC,IAAI,CAACH,UAAI,CAACC,KAAK,CAAC;;AAEnE;AACA;AACA;AACO,MAAMG,QAAQ,GAAGA,CACtBC,MAAuB,EACvBC,OAA8B,KAC3B,IAAAC,gBAAU,EAACF,MAAM,EAAEN,UAAU,EAAEO,OAAO,CAAC;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATAE,OAAA,CAAAJ,QAAA,GAAAA,QAAA;AAUO,MAAMK,iBAAiB,GAAGA,CAO/BC,OAA2B,EAC3BC,QAE8D,GAAG,IAAI,KAClE;EACH;EACA,IAAIC,kBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACzB,IAAIF,QAAQ,EAAE;MACZ,OAAOA,QAAQ,CAACD,OAAO,CAAC;IAC1B,CAAC,MAAM;MACLI,OAAO,CAACC,MAAM,CACZ,IAAIC,KAAK,CACP,gEACF,CACF,CAAC;IACH;EACF;EACA,MAAMC,OAAO,GAAGL,kBAAQ,CAACM,cAAc,CAACR,OAAO,CAACS,OAAO,CAAC;EACxD,IAAIF,OAAO,KAAK,IAAI,IAAIA,OAAO,KAAK,CAAC,EAAE;IACrC,OAAOjB,UAAI,CAACC,KAAK,CAACmB,oBAAoB,CAACH,OAAO,CAAC;EACjD;EACA,OAAOH,OAAO,CAACC,MAAM,CAAC,IAAIC,KAAK,CAAC,kBAAkB,CAAC,CAAC;AACtD,CAAC;AAACR,OAAA,CAAAC,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/commonjs/sksg/Container.js

@@ -141,11 +141,11 @@ class ReanimatedContainer extends Container {
         drawOnscreen(Skia, nativeId, recording);
       }, Array.from(animationValues));
     }
-    _ReanimatedProxy.default.runOnUI(() => {
+    _ReanimatedProxy.default.runOnUI(onSize => {
       "worklet";
 
-      drawOnscreen(Skia, nativeId, recording, this.onSize);
-    })();
+      drawOnscreen(Skia, nativeId, recording, onSize);
+    })(this.onSize);
   }
 }
 class NativeReanimatedContainer extends Container {

package/lib/commonjs/sksg/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_ReanimatedRecorder","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","onSize","size","SkiaViewApi","width","height","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","setJsiProperty","nativeDrawOnscreen","recorder","play","Container","constructor","root","_root","mount","unmounted","unmount","drawOnCanvas","Error","exports","StaticContainer","redraw","Recorder","visit","getRecording","isOnScreen","ReanimatedContainer","mapperId","Rea","stopMapper","record","animationValues","startMapper","Array","from","runOnUI","NativeReanimatedContainer","ReanimatedRecorder","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","web","global","HAS_REANIMATED_3"],"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":"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","ignoreList":[]}
+{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_ReanimatedRecorder","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","onSize","size","SkiaViewApi","width","height","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","setJsiProperty","nativeDrawOnscreen","recorder","play","Container","constructor","root","_root","mount","unmounted","unmount","drawOnCanvas","Error","exports","StaticContainer","redraw","Recorder","visit","getRecording","isOnScreen","ReanimatedContainer","mapperId","Rea","stopMapper","record","animationValues","startMapper","Array","from","runOnUI","NativeReanimatedContainer","ReanimatedRecorder","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","web","global","HAS_REANIMATED_3"],"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((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!, onSize);\n    })(this.onSize);\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":"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","ignoreList":[]}

package/lib/commonjs/specs/NativeSkiaModule.web.js

@@ -27,6 +27,16 @@ global.SkiaViewApi = {
       }
     }
   },
+  size(nativeId) {
+    if (this.views[`${nativeId}`]) {
+      return this.views[`${nativeId}`].getSize();
+    } else {
+      return {
+        width: 0,
+        height: 0
+      };
+    }
+  },
   requestRedraw(nativeId) {
     this.views[`${nativeId}`].redraw();
   },

package/lib/commonjs/specs/NativeSkiaModule.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["global","SkiaViewApi","views","deferedPictures","web","registerView","nativeId","view","setPicture","setJsiProperty","name","value","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error","_default","exports","default"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["/* eslint-disable import/no-anonymous-default-export */\nimport type { SkPicture, SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureView>;\n  deferedPictures: Record<string, SkPicture>;\n  registerView(nativeId: string, view: SkiaPictureView): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  deferedPictures: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureView) {\n    // Maybe a picture for this view was already set\n    if (this.deferedPictures[nativeId]) {\n      view.setPicture(this.deferedPictures[nativeId] as SkPicture);\n    }\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      if (!this.views[`${nativeId}`]) {\n        this.deferedPictures[`${nativeId}`] = value;\n      } else {\n        this.views[`${nativeId}`].setPicture(value);\n      }\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n\n// eslint-disable-next-line import/no-default-export\nexport default {};\n"],"mappings":";;;;;;AAAA;;AAWAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,eAAe,EAAE,CAAC,CAAC;EACnBC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAAqB,EAAE;IACpD;IACA,IAAI,IAAI,CAACJ,eAAe,CAACG,QAAQ,CAAC,EAAE;MAClCC,IAAI,CAACC,UAAU,CAAC,IAAI,CAACL,eAAe,CAACG,QAAQ,CAAc,CAAC;IAC9D;IACA,IAAI,CAACJ,KAAK,CAACI,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAE,cAAcA,CAACH,QAAgB,EAAEI,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,IAAI,CAACR,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;QAC9B,IAAI,CAACH,eAAe,CAAC,GAAGG,QAAQ,EAAE,CAAC,GAAGK,KAAK;MAC7C,CAAC,MAAM;QACL,IAAI,CAACT,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACE,UAAU,CAACG,KAAK,CAAC;MAC7C;IACF;EACF,CAAC;EACDC,aAAaA,CAACN,QAAgB,EAAE;IAC9B,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACO,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACR,QAAgB,EAAES,IAAa,EAAE;IACjD,OAAO,IAAI,CAACb,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACQ,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACV,QAAgB,EAAES,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAAClB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACQ,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;;AAEpB;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACe,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["global","SkiaViewApi","views","deferedPictures","web","registerView","nativeId","view","setPicture","setJsiProperty","name","value","size","getSize","width","height","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error","_default","exports","default"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["/* eslint-disable import/no-anonymous-default-export */\nimport type { SkPicture, SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureView>;\n  deferedPictures: Record<string, SkPicture>;\n  registerView(nativeId: string, view: SkiaPictureView): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  deferedPictures: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureView) {\n    // Maybe a picture for this view was already set\n    if (this.deferedPictures[nativeId]) {\n      view.setPicture(this.deferedPictures[nativeId] as SkPicture);\n    }\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      if (!this.views[`${nativeId}`]) {\n        this.deferedPictures[`${nativeId}`] = value;\n      } else {\n        this.views[`${nativeId}`].setPicture(value);\n      }\n    }\n  },\n  size(nativeId: number) {\n    if (this.views[`${nativeId}`]) {\n      return this.views[`${nativeId}`].getSize();\n    } else {\n      return { width: 0, height: 0 };\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n\n// eslint-disable-next-line import/no-default-export\nexport default {};\n"],"mappings":";;;;;;AAAA;;AAWAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,eAAe,EAAE,CAAC,CAAC;EACnBC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAAqB,EAAE;IACpD;IACA,IAAI,IAAI,CAACJ,eAAe,CAACG,QAAQ,CAAC,EAAE;MAClCC,IAAI,CAACC,UAAU,CAAC,IAAI,CAACL,eAAe,CAACG,QAAQ,CAAc,CAAC;IAC9D;IACA,IAAI,CAACJ,KAAK,CAACI,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAE,cAAcA,CAACH,QAAgB,EAAEI,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,IAAI,CAACR,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;QAC9B,IAAI,CAACH,eAAe,CAAC,GAAGG,QAAQ,EAAE,CAAC,GAAGK,KAAK;MAC7C,CAAC,MAAM;QACL,IAAI,CAACT,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACE,UAAU,CAACG,KAAK,CAAC;MAC7C;IACF;EACF,CAAC;EACDC,IAAIA,CAACN,QAAgB,EAAE;IACrB,IAAI,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;MAC7B,OAAO,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACO,OAAO,CAAC,CAAC;IAC5C,CAAC,MAAM;MACL,OAAO;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;IAChC;EACF,CAAC;EACDC,aAAaA,CAACV,QAAgB,EAAE;IAC9B,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACW,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACZ,QAAgB,EAAEa,IAAa,EAAE;IACjD,OAAO,IAAI,CAACjB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACd,QAAgB,EAAEa,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAACtB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;;AAEpB;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACe,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.js

@@ -13,14 +13,8 @@ const SkiaPictureViewNativeComponent = ({
   onLayout,
   ...viewProps
 }) => {
-  const ref = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (ref.current) {
-      global.SkiaViewApi.registerView(nativeID, ref.current);
-    }
-  }, [nativeID]);
   return /*#__PURE__*/(0, _react.createElement)(_SkiaPictureView.SkiaPictureView, {
-    ref,
+    nativeID,
     debug,
     opaque,
     onLayout,

package/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_SkiaPictureView","SkiaPictureViewNativeComponent","nativeID","debug","opaque","onLayout","viewProps","ref","useRef","useEffect","current","global","SkiaViewApi","registerView","createElement","SkiaPictureView","_default","exports","default"],"sources":["SkiaPictureViewNativeComponent.web.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport { createElement, useEffect, useRef } from \"react\";\n\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nimport type { ISkiaViewApiWeb } from \"./NativeSkiaModule.web\";\n\nexport interface NativeProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  nativeID: string;\n}\n\nconst SkiaPictureViewNativeComponent = ({\n  nativeID,\n  debug,\n  opaque,\n  onLayout,\n  ...viewProps\n}: NativeProps) => {\n  const ref = useRef(null);\n  useEffect(() => {\n    if (ref.current) {\n      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(\n        nativeID,\n        ref.current\n      );\n    }\n  }, [nativeID]);\n  return createElement(SkiaPictureView, {\n    ref,\n    debug,\n    opaque,\n    onLayout,\n    ...viewProps,\n  });\n};\n// eslint-disable-next-line import/no-default-export\nexport default SkiaPictureViewNativeComponent;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AAUA,MAAME,8BAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxB,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIF,GAAG,CAACG,OAAO,EAAE;MACdC,MAAM,CAACC,WAAW,CAAqBC,YAAY,CAClDX,QAAQ,EACRK,GAAG,CAACG,OACN,CAAC;IACH;EACF,CAAC,EAAE,CAACR,QAAQ,CAAC,CAAC;EACd,oBAAO,IAAAY,oBAAa,EAACC,gCAAe,EAAE;IACpCR,GAAG;IACHJ,KAAK;IACLC,MAAM;IACNC,QAAQ;IACR,GAAGC;EACL,CAAC,CAAC;AACJ,CAAC;AACD;AAAA,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACejB,8BAA8B","ignoreList":[]}
+{"version":3,"names":["_react","require","_SkiaPictureView","SkiaPictureViewNativeComponent","nativeID","debug","opaque","onLayout","viewProps","createElement","SkiaPictureView","_default","exports","default"],"sources":["SkiaPictureViewNativeComponent.web.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport { createElement } from \"react\";\n\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport interface NativeProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  nativeID: string;\n}\n\nconst SkiaPictureViewNativeComponent = ({\n  nativeID,\n  debug,\n  opaque,\n  onLayout,\n  ...viewProps\n}: NativeProps) => {\n  return createElement(SkiaPictureView, {\n    nativeID,\n    debug,\n    opaque,\n    onLayout,\n    ...viewProps,\n  });\n};\n// eslint-disable-next-line import/no-default-export\nexport default SkiaPictureViewNativeComponent;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AAQA,MAAME,8BAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACQ,CAAC,KAAK;EACjB,oBAAO,IAAAC,oBAAa,EAACC,gCAAe,EAAE;IACpCN,QAAQ;IACRC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACR,GAAGC;EACL,CAAC,CAAC;AACJ,CAAC;AACD;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACeV,8BAA8B","ignoreList":[]}

package/lib/commonjs/views/SkiaBaseWebView.d.ts

@@ -13,7 +13,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     protected height: number;
     private unsubscribeAll;
     private onLayoutEvent;
-    protected getSize(): {
+    getSize(): {
         width: number;
         height: number;
     };

package/lib/commonjs/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_JsiSkSurface","_Platform","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","onLayoutEvent","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","style","display","flex","exports"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_JsiSkSurface","_Platform","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","onLayoutEvent","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","style","display","flex","exports"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/views/SkiaPictureView.web.js

@@ -12,6 +12,13 @@ class SkiaPictureView extends _SkiaBaseWebView.SkiaBaseWebView {
   constructor(props) {
     super(props);
     _defineProperty(this, "picture", null);
+    const {
+      nativeID
+    } = props;
+    if (!nativeID) {
+      throw new Error("SkiaPictureView requires a nativeID prop");
+    }
+    global.SkiaViewApi.registerView(nativeID, this);
   }
   setPicture(picture) {
     this.picture = picture;

package/lib/commonjs/views/SkiaPictureView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_SkiaBaseWebView","require","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","SkiaPictureView","SkiaBaseWebView","constructor","props","setPicture","picture","redraw","renderInCanvas","canvas","drawPicture","exports"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import type { SkCanvas, SkPicture } from \"../skia/types\";\n\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {\n  private picture: SkPicture | null = null;\n\n  constructor(props: SkiaPictureViewNativeProps) {\n    super(props);\n  }\n\n  public setPicture(picture: SkPicture) {\n    this.picture = picture;\n    this.redraw();\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.drawPicture(this.props.picture);\n    } else if (this.picture) {\n      canvas.drawPicture(this.picture);\n    }\n  }\n}\n"],"mappings":";;;;;;AAGA,IAAAA,gBAAA,GAAAC,OAAA;AAAoD,SAAAC,gBAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAD,CAAA,GAAAI,MAAA,CAAAC,cAAA,CAAAL,CAAA,EAAAC,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAT,CAAA,CAAAC,CAAA,IAAAC,CAAA,EAAAF,CAAA;AAAA,SAAAG,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAF,CAAA,GAAAE,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAb,CAAA,QAAAU,CAAA,GAAAV,CAAA,CAAAc,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAE7C,MAAMgB,eAAe,SAASC,gCAAe,CAA6B;EAG/EC,WAAWA,CAACC,KAAiC,EAAE;IAC7C,KAAK,CAACA,KAAK,CAAC;IAACtB,eAAA,kBAHqB,IAAI;EAIxC;EAEOuB,UAAUA,CAACC,OAAkB,EAAE;IACpC,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACC,MAAM,CAAC,CAAC;EACf;EAEUC,cAAcA,CAACC,MAAgB,EAAQ;IAC/C,IAAI,IAAI,CAACL,KAAK,CAACE,OAAO,EAAE;MACtBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACN,KAAK,CAACE,OAAO,CAAC;IACxC,CAAC,MAAM,IAAI,IAAI,CAACA,OAAO,EAAE;MACvBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACJ,OAAO,CAAC;IAClC;EACF;AACF;AAACK,OAAA,CAAAV,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_SkiaBaseWebView","require","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","SkiaPictureView","SkiaBaseWebView","constructor","props","nativeID","Error","global","SkiaViewApi","registerView","setPicture","picture","redraw","renderInCanvas","canvas","drawPicture","exports"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import type { SkCanvas, SkPicture } from \"../skia/types\";\nimport type { ISkiaViewApiWeb } from \"../specs/NativeSkiaModule.web\";\n\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {\n  private picture: SkPicture | null = null;\n\n  constructor(props: SkiaPictureViewNativeProps) {\n    super(props);\n    const { nativeID } = props;\n    if (!nativeID) {\n      throw new Error(\"SkiaPictureView requires a nativeID prop\");\n    }\n    (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, this);\n  }\n\n  public setPicture(picture: SkPicture) {\n    this.picture = picture;\n    this.redraw();\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.drawPicture(this.props.picture);\n    } else if (this.picture) {\n      canvas.drawPicture(this.picture);\n    }\n  }\n}\n"],"mappings":";;;;;;AAIA,IAAAA,gBAAA,GAAAC,OAAA;AAAoD,SAAAC,gBAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAD,CAAA,GAAAI,MAAA,CAAAC,cAAA,CAAAL,CAAA,EAAAC,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAT,CAAA,CAAAC,CAAA,IAAAC,CAAA,EAAAF,CAAA;AAAA,SAAAG,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAF,CAAA,GAAAE,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAb,CAAA,QAAAU,CAAA,GAAAV,CAAA,CAAAc,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAE7C,MAAMgB,eAAe,SAASC,gCAAe,CAA6B;EAG/EC,WAAWA,CAACC,KAAiC,EAAE;IAC7C,KAAK,CAACA,KAAK,CAAC;IAACtB,eAAA,kBAHqB,IAAI;IAItC,MAAM;MAAEuB;IAAS,CAAC,GAAGD,KAAK;IAC1B,IAAI,CAACC,QAAQ,EAAE;MACb,MAAM,IAAIC,KAAK,CAAC,0CAA0C,CAAC;IAC7D;IACCC,MAAM,CAACC,WAAW,CAAqBC,YAAY,CAACJ,QAAQ,EAAE,IAAI,CAAC;EACtE;EAEOK,UAAUA,CAACC,OAAkB,EAAE;IACpC,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACC,MAAM,CAAC,CAAC;EACf;EAEUC,cAAcA,CAACC,MAAgB,EAAQ;IAC/C,IAAI,IAAI,CAACV,KAAK,CAACO,OAAO,EAAE;MACtBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACX,KAAK,CAACO,OAAO,CAAC;IACxC,CAAC,MAAM,IAAI,IAAI,CAACA,OAAO,EAAE;MACvBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACJ,OAAO,CAAC;IAClC;EACF;AACF;AAACK,OAAA,CAAAf,eAAA,GAAAA,eAAA","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
 import { type SharedValue } from "react-native-reanimated";
@@ -11,9 +11,9 @@ export interface CanvasRef extends FC<CanvasProps> {
     measure(callback: MeasureOnSuccessCallback): void;
     measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
 }
-export declare const useCanvasRef: () => React.RefObject<CanvasRef | null>;
-export declare const useCanvasSize: () => {
-    ref: React.RefObject<CanvasRef | null>;
+export declare const useCanvasRef: () => RefObject<CanvasRef | null>;
+export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
+    ref: RefObject<CanvasRef | null>;
     size: SkSize;
 };
 export declare const isFabric: boolean;

package/lib/module/renderer/Canvas.js

@@ -6,8 +6,9 @@ import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeCompon
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
 export const useCanvasRef = () => useRef(null);
-export const useCanvasSize = () => {
-  const ref = useCanvasRef();
+export const useCanvasSize = userRef => {
+  const ourRef = useCanvasRef();
+  const ref = userRef !== null && userRef !== void 0 ? userRef : ourRef;
   const [size, setSize] = useState({
     width: 0,
     height: 0

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["React","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","useCanvasSize","userRef","ourRef","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, RefObject } 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 = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\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/skia/core/Image.d.ts

@@ -13,4 +13,4 @@ export declare const useImage: (source: DataSourceParam, onError?: (err: Error)
  * @returns A promise that resolves to a Skia Image object or rejects
  * with an error id the view tag is invalid.
  */
-export declare const makeImageFromView: <T extends number | React.Component<unknown, unknown> | React.ComponentClass<unknown>>(viewRef: React.RefObject<T>, callback?: null | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>)) => Promise<SkImage | null>;
+export declare const makeImageFromView: <T extends number | React.Component<unknown, unknown> | React.ComponentClass<unknown> | null>(viewRef: React.RefObject<T>, callback?: null | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>)) => Promise<SkImage | null>;

package/lib/module/skia/core/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","Skia","useRawData","imgFactory","Image","MakeImageFromEncoded","bind","useImage","source","onError","makeImageFromView","viewRef","callback","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { Platform } from \"../../Platform\";\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = Platform.findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,UAAU,QAAQ,QAAQ;AAEnC,MAAMC,UAAU,GAAGF,IAAI,CAACG,KAAK,CAACC,oBAAoB,CAACC,IAAI,CAACL,IAAI,CAACG,KAAK,CAAC;;AAEnE;AACA;AACA;AACA,OAAO,MAAMG,QAAQ,GAAGA,CACtBC,MAAuB,EACvBC,OAA8B,KAC3BP,UAAU,CAACM,MAAM,EAAEL,UAAU,EAAEM,OAAO,CAAC;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAM/BC,OAA2B,EAC3BC,QAE8D,GAAG,IAAI,KAClE;EACH;EACA,IAAIZ,QAAQ,CAACa,EAAE,KAAK,KAAK,EAAE;IACzB,IAAID,QAAQ,EAAE;MACZ,OAAOA,QAAQ,CAACD,OAAO,CAAC;IAC1B,CAAC,MAAM;MACLG,OAAO,CAACC,MAAM,CACZ,IAAIC,KAAK,CACP,gEACF,CACF,CAAC;IACH;EACF;EACA,MAAMC,OAAO,GAAGjB,QAAQ,CAACkB,cAAc,CAACP,OAAO,CAACQ,OAAO,CAAC;EACxD,IAAIF,OAAO,KAAK,IAAI,IAAIA,OAAO,KAAK,CAAC,EAAE;IACrC,OAAOhB,IAAI,CAACG,KAAK,CAACgB,oBAAoB,CAACH,OAAO,CAAC;EACjD;EACA,OAAOH,OAAO,CAACC,MAAM,CAAC,IAAIC,KAAK,CAAC,kBAAkB,CAAC,CAAC;AACtD,CAAC","ignoreList":[]}
+{"version":3,"names":["Platform","Skia","useRawData","imgFactory","Image","MakeImageFromEncoded","bind","useImage","source","onError","makeImageFromView","viewRef","callback","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { Platform } from \"../../Platform\";\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n    | null\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = Platform.findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,UAAU,QAAQ,QAAQ;AAEnC,MAAMC,UAAU,GAAGF,IAAI,CAACG,KAAK,CAACC,oBAAoB,CAACC,IAAI,CAACL,IAAI,CAACG,KAAK,CAAC;;AAEnE;AACA;AACA;AACA,OAAO,MAAMG,QAAQ,GAAGA,CACtBC,MAAuB,EACvBC,OAA8B,KAC3BP,UAAU,CAACM,MAAM,EAAEL,UAAU,EAAEM,OAAO,CAAC;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAO/BC,OAA2B,EAC3BC,QAE8D,GAAG,IAAI,KAClE;EACH;EACA,IAAIZ,QAAQ,CAACa,EAAE,KAAK,KAAK,EAAE;IACzB,IAAID,QAAQ,EAAE;MACZ,OAAOA,QAAQ,CAACD,OAAO,CAAC;IAC1B,CAAC,MAAM;MACLG,OAAO,CAACC,MAAM,CACZ,IAAIC,KAAK,CACP,gEACF,CACF,CAAC;IACH;EACF;EACA,MAAMC,OAAO,GAAGjB,QAAQ,CAACkB,cAAc,CAACP,OAAO,CAACQ,OAAO,CAAC;EACxD,IAAIF,OAAO,KAAK,IAAI,IAAIA,OAAO,KAAK,CAAC,EAAE;IACrC,OAAOhB,IAAI,CAACG,KAAK,CAACgB,oBAAoB,CAACH,OAAO,CAAC;EACjD;EACA,OAAOH,OAAO,CAACC,MAAM,CAAC,IAAIC,KAAK,CAAC,kBAAkB,CAAC,CAAC;AACtD,CAAC","ignoreList":[]}

package/lib/module/sksg/Container.js

@@ -133,11 +133,11 @@ class ReanimatedContainer extends Container {
         drawOnscreen(Skia, nativeId, recording);
       }, Array.from(animationValues));
     }
-    Rea.runOnUI(() => {
+    Rea.runOnUI(onSize => {
       "worklet";
 
-      drawOnscreen(Skia, nativeId, recording, this.onSize);
-    })();
+      drawOnscreen(Skia, nativeId, recording, onSize);
+    })(this.onSize);
   }
 }
 class NativeReanimatedContainer extends Container {

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","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":"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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((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!, onSize);\n    })(this.onSize);\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":"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","ignoreList":[]}

package/lib/module/specs/NativeSkiaModule.web.js

@@ -21,6 +21,16 @@ global.SkiaViewApi = {
       }
     }
   },
+  size(nativeId) {
+    if (this.views[`${nativeId}`]) {
+      return this.views[`${nativeId}`].getSize();
+    } else {
+      return {
+        width: 0,
+        height: 0
+      };
+    }
+  },
   requestRedraw(nativeId) {
     this.views[`${nativeId}`].redraw();
   },

package/lib/module/specs/NativeSkiaModule.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["global","SkiaViewApi","views","deferedPictures","web","registerView","nativeId","view","setPicture","setJsiProperty","name","value","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["/* eslint-disable import/no-anonymous-default-export */\nimport type { SkPicture, SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureView>;\n  deferedPictures: Record<string, SkPicture>;\n  registerView(nativeId: string, view: SkiaPictureView): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  deferedPictures: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureView) {\n    // Maybe a picture for this view was already set\n    if (this.deferedPictures[nativeId]) {\n      view.setPicture(this.deferedPictures[nativeId] as SkPicture);\n    }\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      if (!this.views[`${nativeId}`]) {\n        this.deferedPictures[`${nativeId}`] = value;\n      } else {\n        this.views[`${nativeId}`].setPicture(value);\n      }\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n\n// eslint-disable-next-line import/no-default-export\nexport default {};\n"],"mappings":"AAAA;;AAWAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,eAAe,EAAE,CAAC,CAAC;EACnBC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAAqB,EAAE;IACpD;IACA,IAAI,IAAI,CAACJ,eAAe,CAACG,QAAQ,CAAC,EAAE;MAClCC,IAAI,CAACC,UAAU,CAAC,IAAI,CAACL,eAAe,CAACG,QAAQ,CAAc,CAAC;IAC9D;IACA,IAAI,CAACJ,KAAK,CAACI,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAE,cAAcA,CAACH,QAAgB,EAAEI,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,IAAI,CAACR,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;QAC9B,IAAI,CAACH,eAAe,CAAC,GAAGG,QAAQ,EAAE,CAAC,GAAGK,KAAK;MAC7C,CAAC,MAAM;QACL,IAAI,CAACT,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACE,UAAU,CAACG,KAAK,CAAC;MAC7C;IACF;EACF,CAAC;EACDC,aAAaA,CAACN,QAAgB,EAAE;IAC9B,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACO,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACR,QAAgB,EAAES,IAAa,EAAE;IACjD,OAAO,IAAI,CAACb,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACQ,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACV,QAAgB,EAAES,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAAClB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACQ,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;;AAEpB;AACA,eAAe,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["global","SkiaViewApi","views","deferedPictures","web","registerView","nativeId","view","setPicture","setJsiProperty","name","value","size","getSize","width","height","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["/* eslint-disable import/no-anonymous-default-export */\nimport type { SkPicture, SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureView>;\n  deferedPictures: Record<string, SkPicture>;\n  registerView(nativeId: string, view: SkiaPictureView): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  deferedPictures: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureView) {\n    // Maybe a picture for this view was already set\n    if (this.deferedPictures[nativeId]) {\n      view.setPicture(this.deferedPictures[nativeId] as SkPicture);\n    }\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      if (!this.views[`${nativeId}`]) {\n        this.deferedPictures[`${nativeId}`] = value;\n      } else {\n        this.views[`${nativeId}`].setPicture(value);\n      }\n    }\n  },\n  size(nativeId: number) {\n    if (this.views[`${nativeId}`]) {\n      return this.views[`${nativeId}`].getSize();\n    } else {\n      return { width: 0, height: 0 };\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n\n// eslint-disable-next-line import/no-default-export\nexport default {};\n"],"mappings":"AAAA;;AAWAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,eAAe,EAAE,CAAC,CAAC;EACnBC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAAqB,EAAE;IACpD;IACA,IAAI,IAAI,CAACJ,eAAe,CAACG,QAAQ,CAAC,EAAE;MAClCC,IAAI,CAACC,UAAU,CAAC,IAAI,CAACL,eAAe,CAACG,QAAQ,CAAc,CAAC;IAC9D;IACA,IAAI,CAACJ,KAAK,CAACI,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAE,cAAcA,CAACH,QAAgB,EAAEI,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,IAAI,CAACR,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;QAC9B,IAAI,CAACH,eAAe,CAAC,GAAGG,QAAQ,EAAE,CAAC,GAAGK,KAAK;MAC7C,CAAC,MAAM;QACL,IAAI,CAACT,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACE,UAAU,CAACG,KAAK,CAAC;MAC7C;IACF;EACF,CAAC;EACDC,IAAIA,CAACN,QAAgB,EAAE;IACrB,IAAI,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;MAC7B,OAAO,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACO,OAAO,CAAC,CAAC;IAC5C,CAAC,MAAM;MACL,OAAO;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;IAChC;EACF,CAAC;EACDC,aAAaA,CAACV,QAAgB,EAAE;IAC9B,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACW,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACZ,QAAgB,EAAEa,IAAa,EAAE;IACjD,OAAO,IAAI,CAACjB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACd,QAAgB,EAAEa,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAACtB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;;AAEpB;AACA,eAAe,CAAC,CAAC","ignoreList":[]}

package/lib/module/specs/SkiaPictureViewNativeComponent.web.js

@@ -1,4 +1,4 @@
-import { createElement, useEffect, useRef } from "react";
+import { createElement } from "react";
 import { SkiaPictureView } from "../views/SkiaPictureView.web";
 const SkiaPictureViewNativeComponent = ({
   nativeID,
@@ -7,14 +7,8 @@ const SkiaPictureViewNativeComponent = ({
   onLayout,
   ...viewProps
 }) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (ref.current) {
-      global.SkiaViewApi.registerView(nativeID, ref.current);
-    }
-  }, [nativeID]);
   return /*#__PURE__*/createElement(SkiaPictureView, {
-    ref,
+    nativeID,
     debug,
     opaque,
     onLayout,

package/lib/module/specs/SkiaPictureViewNativeComponent.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","useEffect","useRef","SkiaPictureView","SkiaPictureViewNativeComponent","nativeID","debug","opaque","onLayout","viewProps","ref","current","global","SkiaViewApi","registerView"],"sources":["SkiaPictureViewNativeComponent.web.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport { createElement, useEffect, useRef } from \"react\";\n\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nimport type { ISkiaViewApiWeb } from \"./NativeSkiaModule.web\";\n\nexport interface NativeProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  nativeID: string;\n}\n\nconst SkiaPictureViewNativeComponent = ({\n  nativeID,\n  debug,\n  opaque,\n  onLayout,\n  ...viewProps\n}: NativeProps) => {\n  const ref = useRef(null);\n  useEffect(() => {\n    if (ref.current) {\n      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(\n        nativeID,\n        ref.current\n      );\n    }\n  }, [nativeID]);\n  return createElement(SkiaPictureView, {\n    ref,\n    debug,\n    opaque,\n    onLayout,\n    ...viewProps,\n  });\n};\n// eslint-disable-next-line import/no-default-export\nexport default SkiaPictureViewNativeComponent;\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAExD,SAASC,eAAe,QAAQ,8BAA8B;AAU9D,MAAMC,8BAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,GAAG,GAAGR,MAAM,CAAC,IAAI,CAAC;EACxBD,SAAS,CAAC,MAAM;IACd,IAAIS,GAAG,CAACC,OAAO,EAAE;MACdC,MAAM,CAACC,WAAW,CAAqBC,YAAY,CAClDT,QAAQ,EACRK,GAAG,CAACC,OACN,CAAC;IACH;EACF,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EACd,oBAAOL,aAAa,CAACG,eAAe,EAAE;IACpCO,GAAG;IACHJ,KAAK;IACLC,MAAM;IACNC,QAAQ;IACR,GAAGC;EACL,CAAC,CAAC;AACJ,CAAC;AACD;AACA,eAAeL,8BAA8B","ignoreList":[]}
+{"version":3,"names":["createElement","SkiaPictureView","SkiaPictureViewNativeComponent","nativeID","debug","opaque","onLayout","viewProps"],"sources":["SkiaPictureViewNativeComponent.web.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport { createElement } from \"react\";\n\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport interface NativeProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  nativeID: string;\n}\n\nconst SkiaPictureViewNativeComponent = ({\n  nativeID,\n  debug,\n  opaque,\n  onLayout,\n  ...viewProps\n}: NativeProps) => {\n  return createElement(SkiaPictureView, {\n    nativeID,\n    debug,\n    opaque,\n    onLayout,\n    ...viewProps,\n  });\n};\n// eslint-disable-next-line import/no-default-export\nexport default SkiaPictureViewNativeComponent;\n"],"mappings":"AACA,SAASA,aAAa,QAAQ,OAAO;AAErC,SAASC,eAAe,QAAQ,8BAA8B;AAQ9D,MAAMC,8BAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACQ,CAAC,KAAK;EACjB,oBAAOP,aAAa,CAACC,eAAe,EAAE;IACpCE,QAAQ;IACRC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACR,GAAGC;EACL,CAAC,CAAC;AACJ,CAAC;AACD;AACA,eAAeL,8BAA8B","ignoreList":[]}

package/lib/module/views/SkiaBaseWebView.d.ts

@@ -13,7 +13,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     protected height: number;
     private unsubscribeAll;
     private onLayoutEvent;
-    protected getSize(): {
+    getSize(): {
         width: number;
         height: number;
     };

package/lib/module/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","JsiSkSurface","Platform","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_defineProperty","createRef","onLayoutEvent","bind","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","JsiSkSurface","Platform","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_defineProperty","createRef","onLayoutEvent","bind","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/views/SkiaPictureView.web.js

@@ -6,6 +6,13 @@ export class SkiaPictureView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
     _defineProperty(this, "picture", null);
+    const {
+      nativeID
+    } = props;
+    if (!nativeID) {
+      throw new Error("SkiaPictureView requires a nativeID prop");
+    }
+    global.SkiaViewApi.registerView(nativeID, this);
   }
   setPicture(picture) {
     this.picture = picture;

package/lib/module/views/SkiaPictureView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["SkiaBaseWebView","SkiaPictureView","constructor","props","_defineProperty","setPicture","picture","redraw","renderInCanvas","canvas","drawPicture"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import type { SkCanvas, SkPicture } from \"../skia/types\";\n\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {\n  private picture: SkPicture | null = null;\n\n  constructor(props: SkiaPictureViewNativeProps) {\n    super(props);\n  }\n\n  public setPicture(picture: SkPicture) {\n    this.picture = picture;\n    this.redraw();\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.drawPicture(this.props.picture);\n    } else if (this.picture) {\n      canvas.drawPicture(this.picture);\n    }\n  }\n}\n"],"mappings":";;;AAGA,SAASA,eAAe,QAAQ,mBAAmB;AAEnD,OAAO,MAAMC,eAAe,SAASD,eAAe,CAA6B;EAG/EE,WAAWA,CAACC,KAAiC,EAAE;IAC7C,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,kBAHqB,IAAI;EAIxC;EAEOC,UAAUA,CAACC,OAAkB,EAAE;IACpC,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACC,MAAM,CAAC,CAAC;EACf;EAEUC,cAAcA,CAACC,MAAgB,EAAQ;IAC/C,IAAI,IAAI,CAACN,KAAK,CAACG,OAAO,EAAE;MACtBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACP,KAAK,CAACG,OAAO,CAAC;IACxC,CAAC,MAAM,IAAI,IAAI,CAACA,OAAO,EAAE;MACvBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACJ,OAAO,CAAC;IAClC;EACF;AACF","ignoreList":[]}
+{"version":3,"names":["SkiaBaseWebView","SkiaPictureView","constructor","props","_defineProperty","nativeID","Error","global","SkiaViewApi","registerView","setPicture","picture","redraw","renderInCanvas","canvas","drawPicture"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import type { SkCanvas, SkPicture } from \"../skia/types\";\nimport type { ISkiaViewApiWeb } from \"../specs/NativeSkiaModule.web\";\n\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {\n  private picture: SkPicture | null = null;\n\n  constructor(props: SkiaPictureViewNativeProps) {\n    super(props);\n    const { nativeID } = props;\n    if (!nativeID) {\n      throw new Error(\"SkiaPictureView requires a nativeID prop\");\n    }\n    (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, this);\n  }\n\n  public setPicture(picture: SkPicture) {\n    this.picture = picture;\n    this.redraw();\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.drawPicture(this.props.picture);\n    } else if (this.picture) {\n      canvas.drawPicture(this.picture);\n    }\n  }\n}\n"],"mappings":";;;AAIA,SAASA,eAAe,QAAQ,mBAAmB;AAEnD,OAAO,MAAMC,eAAe,SAASD,eAAe,CAA6B;EAG/EE,WAAWA,CAACC,KAAiC,EAAE;IAC7C,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,kBAHqB,IAAI;IAItC,MAAM;MAAEC;IAAS,CAAC,GAAGF,KAAK;IAC1B,IAAI,CAACE,QAAQ,EAAE;MACb,MAAM,IAAIC,KAAK,CAAC,0CAA0C,CAAC;IAC7D;IACCC,MAAM,CAACC,WAAW,CAAqBC,YAAY,CAACJ,QAAQ,EAAE,IAAI,CAAC;EACtE;EAEOK,UAAUA,CAACC,OAAkB,EAAE;IACpC,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACC,MAAM,CAAC,CAAC;EACf;EAEUC,cAAcA,CAACC,MAAgB,EAAQ;IAC/C,IAAI,IAAI,CAACX,KAAK,CAACQ,OAAO,EAAE;MACtBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACZ,KAAK,CAACQ,OAAO,CAAC;IACxC,CAAC,MAAM,IAAI,IAAI,CAACA,OAAO,EAAE;MACvBG,MAAM,CAACC,WAAW,CAAC,IAAI,CAACJ,OAAO,CAAC;IAClC;EACF;AACF","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 export const __esModule: boolean;
 export const isFabric: boolean;
 export function useCanvasRef(): any;
-export function useCanvasSize(): {
+export function useCanvasSize(userRef: any): {
     ref: any;
     size: any;
 };

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

@@ -1,6 +1,6 @@
 export function useCanvasRef(): React.RefObject<null>;
-export function useCanvasSize(): {
-    ref: React.RefObject<null>;
+export function useCanvasSize(userRef: any): {
+    ref: any;
     size: {
         width: number;
         height: number;

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
 import { type SharedValue } from "react-native-reanimated";
@@ -11,9 +11,9 @@ export interface CanvasRef extends FC<CanvasProps> {
     measure(callback: MeasureOnSuccessCallback): void;
     measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
 }
-export declare const useCanvasRef: () => React.RefObject<CanvasRef | null>;
-export declare const useCanvasSize: () => {
-    ref: React.RefObject<CanvasRef | null>;
+export declare const useCanvasRef: () => RefObject<CanvasRef | null>;
+export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
+    ref: RefObject<CanvasRef | null>;
     size: SkSize;
 };
 export declare const isFabric: boolean;

package/lib/typescript/src/skia/core/Image.d.ts

@@ -13,4 +13,4 @@ export declare const useImage: (source: DataSourceParam, onError?: (err: Error)
  * @returns A promise that resolves to a Skia Image object or rejects
  * with an error id the view tag is invalid.
  */
-export declare const makeImageFromView: <T extends number | React.Component<unknown, unknown> | React.ComponentClass<unknown>>(viewRef: React.RefObject<T>, callback?: null | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>)) => Promise<SkImage | null>;
+export declare const makeImageFromView: <T extends number | React.Component<unknown, unknown> | React.ComponentClass<unknown> | null>(viewRef: React.RefObject<T>, callback?: null | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>)) => Promise<SkImage | null>;

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

@@ -13,7 +13,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     protected height: number;
     private unsubscribeAll;
     private onLayoutEvent;
-    protected getSize(): {
+    getSize(): {
         width: number;
         height: number;
     };

package/package.json

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

package/src/renderer/Canvas.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, RefObject } from "react";
 import React, {
   useEffect,
   useImperativeHandle,
@@ -32,8 +32,9 @@ export interface CanvasRef extends FC<CanvasProps> {
 
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
-export const useCanvasSize = () => {
-  const ref = useCanvasRef();
+export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
+  const ourRef = useCanvasRef();
+  const ref = userRef ?? ourRef;
   const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });
   useLayoutEffect(() => {
     if (ref.current) {

package/src/skia/core/Image.ts

@@ -29,6 +29,7 @@ export const makeImageFromView = <
     | number
     | React.Component<unknown, unknown>
     | React.ComponentClass<unknown>
+    | null
 >(
   viewRef: React.RefObject<T>,
   callback:

package/src/sksg/Container.ts

@@ -170,10 +170,10 @@ class ReanimatedContainer extends Container {
         drawOnscreen(Skia, nativeId, recording!);
       }, Array.from(animationValues));
     }
-    Rea.runOnUI(() => {
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
       "worklet";
-      drawOnscreen(Skia, nativeId, recording!, this.onSize);
-    })();
+      drawOnscreen(Skia, nativeId, recording!, onSize);
+    })(this.onSize);
   }
 }
 

package/src/specs/NativeSkiaModule.web.ts

@@ -30,6 +30,13 @@ global.SkiaViewApi = {
       }
     }
   },
+  size(nativeId: number) {
+    if (this.views[`${nativeId}`]) {
+      return this.views[`${nativeId}`].getSize();
+    } else {
+      return { width: 0, height: 0 };
+    }
+  },
   requestRedraw(nativeId: number) {
     this.views[`${nativeId}`].redraw();
   },

package/src/specs/SkiaPictureViewNativeComponent.web.ts

@@ -1,10 +1,8 @@
 import type { ViewProps } from "react-native";
-import { createElement, useEffect, useRef } from "react";
+import { createElement } from "react";
 
 import { SkiaPictureView } from "../views/SkiaPictureView.web";
 
-import type { ISkiaViewApiWeb } from "./NativeSkiaModule.web";
-
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
@@ -18,17 +16,8 @@ const SkiaPictureViewNativeComponent = ({
   onLayout,
   ...viewProps
 }: NativeProps) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (ref.current) {
-      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(
-        nativeID,
-        ref.current
-      );
-    }
-  }, [nativeID]);
   return createElement(SkiaPictureView, {
-    ref,
+    nativeID,
     debug,
     opaque,
     onLayout,

package/src/views/SkiaBaseWebView.tsx

@@ -59,7 +59,7 @@ export abstract class SkiaBaseWebView<
     }
   }
 
-  protected getSize() {
+  getSize() {
     return { width: this.width, height: this.height };
   }
 

package/src/views/SkiaPictureView.web.tsx

@@ -1,4 +1,5 @@
 import type { SkCanvas, SkPicture } from "../skia/types";
+import type { ISkiaViewApiWeb } from "../specs/NativeSkiaModule.web";
 
 import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
@@ -8,6 +9,11 @@ export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps>
 
   constructor(props: SkiaPictureViewNativeProps) {
     super(props);
+    const { nativeID } = props;
+    if (!nativeID) {
+      throw new Error("SkiaPictureView requires a nativeID prop");
+    }
+    (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, this);
   }
 
   public setPicture(picture: SkPicture) {