@shopify/react-native-skia 0.1.225 → 0.1.228

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

@@ -1,6 +1,7 @@
 import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
 import type { SkPath, SkPoint } from "../../skia/types";
 export declare const notifyChange: (value: SharedValue<unknown>) => void;
+export declare const usePathValue: (cb: (path: SkPath) => void) => SharedValue<SkPath>;
 export declare const useClock: () => SharedValue<number>;
 export declare const usePathInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SharedValue<SkPath>;
 export declare const useVectorInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPoint[], options?: ExtrapolationType) => SharedValue<{

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

@@ -1,9 +1,10 @@
 import type { DependencyList } from "react";
-import type { FrameCallback, FrameInfo, SharedValue } from "react-native-reanimated";
+import type { DerivedValue, FrameCallback, FrameInfo, SharedValue } from "react-native-reanimated";
 export declare const HAS_REANIMATED2: boolean;
 export declare const HAS_REANIMATED3: boolean;
 export declare function throwOnMissingReanimated(): void;
 export declare const useSharedValue: <T>(init: T, oneWayReadsOnly?: boolean) => SharedValue<T>;
+export declare const useDerivedValue: <T>(processor: () => T, dependencies?: DependencyList) => DerivedValue<T>;
 export declare const useFrameCallback: (callback: (frameInfo: FrameInfo) => void, autostart?: boolean) => FrameCallback;
 export declare const startMapper: (worklet: () => void, inputs?: unknown[], outputs?: unknown[]) => number;
 export declare const stopMapper: (mapperID: number) => void;

package/lib/typescript/src/renderer/components/Drawing.d.ts

@@ -1,3 +1,8 @@
 import React from "react";
 import type { CustomDrawingNodeProps } from "../../dom/types";
+/**
+ * @deprecated If you are looking to use the Skia imperative API, you can use:
+ * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+ * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
+ */
 export declare const Drawing: (props: CustomDrawingNodeProps) => React.JSX.Element;

package/lib/typescript/src/renderer/components/shapes/FitBox.d.ts

@@ -8,14 +8,14 @@ interface FitProps {
     dst: SkRect;
     children: ReactNode | ReactNode[];
 }
-export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect) => readonly [{
-    readonly translateX: number;
+export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect) => [{
+    translateX: number;
 }, {
-    readonly translateY: number;
+    translateY: number;
 }, {
-    readonly scaleX: number;
+    scaleX: number;
 }, {
-    readonly scaleY: number;
+    scaleY: number;
 }];
 export declare const FitBox: ({ fit, src, dst, children }: FitProps) => React.JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import type { Transforms2d } from "../types";
-export declare const processTransform2d: (transforms: Transforms2d) => import("../types").SkMatrix;
+import type { Transforms3d } from "../types";
+export declare const processTransform2d: (transforms: Transforms3d) => import("../types").SkMatrix;

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

@@ -1,8 +1,8 @@
-import type { SkCanvas, SkRect } from "../types";
+import { type SkCanvas, type SkRect, type SkSize } from "../types";
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds
  * @param cb Callback for drawing to the canvas
  * @returns SkPicture
  */
-export declare const createPicture: (rect: SkRect, cb: (canvas: SkCanvas) => void) => import("../types").SkPicture;
+export declare const createPicture: (cb: (canvas: SkCanvas) => void, rect?: SkRect | SkSize) => import("../types").SkPicture;

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

@@ -5,8 +5,3 @@ export declare const neg: (a: Vector) => import("../types").SkPoint;
 export declare const add: (a: Vector, b: Vector) => import("../types").SkPoint;
 export declare const sub: (a: Vector, b: Vector) => import("../types").SkPoint;
 export declare const dist: (a: Vector, b: Vector) => number;
-export declare const translate: ({ x, y }: Vector) => readonly [{
-    readonly translateX: number;
-}, {
-    readonly translateY: number;
-}];

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

@@ -372,7 +372,7 @@ export interface SkCanvas {
      * Replaces current matrix with m premultiplied with the existing matrix.
      * @param m
      */
-    concat(m: SkMatrix): void;
+    concat(m: SkMatrix | number[]): void;
     /**
      * Draws the given picture using the current clip, current matrix, and the provided paint.
      * @param skp

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

@@ -1,19 +1,9 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
-export declare enum MatrixIndex {
-    ScaleX = 0,
-    SkewX = 1,
-    TransX = 2,
-    SkewY = 3,
-    ScaleY = 4,
-    TransY = 5,
-    Persp0 = 6,
-    Persp1 = 7,
-    Persp2 = 8
-}
+import type { Matrix3, Matrix4, Transforms3d } from "./Matrix4";
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-    concat: (matrix: SkMatrix) => SkMatrix;
+    concat: (matrix: SkMatrix | Matrix4 | Matrix3 | number[]) => SkMatrix;
     translate: (x: number, y: number) => SkMatrix;
     scale: (x: number, y?: number) => SkMatrix;
     skew: (x: number, y: number) => SkMatrix;
@@ -25,14 +15,8 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     identity: () => SkMatrix;
     get: () => number[];
 }
-type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
-type Transformations = {
-    readonly [Name in Transform2dName]: number;
-};
-export type Transforms2d = readonly (Pick<Transformations, "translateX"> | Pick<Transformations, "translateY"> | Pick<Transformations, "scale"> | Pick<Transformations, "scaleX"> | Pick<Transformations, "scaleY"> | Pick<Transformations, "skewX"> | Pick<Transformations, "skewY"> | Pick<Transformations, "rotate">)[];
 export interface TransformProp {
-    transform?: Transforms2d;
+    transform?: Transforms3d;
 }
-export declare const processTransform: <T extends SkMatrix | SkCanvas>(m: T, transforms: Transforms2d) => T;
+export declare const processTransform: <T extends SkMatrix | SkCanvas>(m: T, transforms: Transforms3d) => T;
 export declare const toDegrees: (rad: number) => number;
-export {};

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

@@ -0,0 +1,90 @@
+type Point = {
+    x: number;
+    y: number;
+};
+type Vec2 = readonly [number, number];
+type Vec3 = readonly [number, number, number];
+export type Matrix3 = readonly [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+export type Matrix4 = readonly [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+type Transform3dName = "translateX" | "translateY" | "translateZ" | "translate" | "scale" | "scaleX" | "scaleY" | "skewX" | "skewY" | "rotateZ" | "rotate" | "perspective" | "rotateX" | "rotateY" | "matrix";
+type Transformations = {
+    [Name in Transform3dName]: Name extends "matrix" ? Matrix4 : Name extends "translate" ? Vec3 | Vec2 : number;
+};
+type Transform3d = Pick<Transformations, "translateX"> | Pick<Transformations, "translateY"> | Pick<Transformations, "translateZ"> | Pick<Transformations, "translate"> | Pick<Transformations, "scale"> | Pick<Transformations, "scaleX"> | Pick<Transformations, "scaleY"> | Pick<Transformations, "skewX"> | Pick<Transformations, "skewY"> | Pick<Transformations, "perspective"> | Pick<Transformations, "rotateX"> | Pick<Transformations, "rotateY"> | Pick<Transformations, "rotateZ"> | Pick<Transformations, "rotate"> | Pick<Transformations, "matrix">;
+export type Transforms3d = Transform3d[];
+/**
+ * @worklet
+ */
+export declare const Matrix4: () => Matrix4;
+/**
+ * @worklet
+ */
+export declare const translate: (x: number, y: number, z?: number) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const perspective: (p: number) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const mapPoint3d: (m: Matrix4, v: Vec3) => readonly [number, number, number];
+/**
+ * @worklet
+ */
+export declare const multiply4: (a: Matrix4, b: Matrix4) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const toMatrix3: (m: Matrix4) => number[];
+/**
+ * @worklet
+ */
+export declare const pivot: (m: Matrix4, p: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const scale: (sx: number, sy: number, sz?: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const rotateZ: (value: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const rotateX: (value: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const rotateY: (value: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const processTransform3d: (transforms: Transforms3d) => number[];
+export {};

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

@@ -440,7 +440,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     /**
      * Transforms the path by the specified matrix.
      */
-    transform(m3: SkMatrix): SkPath;
+    transform(m3: SkMatrix | number[]): SkPath;
     /**
      * Interpolates between Path with point array of equal size.
      * Copy verb array and weights to result, and set result path to a weighted

package/lib/typescript/src/skia/types/Picture/PictureRecorder.d.ts

@@ -7,7 +7,7 @@ export interface SkPictureRecorder {
      *
      * @param bounds - a rect to cull the results.
      */
-    beginRecording(bounds: SkRect): SkCanvas;
+    beginRecording(bounds?: SkRect): SkCanvas;
     /**
      * Returns the captured draw commands as a picture and invalidates the canvas returned earlier.
      */

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

@@ -4,3 +4,4 @@ export interface SkRect {
     readonly width: number;
     readonly height: number;
 }
+export declare const isRect: (def: unknown) => def is SkRect;

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

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

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

@@ -16,6 +16,5 @@ export declare abstract class BaseHostObject<T, N extends string> extends Host i
 export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
     static fromValue<T>(value: SkJSIInstance<string>): T;
 }
-export declare const getCkEnum: (e: EmbindEnum, v: number) => EmbindEnumEntity;
-export declare const ckEnum: (value: number) => EmbindEnumEntity;
-export declare const optEnum: (value: number | undefined) => EmbindEnumEntity | undefined;
+export declare const getEnum: (e: EmbindEnum, v: number) => EmbindEnumEntity;
+export declare const optEnum: (e: EmbindEnum, value: number | undefined) => EmbindEnumEntity | undefined;

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

@@ -40,7 +40,7 @@ export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements
     clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean): void;
     clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean): void;
     clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean): void;
-    concat(m: SkMatrix): void;
+    concat(m: SkMatrix | number[]): void;
     drawPicture(skp: SkPicture): void;
     readPixels(srcX: number, srcY: number, imageInfo: ImageInfo): Float32Array | Uint8Array | null;
 }

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

@@ -1,12 +1,12 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
-import type { SkMatrix } from "../types";
+import { type Matrix3, type Matrix4, type SkMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
     private preMultiply;
     private postMultiply;
     dispose: () => void;
-    concat(matrix: SkMatrix): this;
+    concat(matrix: SkMatrix | number[] | Matrix4 | Matrix3): this;
     translate(x: number, y: number): this;
     postTranslate(x: number, y: number): this;
     scale(x: number, y?: number): this;

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

@@ -7,6 +7,6 @@ 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;
+    beginRecording(bounds?: SkRect): JsiSkCanvas;
     finishRecordingAsPicture(): JsiSkPicture;
 }

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

@@ -1,5 +1,26 @@
-import type { ISkiaValueApi } from "./types";
+import type { AnimationState, ISkiaValueApi, SkiaAnimation, SkiaClockValue, SkiaMutableValue, SkiaValue } from "./types";
 declare global {
     var SkiaValueApi: ISkiaValueApi;
 }
-export declare const ValueApi: ISkiaValueApi;
+export declare const ValueApi: {
+    /**
+     * @deprecated Use Reanimated 3
+     * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+     */
+    createValue<T>(initialValue: T): SkiaMutableValue<T>;
+    /**
+     * @deprecated Use Reanimated 3
+     * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+     */
+    createComputedValue<R>(cb: () => R, values: SkiaValue<unknown>[]): SkiaValue<R>;
+    /**
+     * @deprecated Use Reanimated 3
+     * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+     */
+    createClockValue(): SkiaClockValue;
+    /**
+     * @deprecated Use Reanimated 3
+     * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+     */
+    createAnimation<S extends AnimationState = AnimationState>(cb: (t: number, state: S | undefined) => S): SkiaAnimation;
+};

package/lib/typescript/src/values/hooks/useClockValue.d.ts

@@ -1,4 +1,7 @@
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * @returns A new value that will be updated on every frame redraw with the
  * number of milliseconds elapsed since the value was started.
  * The clock is created in the stopped state.

package/lib/typescript/src/values/hooks/useComputedValue.d.ts

@@ -1,4 +1,7 @@
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new computed value - a value that will calculate its value depending
  * on other values.
  * @param cb Callback to calculate new value

package/lib/typescript/src/values/hooks/useValue.d.ts

@@ -1,5 +1,8 @@
 import type { SkiaMutableValue } from "../types";
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new value that holds some data.
  * @param v Value to hold
  * @returns A Value of type of v

package/lib/typescript/src/values/hooks/useValueEffect.d.ts

@@ -1,5 +1,8 @@
 import type { SkiaValue } from "../types";
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Sets up an effect that will be run whenever the value changes
  * @param value Value to subscribe to changes on
  * @param cb Callback to run when value changes

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

@@ -43,21 +43,21 @@ export interface ISkiaValueApi {
      * Creates a new value that holds the initial value and that
      * can be changed.
      */
-    createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
+    createValue<T>(initialValue: T): SkiaMutableValue<T>;
     /**
      * Creates a computed value. This is a calculated value that returns the result of
      * a function that is called with the values of the dependencies.
      */
-    createComputedValue: <R>(cb: () => R, values: Array<SkiaValue<unknown>>) => SkiaValue<R>;
+    createComputedValue<R>(cb: () => R, values: Array<SkiaValue<unknown>>): SkiaValue<R>;
     /**
      * Creates a clock value where the value is the number of milliseconds elapsed
      * since the clock was created
      */
-    createClockValue: () => SkiaClockValue;
+    createClockValue(): SkiaClockValue;
     /**
      * Creates an animation that is driven from a clock and updated every frame.
      * @param cb Callback to calculate next value from time.
      * @returns An animation object that can control a value.
      */
-    createAnimation: <S extends AnimationState = AnimationState>(cb: (t: number, state: S | undefined) => S) => SkiaAnimation;
+    createAnimation<S extends AnimationState = AnimationState>(cb: (t: number, state: S | undefined) => S): SkiaAnimation;
 }

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

@@ -5,6 +5,11 @@ import type { SkiaDrawViewProps } from "./types";
 export declare const SkiaViewNativeId: {
     current: number;
 };
+/**
+ * @deprecated If you are looking to use the Skia imperative API, you can use:
+ * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+ * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
+ */
 export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
     constructor(props: SkiaDrawViewProps);
     private _nativeId;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.225",
+  "version": "0.1.228",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -94,6 +94,7 @@
     "eslint-config-react-native-wcandillon": "3.10.2",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "29.6.4",
+    "jest-diff": "^29.7.0",
     "merge-dirs": "^0.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",

package/src/animation/spring/runSpring.ts

@@ -10,6 +10,9 @@ import { Spring } from "./Spring";
 import { createSpringEasing } from "./functions/spring";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new animation on an existing value that will be driven by
  * an animation value. The value will be run from / to the value in
  * params and modified by the provided easing curve for the length of

package/src/animation/spring/useSpring.ts

@@ -10,6 +10,9 @@ import { Spring } from "./Spring";
 import { createSpringEasing } from "./functions/spring";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creats a spring based animation value that will run whenever
  * the animation parameters change.
  * @param toOrParams

package/src/animation/timing/runTiming.ts

@@ -8,6 +8,9 @@ import type {
 import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new animation on an existing value that will be driven by
  * an animation value. The value will be run from / to the value in
  * params and modified by the provided easing curve for the length of

package/src/animation/timing/useLoop.ts

@@ -3,6 +3,9 @@ import type { TimingConfig } from "../types";
 import { useTiming } from "./useTiming";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Configures a looped timing value. The value will go back and forth
  * between 0 and 1 and back.
  * @param config Timing configuration for easing and duration

package/src/animation/timing/useTiming.ts

@@ -12,6 +12,9 @@ import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creats an animation value that will run whenever
  * the animation parameters change. The animation start immediately.
  * @param toOrParams

package/src/dom/nodes/JsiSkDOM.ts

@@ -173,6 +173,10 @@ export class JsiSkDOM implements SkDOM {
   }
 
   CustomDrawing(props: CustomDrawingNodeProps) {
+    console.warn(
+      // eslint-disable-next-line max-len
+      "The <Drawing /> component is deprecated and will be removed in the next release. For custom drawings, please sure the <Picture /> component: https://shopify.github.io/react-native-skia/docs/shapes/pictures/"
+    );
     return NATIVE_DOM
       ? global.SkiaDomApi.CustomDrawingNode(props ?? {})
       : new CustomDrawingNode(this.ctx, props);

package/src/dom/nodes/datatypes/Fitting.ts

@@ -9,12 +9,20 @@ export interface Size {
 
 export const size = (width = 0, height = 0) => ({ width, height });
 
-export const rect2rect = (src: SkRect, dst: SkRect) => {
+export const rect2rect = (
+  src: SkRect,
+  dst: SkRect
+): [
+  { translateX: number },
+  { translateY: number },
+  { scaleX: number },
+  { scaleY: number }
+] => {
   const scaleX = dst.width / src.width;
   const scaleY = dst.height / src.height;
   const translateX = dst.x - src.x * scaleX;
   const translateY = dst.y - src.y * scaleY;
-  return [{ translateX }, { translateY }, { scaleX }, { scaleY }] as const;
+  return [{ translateX }, { translateY }, { scaleX }, { scaleY }];
 };
 
 export const fitRects = (

package/src/dom/nodes/datatypes/Gradient.ts

@@ -1,11 +1,11 @@
-import type { Skia, SkRect, Transforms2d, Vector } from "../../../skia/types";
+import type { Skia, SkRect, Transforms3d, Vector } from "../../../skia/types";
 import { TileMode } from "../../../skia/types";
 import type { GradientProps, ImageShaderProps } from "../../types";
 
 import { enumKey } from "./Enum";
 import { processTransformProps } from "./Transform";
 
-export const transformOrigin = (origin: Vector, transform: Transforms2d) => [
+export const transformOrigin = (origin: Vector, transform: Transforms3d) => [
   { translateX: origin.x },
   { translateY: origin.y },
   ...transform,

package/src/dom/types/Common.ts

@@ -3,6 +3,8 @@ import type { ReactNode } from "react";
 import type {
   BlendMode,
   Color,
+  Matrix3,
+  Matrix4,
   PaintStyle,
   SkMatrix,
   SkPaint,
@@ -11,7 +13,7 @@ import type {
   SkRRect,
   StrokeCap,
   StrokeJoin,
-  Transforms2d,
+  Transforms3d,
   Vector,
 } from "../../skia/types";
 
@@ -64,9 +66,9 @@ export interface ScalarCircleDef {
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 
 export interface TransformProps {
-  transform?: Transforms2d;
+  transform?: Transforms3d;
   origin?: Vector;
-  matrix?: SkMatrix;
+  matrix?: SkMatrix | Matrix4 | Matrix3 | number[];
 }
 
 export interface PaintProps extends ChildrenProps {

package/src/external/reanimated/interpolators.ts

@@ -1,5 +1,9 @@
-import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
-import { useMemo } from "react";
+import type {
+  ExtrapolationType,
+  FrameInfo,
+  SharedValue,
+} from "react-native-reanimated";
+import { useCallback, useMemo } from "react";
 
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
@@ -9,19 +13,38 @@ import {
   useAnimatedReaction,
   useFrameCallback,
   useSharedValue,
+  useDerivedValue,
 } from "./moduleWrapper";
 
 export const notifyChange = (value: SharedValue<unknown>) => {
   "worklet";
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (value as any)._value = value.value;
+  if (_WORKLET) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (value as any)._value = value.value;
+  }
+};
+
+export const usePathValue = (cb: (path: SkPath) => void) => {
+  const pathInit = useMemo(() => Skia.Path.Make(), []);
+  const path = useSharedValue(pathInit);
+  useDerivedValue(() => {
+    path.value.reset();
+    cb(path.value);
+    notifyChange(path);
+  });
+  return path;
 };
 
 export const useClock = () => {
   const clock = useSharedValue(0);
-  useFrameCallback((info) => {
-    clock.value = info.timeSinceFirstFrame;
-  });
+  const callback = useCallback(
+    (info: FrameInfo) => {
+      "worklet";
+      clock.value = info.timeSinceFirstFrame;
+    },
+    [clock]
+  );
+  useFrameCallback(callback);
   return clock;
 };
 

package/src/external/reanimated/moduleWrapper.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DependencyList } from "react";
 import type {
+  DerivedValue,
   FrameCallback,
   FrameInfo,
   SharedValue,
@@ -42,6 +43,11 @@ export const useSharedValue: <T>(
   oneWayReadsOnly?: boolean
 ) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;
 
+export const useDerivedValue: <T>(
+  processor: () => T,
+  dependencies?: DependencyList
+) => DerivedValue<T> = Reanimated2?.useDerivedValue || throwOnMissingReanimated;
+
 export const useFrameCallback: (
   callback: (frameInfo: FrameInfo) => void,
   autostart?: boolean