@shopify/react-native-skia 1.0.6 → 1.2.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","SkiaDomViewNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaDomView","OS","SkiaDomView","Component","constructor","props","_defineProperty","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","componentWillUnmount","render","mode","debug","viewProps","createElement","_extends","collapsable","nativeID","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaDomViewNativeComponent from \"../specs/SkiaDomViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaDomView: HostComponent<SkiaDomViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaDomViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaDomView extends React.Component<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDomViewProps) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\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    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"root\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaDomView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Platform","SkiaDomViewNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaDomView","OS","SkiaDomView","Component","constructor","props","_defineProperty","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","makeImageSnapshotAsync","redraw","requestRedraw","componentWillUnmount","render","mode","debug","viewProps","createElement","_extends","collapsable","nativeID","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaDomViewNativeComponent from \"../specs/SkiaDomViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaDomView: HostComponent<SkiaDomViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaDomViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaDomView extends React.Component<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDomViewProps) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\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    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\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 makeImageSnapshotAsync(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"root\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaDomView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":"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"}

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

@@ -49,6 +49,7 @@ export interface ISkiaViewApi {
     callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
+    makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
 }
 export interface SkiaBaseViewProps extends ViewProps {
     /**

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

@@ -1 +1 @@
-{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { GroupProps, RenderNode } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\nimport type { SharedValueType } from \"../renderer/processors/Animations/Animations\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValueType<SkSize>;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewProps extends SkiaBaseViewProps {\n  root?: RenderNode<GroupProps>;\n  onTouch?: TouchHandler;\n}\n"],"mappings":"AAaA,WAAYA,SAAS,0BAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAAA,OAATA,SAAS;AAAA;;AAqCrB;AACA;AACA"}
+{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { GroupProps, RenderNode } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\nimport type { SharedValueType } from \"../renderer/processors/Animations/Animations\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValueType<SkSize>;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewProps extends SkiaBaseViewProps {\n  root?: RenderNode<GroupProps>;\n  onTouch?: TouchHandler;\n}\n"],"mappings":"AAaA,WAAYA,SAAS,0BAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAAA,OAATA,SAAS;AAAA;;AAqCrB;AACA;AACA"}

package/lib/typescript/src/external/reanimated/useAnimatedImageValue.d.ts

@@ -1,2 +1,3 @@
+import { type SharedValue } from "react-native-reanimated";
 import type { DataSourceParam, SkImage } from "../../skia/types";
-export declare const useAnimatedImageValue: (source: DataSourceParam) => import("react-native-reanimated").SharedValue<SkImage | null>;
+export declare const useAnimatedImageValue: (source: DataSourceParam, paused?: SharedValue<boolean>) => SharedValue<SkImage | null>;

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

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
-import type { SkPicture, SkSize } from "../skia/types";
+import type { SkPicture, SkRect, SkSize } from "../skia/types";
 export declare const isOnMainThread: () => boolean;
-export declare const drawAsPicture: (element: ReactElement) => SkPicture;
+export declare const drawAsPicture: (element: ReactElement, bounds?: SkRect) => SkPicture;
 export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
 export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

package/lib/typescript/src/skia/types/Image/ImageFactory.d.ts

@@ -52,6 +52,20 @@ export interface ImageFactory {
      *  image, nullptr is returned.
      */
     MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
+    /**
+     * Return an Image backed by the given native platform buffer.
+     * The platform buffer must be a valid owning reference.
+     *
+     * This API is used by [react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera)
+     * to render a Skia Camera preview.
+     *
+     * - On Android; This is an `AHardwareBuffer*`
+     * - On iOS, this is a `CMSampleBufferRef`
+     * @param platformBuffer A strong `uintptr_t` pointer to the native platform buffer
+     * @throws Throws an error if the Image could not be created, for example when the given
+     * platform buffer is invalid.
+     */
+    MakeImageFromPlatformBuffer: (platformBuffer: bigint) => SkImage;
     /**
      * Returns an image that will be a screenshot of the view represented by
      * the view tag

package/lib/typescript/src/skia/types/PlatformBuffer/PlatformBufferFactory.d.ts

@@ -0,0 +1,12 @@
+import type { SkImage } from "../Image";
+export type PlatformBuffer = bigint;
+export interface PlatformBufferFactory {
+    /**
+     * Copy pixels to a platform buffer. (for testing purposes)
+     */
+    MakeFromImage: (image: SkImage) => PlatformBuffer;
+    /**
+     * Release a platform buffer that was created with `MakeFromImage`.
+     */
+    Release: (platformBuffer: PlatformBuffer) => void;
+}

