@shopify/react-native-skia 0.1.191 → 0.1.192

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

@@ -2,6 +2,7 @@ import type { ViewProps } from "react-native";
 import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
     mode?: DrawMode;
@@ -70,7 +71,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      * Pass an animated value to the onSize property to get updates when
      * the Skia view is resized.
      */
-    onSize?: SkiaMutableValue<SkSize>;
+    onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
 }
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**

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 {\n  SkCanvas,\n  SkImage,\n  SkPicture,\n  SkRect,\n  SkSize,\n} from \"../skia/types\";\nimport type { SkiaMutableValue, SkiaValue } from \"../values\";\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\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => 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  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\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?: SkiaMutableValue<SkSize>;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\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":"AAmBA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}
+{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { GroupProps, RenderNode } from \"../dom/types\";\nimport type {\n  SkCanvas,\n  SkImage,\n  SkPicture,\n  SkRect,\n  SkSize,\n} from \"../skia/types\";\nimport type { SkiaMutableValue, SkiaValue } from \"../values\";\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\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => 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  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\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?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\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":"AAoBA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}

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

@@ -1,3 +1,3 @@
-import type { SkData, DataSourceParam, JsiDisposable } from "../types";
-export declare const useRawData: <T extends JsiDisposable>(source: DataSourceParam, factory: (data: SkData) => T | null, onError?: ((err: Error) => void) | undefined) => T | null;
+import type { SkData, DataSourceParam, BaseSkJSIInstance } from "../types";
+export declare const useRawData: <T extends BaseSkJSIInstance>(source: DataSourceParam, factory: (data: SkData) => T | null, onError?: ((err: Error) => void) | undefined) => T | null;
 export declare const useData: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => SkData | null;

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

@@ -1,5 +1,5 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export declare type SkData = SkJSIInstance<"Data"> & JsiDisposable;
+import type { SkJSIInstance } from "../JsiInstance";
+export declare type SkData = SkJSIInstance<"Data">;
 declare type RNModule = number;
 declare type ESModule = {
     __esModule: true;

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

@@ -1,5 +1,5 @@
 import type { SkMatrix } from "../Matrix";
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 export declare enum FilterMode {
@@ -16,7 +16,7 @@ export declare enum ImageFormat {
     PNG = 4,
     WEBP = 6
 }
-export interface SkImage extends SkJSIInstance<"Image">, JsiDisposable {
+export interface SkImage extends SkJSIInstance<"Image"> {
     /**
      * Returns the possibly scaled height of the image.
      */

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

@@ -1,6 +1,6 @@
-export interface SkJSIInstance<T extends string> {
-    __typename__: T;
-}
-export interface JsiDisposable {
+export interface BaseSkJSIInstance {
     dispose: () => void;
 }
+export interface SkJSIInstance<T extends string> extends BaseSkJSIInstance {
+    __typename__: T;
+}

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

@@ -1,5 +1,5 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export interface SkSVG extends SkJSIInstance<"SVG">, JsiDisposable {
+import type { SkJSIInstance } from "../JsiInstance";
+export interface SkSVG extends SkJSIInstance<"SVG"> {
     width(): number;
     height(): number;
 }

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

@@ -1,2 +1,2 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export declare type SkTypeface = SkJSIInstance<"Typeface"> & JsiDisposable;
+import type { SkJSIInstance } from "../JsiInstance";
+export declare type SkTypeface = SkJSIInstance<"Typeface">;

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

@@ -11,6 +11,7 @@ export declare abstract class BaseHostObject<T, N extends string> extends Host i
     readonly __typename__: N;
     ref: T;
     constructor(CanvasKit: CanvasKit, ref: T, typename: N);
+    abstract dispose: () => void;
 }
 export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
     static fromValue<T>(value: SkJSIInstance<string>): T;

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

@@ -3,6 +3,7 @@ import type { BlendMode, ClipOp, FilterMode, MipmapMode, PointMode, SaveLayerFla
 import { HostObject } from "./Host";
 export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements SkCanvas {
     constructor(CanvasKit: CanvasKit, ref: Canvas);
+    dispose: () => void;
     drawRect(rect: SkRect, paint: SkPaint): void;
     drawImage(image: SkImage, x: number, y: number, paint?: SkPaint): void;
     drawImageRect(img: SkImage, src: SkRect, dest: SkRect, paint: SkPaint, fastSample?: boolean): void;

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

@@ -3,4 +3,5 @@ import type { SkColorFilter } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkColorFilter extends HostObject<ColorFilter, "ColorFilter"> implements SkColorFilter {
     constructor(CanvasKit: CanvasKit, ref: ColorFilter);
+    dispose: () => void;
 }

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

@@ -9,4 +9,5 @@ export declare class JsiSkContourMeasure extends HostObject<ContourMeasure, "Con
     getSegment(startD: number, stopD: number, startWithMoveTo: boolean): JsiSkPath;
     isClosed(): boolean;
     length(): number;
+    dispose: () => void;
 }

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

@@ -5,4 +5,5 @@ import { JsiSkContourMeasure } from "./JsiSkContourMeasure";
 export declare class JsiSkContourMeasureIter extends HostObject<ContourMeasureIter, "ContourMeasureIter"> implements SkContourMeasureIter {
     constructor(CanvasKit: CanvasKit, ref: ContourMeasureIter);
     next(): JsiSkContourMeasure | null;
+    dispose: () => void;
 }

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

@@ -4,6 +4,6 @@ import { HostObject } from "./Host";
 declare type Data = ArrayBuffer;
 export declare class JsiSkData extends HostObject<Data, "Data"> implements SkData {
     constructor(CanvasKit: CanvasKit, ref: Data);
-    dispose(): void;
+    dispose: () => void;
 }
 export {};

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

@@ -5,6 +5,7 @@ import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
+    dispose: () => void;
     getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;

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

@@ -10,6 +10,6 @@ export declare class JsiSkImage extends HostObject<Image, "Image"> implements Sk
     makeShaderCubic(tx: TileMode, ty: TileMode, B: number, C: number, localMatrix?: SkMatrix): SkShader;
     encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array;
     encodeToBase64(fmt?: ImageFormat, quality?: number): string;
-    dispose(): void;
+    dispose: () => void;
     makeNonTextureImage(): SkImage;
 }

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

@@ -3,4 +3,5 @@ import type { SkImageFilter } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkImageFilter extends HostObject<ImageFilter, "ImageFilter"> implements SkImageFilter {
     constructor(CanvasKit: CanvasKit, ref: ImageFilter);
+    dispose: () => void;
 }

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

@@ -3,4 +3,5 @@ import type { SkMaskFilter } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMaskFilter extends HostObject<MaskFilter, "MaskFilter"> implements SkMaskFilter {
     constructor(CanvasKit: CanvasKit, ref: MaskFilter);
+    dispose: () => void;
 }

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

@@ -3,6 +3,7 @@ import type { SkMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
+    dispose: () => void;
     concat(matrix: SkMatrix): this;
     translate(x: number, y: number): this;
     scale(x: number, y?: number): this;

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

@@ -3,6 +3,7 @@ import type { StrokeJoin, BlendMode, SkColor, SkColorFilter, SkImageFilter, SkPa
 import { HostObject } from "./Host";
 export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     constructor(CanvasKit: CanvasKit, ref: Paint);
+    dispose: () => void;
     copy(): JsiSkPaint;
     reset(): void;
     getAlphaf(): number;

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

@@ -5,6 +5,7 @@ import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     constructor(CanvasKit: CanvasKit, ref: Path);
+    dispose: () => void;
     addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): this;
     addArc(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number): this;
     addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): this;

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

@@ -3,4 +3,5 @@ import type { SkPathEffect } from "../types/PathEffect";
 import { HostObject } from "./Host";
 export declare class JsiSkPathEffect extends HostObject<PathEffect, "PathEffect"> implements SkPathEffect {
     constructor(CanvasKit: CanvasKit, ref: PathEffect);
+    dispose: () => void;
 }

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

@@ -4,6 +4,7 @@ import { HostObject } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
 export declare class JsiSkPicture extends HostObject<Picture, "Picture"> implements SkPicture {
     constructor(CanvasKit: CanvasKit, ref: Picture);
+    dispose: () => void;
     makeShader(tmx: TileMode, tmy: TileMode, mode: FilterMode, localMatrix?: SkMatrix, tileRect?: SkRect): JsiSkShader;
     serialize(): Uint8Array | null;
 }

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

@@ -6,6 +6,7 @@ import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkPicture } from "./JsiSkPicture";
 export declare class JsiSkPictureRecorder extends HostObject<PictureRecorder, "PictureRecorder"> implements SkPictureRecorder {
     constructor(CanvasKit: CanvasKit, ref: PictureRecorder);
+    dispose: () => void;
     beginRecording(bounds: SkRect): JsiSkCanvas;
     finishRecordingAsPicture(): JsiSkPicture;
 }

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

@@ -4,6 +4,7 @@ import { BaseHostObject } from "./Host";
 export declare class JsiSkPoint extends BaseHostObject<Point, "Point"> implements SkPoint {
     static fromValue(point: SkPoint): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Point);
+    dispose: () => void;
     get x(): number;
     get y(): number;
 }

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

@@ -3,6 +3,7 @@ import type { SkRect, SkRRect } from "../types";
 import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkRRect extends BaseHostObject<RRect, "RRect"> implements SkRRect {
+    dispose: () => void;
     static fromValue(CanvasKit: CanvasKit, rect: SkRRect): Float32Array;
     constructor(CanvasKit: CanvasKit, rect: SkRect, rx: number, ry: number);
     get rx(): number;

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

@@ -4,4 +4,5 @@ import { HostObject } from "./Host";
 export declare type RSXform = Float32Array;
 export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
     constructor(CanvasKit: CanvasKit, ref: RSXform);
+    dispose: () => void;
 }

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

@@ -3,6 +3,7 @@ import type { SkRect } from "../types";
 import { BaseHostObject } from "./Host";
 export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
     static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
+    dispose: () => void;
     constructor(CanvasKit: CanvasKit, ref: Rect);
     get x(): number;
     get y(): number;

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

@@ -6,6 +6,7 @@ import { JsiSkShader } from "./JsiSkShader";
 export declare class JsiSkRuntimeEffect extends HostObject<RuntimeEffect, "RuntimeEffect"> implements SkRuntimeEffect {
     private sksl;
     constructor(CanvasKit: CanvasKit, ref: RuntimeEffect, sksl: string);
+    dispose: () => void;
     source(): string;
     makeShader(uniforms: number[], localMatrix?: SkMatrix): JsiSkShader;
     makeShaderWithChildren(uniforms: number[], children?: SkShader[], localMatrix?: SkMatrix): JsiSkShader;

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

@@ -3,4 +3,5 @@ import type { SkShader } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkShader extends HostObject<Shader, "Shader"> implements SkShader {
     constructor(CanvasKit: CanvasKit, ref: Shader);
+    dispose: () => void;
 }

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

@@ -3,6 +3,7 @@ import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
     constructor(CanvasKit: CanvasKit, ref: Surface);
+    dispose: () => void;
     flush(): void;
     getCanvas(): SkCanvas;
     makeImageSnapshot(bounds?: SkRect): SkImage;

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

@@ -3,4 +3,5 @@ import type { SkTextBlob } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkTextBlob extends HostObject<TextBlob, "TextBlob"> implements SkTextBlob {
     constructor(CanvasKit: CanvasKit, ref: TextBlob);
+    dispose: () => void;
 }

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

@@ -5,5 +5,5 @@ export declare class JsiSkTypeface extends HostObject<Typeface, "Typeface"> impl
     constructor(CanvasKit: CanvasKit, ref: Typeface);
     get bold(): boolean;
     get italic(): boolean;
-    dispose(): void;
+    dispose: () => void;
 }

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

@@ -4,6 +4,7 @@ import { HostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkVertices extends HostObject<Vertices, "Vertices"> implements SkVertices {
     constructor(CanvasKit: CanvasKit, ref: Vertices);
+    dispose: () => void;
     bounds(): JsiSkRect;
     uniqueID(): number;
 }

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

@@ -11,7 +11,7 @@ export interface SkiaValue<T = number> {
     /**
      * Invalidates the value. Has different meaning depending on the type of the value.
      */
-    __invalidate: () => void;
+    dispose: () => void;
     /**
      * Field to make typechecking easier
      */

package/lib/typescript/src/values/web/RNSkComputedValue.d.ts

@@ -6,5 +6,5 @@ export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
     private _callback;
     private _unsubscribers;
     unsubscribe(): void;
-    __invalidate(): void;
+    dispose(): void;
 }

package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts

@@ -8,5 +8,5 @@ export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
     readonly __typename__ = "RNSkValue";
     get current(): T;
     addListener(cb: (value: T) => void): () => void;
-    __invalidate(): void;
+    dispose(): void;
 }

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

@@ -2,6 +2,7 @@ import type { ViewProps } from "react-native";
 import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
     mode?: DrawMode;
@@ -70,7 +71,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      * Pass an animated value to the onSize property to get updates when
      * the Skia view is resized.
      */
-    onSize?: SkiaMutableValue<SkSize>;
+    onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
 }
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.191",
+  "version": "0.1.192",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/renderer/Canvas.tsx

@@ -17,9 +17,11 @@ import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
 import { JsiDrawingContext } from "../dom/types";
+import { useValue } from "../values";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
+import { isValue } from "./processors";
 
 export const useCanvasRef = () => useRef<SkiaDomView>(null);
 
@@ -31,9 +33,27 @@ export interface CanvasProps extends SkiaBaseViewProps {
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: onSizeReanimatedOrSkia,
+      ...props
+    },
     forwardedRef
   ) => {
+    const size = useValue({ width: 0, height: 0 });
+    const onSize = isValue(onSizeReanimatedOrSkia)
+      ? onSizeReanimatedOrSkia
+      : size;
+    useEffect(() => {
+      if (!isValue(onSizeReanimatedOrSkia) && onSizeReanimatedOrSkia) {
+        return size.addListener((v) => (onSizeReanimatedOrSkia.value = v));
+      }
+      return undefined;
+    }, [onSizeReanimatedOrSkia, size]);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {

package/src/skia/core/Data.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { Skia } from "../Skia";
-import type { SkData, DataSourceParam, JsiDisposable } from "../types";
+import type { SkData, DataSourceParam, BaseSkJSIInstance } from "../types";
 import { Platform } from "../../Platform";
 
 const factoryWrapper = <T>(
@@ -37,7 +37,7 @@ const loadData = <T>(
     );
   }
 };
-const useLoading = <T extends JsiDisposable>(
+const useLoading = <T extends BaseSkJSIInstance>(
   source: DataSourceParam,
   loader: () => Promise<T | null>
 ) => {
@@ -61,7 +61,7 @@ const useLoading = <T extends JsiDisposable>(
   return data;
 };
 
-export const useRawData = <T extends JsiDisposable>(
+export const useRawData = <T extends BaseSkJSIInstance>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
   onError?: (err: Error) => void

package/src/skia/types/Data/Data.ts

@@ -1,6 +1,6 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export type SkData = SkJSIInstance<"Data"> & JsiDisposable;
+export type SkData = SkJSIInstance<"Data">;
 
 type RNModule = number;
 type ESModule = {

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

@@ -1,5 +1,5 @@
 import type { SkMatrix } from "../Matrix";
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 
@@ -20,7 +20,7 @@ export enum ImageFormat {
   WEBP = 6,
 }
 
-export interface SkImage extends SkJSIInstance<"Image">, JsiDisposable {
+export interface SkImage extends SkJSIInstance<"Image"> {
   /**
    * Returns the possibly scaled height of the image.
    */

package/src/skia/types/JsiInstance.ts

@@ -1,7 +1,7 @@
-export interface SkJSIInstance<T extends string> {
-  __typename__: T;
+export interface BaseSkJSIInstance {
+  dispose: () => void;
 }
 
-export interface JsiDisposable {
-  dispose: () => void;
+export interface SkJSIInstance<T extends string> extends BaseSkJSIInstance {
+  __typename__: T;
 }

package/src/skia/types/SVG/SVG.ts

@@ -1,6 +1,6 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkSVG extends SkJSIInstance<"SVG">, JsiDisposable {
+export interface SkSVG extends SkJSIInstance<"SVG"> {
   width(): number;
   height(): number;
 }

package/src/skia/types/Typeface/Typeface.ts

@@ -1,3 +1,3 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export type SkTypeface = SkJSIInstance<"Typeface"> & JsiDisposable;
+export type SkTypeface = SkJSIInstance<"Typeface">;

package/src/skia/web/Host.ts

@@ -28,6 +28,8 @@ export abstract class BaseHostObject<T, N extends string>
     this.ref = ref;
     this.__typename__ = typename;
   }
+
+  abstract dispose: () => void;
 }
 
 export abstract class HostObject<T, N extends string> extends BaseHostObject<

package/src/skia/web/JsiSkCanvas.ts

@@ -46,6 +46,10 @@ export class JsiSkCanvas
     super(CanvasKit, ref, "Canvas");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   drawRect(rect: SkRect, paint: SkPaint) {
     this.ref.drawRect(
       JsiSkRect.fromValue(this.CanvasKit, rect),

package/src/skia/web/JsiSkColorFilter.ts

@@ -11,4 +11,8 @@ export class JsiSkColorFilter
   constructor(CanvasKit: CanvasKit, ref: ColorFilter) {
     super(CanvasKit, ref, "ColorFilter");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkContourMeasure.ts

@@ -36,4 +36,8 @@ export class JsiSkContourMeasure
   length() {
     return this.ref.length();
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkContourMeasureIter.ts

@@ -20,4 +20,8 @@ export class JsiSkContourMeasureIter
     }
     return new JsiSkContourMeasure(this.CanvasKit, result);
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkData.ts

@@ -11,7 +11,7 @@ export class JsiSkData extends HostObject<Data, "Data"> implements SkData {
     super(CanvasKit, ref, "Data");
   }
 
-  dispose() {
-    // Not implemented in data
-  }
+  dispose = () => {
+    // Not implemented in data - since data is a raw ArrayBuffer
+  };
 }

package/src/skia/web/JsiSkFont.ts

@@ -20,6 +20,10 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   getTextWidth(text: string, paint?: SkPaint | undefined) {
     const ids = this.getGlyphIDs(text);
     const widths = this.getGlyphWidths(ids, paint);

package/src/skia/web/JsiSkImage.ts

@@ -110,9 +110,9 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return toBase64String(bytes);
   }
 
-  dispose() {
+  dispose = () => {
     this.ref.delete();
-  }
+  };
 
   makeNonTextureImage(): SkImage {
     return new JsiSkImage(

package/src/skia/web/JsiSkImageFilter.ts

@@ -11,4 +11,8 @@ export class JsiSkImageFilter
   constructor(CanvasKit: CanvasKit, ref: ImageFilter) {
     super(CanvasKit, ref, "ImageFilter");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkMaskFilter.ts

@@ -11,4 +11,8 @@ export class JsiSkMaskFilter
   constructor(CanvasKit: CanvasKit, ref: MaskFilter) {
     super(CanvasKit, ref, "MaskFilter");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkMatrix.ts

@@ -12,6 +12,10 @@ export class JsiSkMatrix
     super(CanvasKit, ref, "Matrix");
   }
 
+  dispose = () => {
+    // Do nothing - the matrix is represenetd by a Float32Array
+  };
+
   concat(matrix: SkMatrix) {
     this.ref.set(
       this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))