package/lib/typescript/src/skia/types/PlatformBuffer/index.d.ts

@@ -0,0 +1 @@
+export * from "./PlatformBufferFactory";

package/lib/typescript/src/skia/types/Skia.d.ts

@@ -26,6 +26,7 @@ import type { Color, SkColor } from "./Color";
 import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
+import type { PlatformBufferFactory } from "./PlatformBuffer";
 /**
  * Declares the interface for the native Skia API
  */
@@ -71,4 +72,5 @@ export interface Skia {
     TextBlob: TextBlobFactory;
     Surface: SurfaceFactory;
     ParagraphBuilder: ParagraphBuilderFactory;
+    PlatformBuffer: PlatformBufferFactory;
 }

package/lib/typescript/src/skia/types/Surface/Surface.d.ts

@@ -26,4 +26,12 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
      * Make sure any queued draws are sent to the screen or the GPU.
      */
     flush(): void;
+    /**
+     * Returns the possibly scaled width of the surface.
+     */
+    width(): number;
+    /**
+     * Returns the possibly scaled height of the surface.
+     */
+    height(): number;
 }

package/lib/typescript/src/skia/types/index.d.ts

@@ -29,3 +29,4 @@ export * from "./TextBlob";
 export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
+export * from "./PlatformBuffer";

package/lib/typescript/src/skia/web/JsiSkImage.d.ts

@@ -3,8 +3,7 @@ import type { FilterMode, MipmapMode, SkImage, SkMatrix, SkShader, TileMode, Ima
 import { HostObject } from "./Host";
 export declare const toBase64String: (bytes: Uint8Array) => string;
 export declare class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
-    private releaseCtx?;
-    constructor(CanvasKit: CanvasKit, ref: Image, releaseCtx?: (() => void) | undefined);
+    constructor(CanvasKit: CanvasKit, ref: Image);
     height(): number;
     width(): number;
     getImageInfo(): ImageInfo;

package/lib/typescript/src/skia/web/JsiSkImageFactory.d.ts

@@ -1,11 +1,11 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkData, ImageInfo, SkImage } from "../types";
-import type { ImageFactory } from "../types/Image/ImageFactory";
+import type { SkData, ImageInfo, SkImage, PlatformBuffer, ImageFactory } from "../types";
 import { Host } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 export declare class JsiSkImageFactory extends Host implements ImageFactory {
     constructor(CanvasKit: CanvasKit);
     MakeImageFromViewTag(viewTag: number): Promise<SkImage | null>;
+    MakeImageFromPlatformBuffer(_platformBuffer: PlatformBuffer): SkImage;
     MakeImageFromEncoded(encoded: SkData): JsiSkImage | null;
     MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): JsiSkImage | null;
 }

package/lib/typescript/src/skia/web/JsiSkPlatformBufferFactory.d.ts

@@ -0,0 +1,8 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { PlatformBuffer, PlatformBufferFactory, SkImage } from "../types";
+import { Host } from "./Host";
+export declare class JsiSkPlatformBufferFactory extends Host implements PlatformBufferFactory {
+    constructor(CanvasKit: CanvasKit);
+    MakeFromImage(_image: SkImage): PlatformBuffer;
+    Release(_platformBuffer: PlatformBuffer): void;
+}

package/lib/typescript/src/skia/web/JsiSkSurface.d.ts

@@ -2,10 +2,11 @@ import type { CanvasKit, Surface } from "canvaskit-wasm";
 import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
-    private releaseCtx?;
-    constructor(CanvasKit: CanvasKit, ref: Surface, releaseCtx?: (() => void) | undefined);
+    constructor(CanvasKit: CanvasKit, ref: Surface);
     dispose: () => void;
     flush(): void;
+    width(): number;
+    height(): number;
     getCanvas(): SkCanvas;
     makeImageSnapshot(bounds?: SkRect): SkImage;
 }

package/lib/typescript/src/skia/web/JsiSkSurfaceFactory.d.ts

@@ -4,6 +4,6 @@ import { Host } from "./Host";
 import { JsiSkSurface } from "./JsiSkSurface";
 export declare class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
     constructor(CanvasKit: CanvasKit);
-    Make(width: number, height: number): JsiSkSurface | null;
+    Make(width: number, height: number): JsiSkSurface;
     MakeOffscreen(width: number, height: number): JsiSkSurface | null;
 }

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

@@ -12,6 +12,12 @@ export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
      * @returns An Image object.
      */
     makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshotAsync(rect?: SkRect): Promise<import("../skia/types").SkImage>;
     /**
      * Sends a redraw request to the native SkiaView.
      */

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

@@ -49,6 +49,7 @@ export interface ISkiaViewApi {
     callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
+    makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
 }
 export interface SkiaBaseViewProps extends ViewProps {
     /**

package/package.json

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

package/src/external/reanimated/textures.tsx

@@ -26,9 +26,15 @@ const createTexture = (
 };
 
 export const useTexture = (element: ReactElement, size: SkSize) => {
+  const { width, height } = size;
   const picture = useMemo(() => {
-    return drawAsPicture(element);
-  }, [element]);
+    return drawAsPicture(element, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    });
+  }, [element, width, height]);
   return usePictureAsTexture(picture, size);
 };
 

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import type { FrameInfo } from "react-native-reanimated";
+import { type FrameInfo, type SharedValue } from "react-native-reanimated";
 
 import { useAnimatedImage } from "../../skia/core/AnimatedImage";
 import type { DataSourceParam, SkImage } from "../../skia/types";
@@ -12,10 +12,15 @@ import {
 
 const DEFAULT_FRAME_DURATION = 60;
 
-export const useAnimatedImageValue = (source: DataSourceParam) => {
+export const useAnimatedImageValue = (
+  source: DataSourceParam,
+  paused?: SharedValue<boolean>
+) => {
   throwOnMissingReanimated();
+  const defaultPaused = useSharedValue(false);
+  const isPaused = paused ?? defaultPaused;
   const currentFrame = useSharedValue<null | SkImage>(null);
-  const lastTimestamp = useSharedValue(0);
+  const lastTimestamp = useSharedValue(-1);
   const animatedImage = useAnimatedImage(
     source,
     (err) => {
@@ -32,7 +37,9 @@ export const useAnimatedImageValue = (source: DataSourceParam) => {
       currentFrame.value = null;
       return;
     }
-
+    if (isPaused.value && lastTimestamp.value !== -1) {
+      return;
+    }
     const { timestamp } = frameInfo;
     const elapsed = timestamp - lastTimestamp.value;
 
@@ -50,8 +57,7 @@ export const useAnimatedImageValue = (source: DataSourceParam) => {
 
     // Update the last timestamp
     lastTimestamp.value = timestamp;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, true);
+  });
   useEffect(() => {
     return () => {
       animatedImage?.dispose();

package/src/mock/index.ts

@@ -31,6 +31,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     // Reanimated hooks
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
+    useImageAsTexture: NoopSharedValue,
     useTextureValue: NoopSharedValue,
     useTextureValueFromPicture: NoopSharedValue,
     useRSXformBuffer: NoopSharedValue,

package/src/renderer/Offscreen.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 
 import { JsiDrawingContext } from "../dom/types";
-import type { SkPicture, SkSize } from "../skia/types";
+import type { SkPicture, SkRect, SkSize } from "../skia/types";
 import { Skia } from "../skia";
 import { Platform } from "../Platform";
 
@@ -16,9 +16,9 @@ export const isOnMainThread = () => {
   );
 };
 
-export const drawAsPicture = (element: ReactElement) => {
+export const drawAsPicture = (element: ReactElement, bounds?: SkRect) => {
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording();
+  const canvas = recorder.beginRecording(bounds);
   const root = new SkiaRoot(Skia, false);
   root.render(element);
   const ctx = new JsiDrawingContext(Skia, canvas);

package/src/skia/types/Image/ImageFactory.ts

@@ -69,6 +69,21 @@ export interface ImageFactory {
    */
   MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
 
+  /**
+   * Return an Image backed by the given native platform buffer.
+   * The platform buffer must be a valid owning reference.
+   *
+   * This API is used by [react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera)
+   * to render a Skia Camera preview.
+   *
+   * - On Android; This is an `AHardwareBuffer*`
+   * - On iOS, this is a `CMSampleBufferRef`
+   * @param platformBuffer A strong `uintptr_t` pointer to the native platform buffer
+   * @throws Throws an error if the Image could not be created, for example when the given
+   * platform buffer is invalid.
+   */
+  MakeImageFromPlatformBuffer: (platformBuffer: bigint) => SkImage;
+
   /**
    * Returns an image that will be a screenshot of the view represented by
    * the view tag

package/src/skia/types/PlatformBuffer/PlatformBufferFactory.ts

@@ -0,0 +1,14 @@
+import type { SkImage } from "../Image";
+
+export type PlatformBuffer = bigint;
+
+export interface PlatformBufferFactory {
+  /**
+   * Copy pixels to a platform buffer. (for testing purposes)
+   */
+  MakeFromImage: (image: SkImage) => PlatformBuffer;
+  /**
+   * Release a platform buffer that was created with `MakeFromImage`.
+   */
+  Release: (platformBuffer: PlatformBuffer) => void;
+}

package/src/skia/types/PlatformBuffer/index.ts

@@ -0,0 +1 @@
+export * from "./PlatformBufferFactory";

package/src/skia/types/Skia.ts

@@ -30,6 +30,7 @@ import type { Color, SkColor } from "./Color";
 import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
+import type { PlatformBufferFactory } from "./PlatformBuffer";
 
 /**
  * Declares the interface for the native Skia API
@@ -93,6 +94,6 @@ export interface Skia {
   SVG: SVGFactory;
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
-  // Paragraph
   ParagraphBuilder: ParagraphBuilderFactory;
+  PlatformBuffer: PlatformBufferFactory;
 }

package/src/skia/types/Surface/Surface.ts

@@ -29,4 +29,14 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
    * Make sure any queued draws are sent to the screen or the GPU.
    */
   flush(): void;
+
+  /**
+   * Returns the possibly scaled width of the surface.
+   */
+  width(): number;
+
+  /**
+   * Returns the possibly scaled height of the surface.
+   */
+  height(): number;
 }

package/src/skia/types/index.ts

@@ -29,3 +29,4 @@ export * from "./TextBlob";
 export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
+export * from "./PlatformBuffer";

package/src/skia/web/JsiSkImage.ts

@@ -45,11 +45,7 @@ export const toBase64String = (bytes: Uint8Array) => {
 };
 
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
-  constructor(
-    CanvasKit: CanvasKit,
-    ref: Image,
-    private releaseCtx?: () => void
-  ) {
+  constructor(CanvasKit: CanvasKit, ref: Image) {
     super(CanvasKit, ref, "Image");
   }
 
@@ -154,37 +150,24 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
 
   dispose = () => {
     this.ref.delete();
-    if (this.releaseCtx) {
-      this.releaseCtx();
-    }
   };
 
   makeNonTextureImage(): SkImage {
+    // if the image is already a non-texture image, this is a no-op
     const partialInfo = this.ref.getImageInfo();
     const colorSpace = this.ref.getColorSpace();
     const info = {
       ...partialInfo,
       colorSpace,
     };
-
-    var pixelLen = info.width * info.height * 4;
-    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);
-    const pixels = this.ref.readPixels(
-      0,
-      0,
-      info,
-      pixelPtr,
-      info.width * 4
-    ) as Uint8Array | null;
+    const pixels = this.ref.readPixels(0, 0, info) as Uint8Array | null;
     if (!pixels) {
-      throw new Error("Could not create image from bytes");
+      throw new Error("Could not read pixels from image");
     }
     const img = this.CanvasKit.MakeImage(info, pixels, info.width * 4);
     if (!img) {
       throw new Error("Could not create image from bytes");
     }
-    return new JsiSkImage(this.CanvasKit, img, () => {
-      this.CanvasKit.Free(pixelPtr);
-    });
+    return new JsiSkImage(this.CanvasKit, img);
   }
 }

package/src/skia/web/JsiSkImageFactory.ts

@@ -1,7 +1,12 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
-import type { SkData, ImageInfo, SkImage } from "../types";
-import type { ImageFactory } from "../types/Image/ImageFactory";
+import type {
+  SkData,
+  ImageInfo,
+  SkImage,
+  PlatformBuffer,
+  ImageFactory,
+} from "../types";
 
 import { Host, getEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
@@ -19,6 +24,12 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     return Promise.resolve(null);
   }
 
+  MakeImageFromPlatformBuffer(_platformBuffer: PlatformBuffer): SkImage {
+    throw new Error(
+      "MakeImageFromPlatformBuffer() is only available on iOS and Android!"
+    );
+  }
+
   MakeImageFromEncoded(encoded: SkData) {
     const image = this.CanvasKit.MakeImageFromEncoded(
       JsiSkData.fromValue(encoded)

package/src/skia/web/JsiSkPlatformBufferFactory.ts

@@ -0,0 +1,22 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { PlatformBuffer, PlatformBufferFactory, SkImage } from "../types";
+
+import { Host, NotImplementedOnRNWeb } from "./Host";
+
+export class JsiSkPlatformBufferFactory
+  extends Host
+  implements PlatformBufferFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeFromImage(_image: SkImage): PlatformBuffer {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  Release(_platformBuffer: PlatformBuffer) {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkSurface.ts

@@ -11,25 +11,26 @@ export class JsiSkSurface
   extends HostObject<Surface, "Surface">
   implements SkSurface
 {
-  constructor(
-    CanvasKit: CanvasKit,
-    ref: Surface,
-    private releaseCtx?: () => void
-  ) {
+  constructor(CanvasKit: CanvasKit, ref: Surface) {
     super(CanvasKit, ref, "Surface");
   }
 
   dispose = () => {
-    this.ref.delete();
-    if (this.releaseCtx) {
-      this.releaseCtx();
-    }
+    this.ref.dispose();
   };
 
   flush() {
     this.ref.flush();
   }
 
+  width() {
+    return this.ref.width();
+  }
+
+  height() {
+    return this.ref.height();
+  }
+
   getCanvas(): SkCanvas {
     return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());
   }

package/src/skia/web/JsiSkSurfaceFactory.ts

@@ -11,26 +11,10 @@ export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
   }
 
   Make(width: number, height: number) {
-    var pixelLen = width * height * 4;
-    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);
-    const surface = this.CanvasKit.MakeRasterDirectSurface(
-      {
-        width: width,
-        height: height,
-        colorType: this.CanvasKit.ColorType.RGBA_8888,
-        alphaType: this.CanvasKit.AlphaType.Unpremul,
-        colorSpace: this.CanvasKit.ColorSpace.SRGB,
-      },
-      pixelPtr,
-      width * 4
+    return new JsiSkSurface(
+      this.CanvasKit,
+      this.CanvasKit.MakeSurface(width, height)!
     );
-    if (!surface) {
-      return null;
-    }
-    surface.getCanvas().clear(this.CanvasKit.TRANSPARENT);
-    return new JsiSkSurface(this.CanvasKit, surface, () => {
-      this.CanvasKit.Free(pixelPtr);
-    });
   }
 
   MakeOffscreen(width: number, height: number) {
@@ -39,7 +23,7 @@ export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
     const OC = (globalThis as any).OffscreenCanvas;
     let surface: Surface | null;
     if (OC === undefined) {
-      surface = this.CanvasKit.MakeSurface(width, height);
+      return this.Make(width, height);
     } else {
       const offscreen = new OC(width, height);
       const webglContext = this.CanvasKit.GetWebGLContext(offscreen);

package/src/skia/web/JsiSkia.ts

@@ -41,6 +41,7 @@ import { JsiSkTypefaceFontProviderFactory } from "./JsiSkTypefaceFontProviderFac
 import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
+import { JsiSkPlatformBufferFactory } from "./JsiSkPlatformBufferFactory";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -125,4 +126,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   TypefaceFontProvider: new JsiSkTypefaceFontProviderFactory(CanvasKit),
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
+  PlatformBuffer: new JsiSkPlatformBufferFactory(CanvasKit),
 });

package/src/views/SkiaDomView.tsx

@@ -66,6 +66,16 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
     return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
   }
 
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  public makeImageSnapshotAsync(rect?: SkRect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);
+  }
+
   /**
    * Sends a redraw request to the native SkiaView.
    */

package/src/views/types.ts

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