@shopify/react-native-skia 0.1.214 → 0.1.215

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

@@ -0,0 +1,9 @@
+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 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<{
+    x: number;
+    y: number;
+}>;

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

@@ -1,10 +1,12 @@
-import type { SharedValueType } from "../../renderer/processors/Animations";
+import type { DependencyList } from "react";
+import type { 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: any;
-export declare const useFrameCallback: (...args: any[]) => any;
-export declare const startMapper: any;
-export declare const stopMapper: any;
+export declare const useSharedValue: <T>(init: T, oneWayReadsOnly?: boolean) => SharedValue<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;
 export declare const runOnJS: any;
-export declare const isSharedValue: <T>(value: unknown) => value is SharedValueType<T>;
+export declare const useAnimatedReaction: <T>(prepare: () => T, react: (v: T) => void, dependencies?: DependencyList) => void;
+export declare const isSharedValue: <T>(value: unknown) => value is SharedValue<T>;

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

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

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

@@ -1,2 +1 @@
-import { type DependencyList } from "react";
-export declare const useDerivedValueOnJS: (fn: () => any, deps?: DependencyList) => any;
+export declare const useDerivedValueOnJS: (fn: () => any, deps: unknown[]) => import("react-native-reanimated").SharedValue<any>;

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

@@ -3,4 +3,3 @@ import type { DataSourceParam } from "../types";
  * Returns a Skia Animated Image object
  * */
 export declare const useAnimatedImage: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkAnimatedImage | null;
-export declare const useAnimatedImageValue: (source: DataSourceParam) => any;

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

@@ -18,6 +18,10 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     scale: (x: number, y?: number) => SkMatrix;
     skew: (x: number, y: number) => SkMatrix;
     rotate: (theta: number) => SkMatrix;
+    postTranslate: (x: number, y: number) => SkMatrix;
+    postScale: (x: number, y?: number) => SkMatrix;
+    postSkew: (x: number, y: number) => SkMatrix;
+    postRotate: (theta: number) => SkMatrix;
     identity: () => SkMatrix;
     get: () => number[];
 }

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

@@ -167,7 +167,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      * Sets FillType, the rule used to fill Path.
      * @param fill
      */
-    setFillType(fill: FillType): void;
+    setFillType(fill: FillType): SkPath;
     /**
      * Specifies whether Path is volatile; whether it will be altered or discarded
      * by the caller after it is drawn. Path by default have volatile set false.
@@ -176,7 +176,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      * Mark unchanging Path non-volatile to improve repeated rendering.
      * @param volatile
      */
-    setIsVolatile(volatile: boolean): void;
+    setIsVolatile(volatile: boolean): SkPath;
     /**
      * Turns this path into the filled equivalent of the stroked path. Returns false if the operation
      * fails (e.g. the path is a hairline).
@@ -188,13 +188,13 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      * Appends CLOSE_VERB to Path. A closed contour connects the first and last point
      * with a line, forming a continuous loop.
      */
-    close(): void;
+    close(): SkPath;
     /**
      * Sets Path to its initial state.
      * Removes verb array, point array, and weights, and sets FillType to Winding.
      * Internal storage associated with Path is released
      */
-    reset(): void;
+    reset(): SkPath;
     /**
      * Sets Path to its initial state.
      * Removes verb array, point array, and weights, and sets FillType to Winding.
@@ -202,7 +202,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      * Use rewind() instead of reset() if Path storage will be reused and performance
      * is critical.
      */
-    rewind(): void;
+    rewind(): SkPath;
     /**
      * Returns minimum and maximum axes values of the lines and curves in Path.
      * Returns (0, 0, 0, 0) if Path contains no points.
@@ -330,7 +330,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      reference to SkPath
      example: https://fiddle.skia.org/c/@Path_quadTo
     */
-    quadTo(x1: number, y1: number, x2: number, y2: number): void;
+    quadTo(x1: number, y1: number, x2: number, y2: number): SkPath;
     /**
      * Adds Rect to Path, appending kMove_Verb, three kLine_Verb, and kClose_Verb,
      * starting with top-left corner of Rect; followed by top-right, bottom-right,
@@ -340,7 +340,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      * @param rect
      * @param isCCW
      */
-    addRect(rect: SkRect, isCCW?: boolean): void;
+    addRect(rect: SkRect, isCCW?: boolean): SkPath;
     /**
      * Adds rrect to Path, creating a new closed contour.
      * Returns the modified path for easier chaining.
@@ -440,7 +440,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     /**
      * Transforms the path by the specified matrix.
      */
-    transform(m3: SkMatrix): void;
+    transform(m3: SkMatrix): SkPath;
     /**
      * Interpolates between Path with point array of equal size.
      * Copy verb array and weights to result, and set result path to a weighted
@@ -457,10 +457,11 @@ export interface SkPath extends SkJSIInstance<"Path"> {
      * @param ending  path to interpolate with
      * @param weight  contribution of this path, and
      *                 one minus contribution of ending path
+     * @param output  path to be replaced with the interpolated averages
      * @return        Path replaced by interpolated averages or null if
      *                not interpolatable
      * */
-    interpolate(end: SkPath, weight: number): SkPath | null;
+    interpolate(end: SkPath, weight: number, output?: SkPath): SkPath | null;
     /** Returns true if Path contain equal verbs and equal weights.
      *     @param compare  path to compare
      *     @return         true if Path can be interpolated equivalent

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

@@ -3,12 +3,18 @@ import 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;
     translate(x: number, y: number): this;
+    postTranslate(x: number, y: number): this;
     scale(x: number, y?: number): this;
+    postScale(x: number, y?: number): this;
     skew(x: number, y: number): this;
+    postSkew(x: number, y: number): this;
     rotate(value: number): this;
+    postRotate(value: number): this;
     identity(): this;
     get(): number[];
 }

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

@@ -21,12 +21,12 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     rMoveTo(x: number, y: number): this;
     rLineTo(x: number, y: number): this;
     rQuadTo(x1: number, y1: number, x2: number, y2: number): this;
-    setFillType(fill: FillType): void;
-    setIsVolatile(volatile: boolean): void;
+    setFillType(fill: FillType): this;
+    setIsVolatile(volatile: boolean): this;
     stroke(opts?: StrokeOpts): this | null;
-    close(): void;
-    reset(): void;
-    rewind(): void;
+    close(): this;
+    reset(): this;
+    rewind(): this;
     computeTightBounds(): SkRect;
     arcToOval(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number, forceMoveTo: boolean): this;
     arcToRotated(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, x: number, y: number): this;
@@ -39,8 +39,8 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     equals(other: SkPath): boolean;
     getBounds(): JsiSkRect;
     getFillType(): number;
-    quadTo(x1: number, y1: number, x2: number, y2: number): void;
-    addRect(rect: SkRect, isCCW?: boolean): void;
+    quadTo(x1: number, y1: number, x2: number, y2: number): this;
+    addRect(rect: SkRect, isCCW?: boolean): this;
     addRRect(rrect: SkRRect, isCCW?: boolean): this;
     getPoint(index: number): JsiSkPoint;
     isEmpty(): boolean;
@@ -51,8 +51,8 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     simplify(): boolean;
     toSVGString(): string;
     trim(start: number, stop: number, isComplement: boolean): this | null;
-    transform(m3: SkMatrix): void;
-    interpolate(end: SkPath, t: number): JsiSkPath | null;
+    transform(m3: SkMatrix): this;
+    interpolate(end: SkPath, t: number, output?: SkPath): SkPath | JsiSkPath | null;
     isInterpolatable(path2: SkPath): boolean;
     toCmds(): PathCommand[];
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.214",
+  "version": "0.1.215",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "29.5.6",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
     "@types/react-native": "0.70.6",
@@ -92,13 +92,14 @@
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
-    "jest": "28.1.3",
+    "jest": "29.6.4",
     "merge-dirs": "^0.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",
     "react": "18.1.0",
     "react-native": "0.71.7",
     "react-native-builder-bob": "^0.18.2",
+    "react-native-reanimated": "^3.5.4",
     "ts-jest": "^28.0.7",
     "typescript": "4.8.3",
     "ws": "^8.11.0"

package/src/animation/functions/interpolatePaths.ts

@@ -9,11 +9,12 @@ const lerp = (
   from: number,
   to: number,
   p1: SkPath,
-  p2: SkPath
+  p2: SkPath,
+  output?: SkPath
 ) => {
   "worklet";
   const t = (value - from) / (to - from);
-  return p2.interpolate(p1, t)!;
+  return p2.interpolate(p1, t, output)!;
 };
 
 /**
@@ -36,7 +37,8 @@ export const interpolatePaths = (
   value: number,
   input: number[],
   outputRange: SkPath[],
-  options?: ExtrapolationType
+  options?: ExtrapolationType,
+  output?: SkPath
 ) => {
   "worklet";
   const extrapolation = validateInterpolationOptions(options);
@@ -84,6 +86,7 @@ export const interpolatePaths = (
     input[i],
     input[i + 1],
     outputRange[i],
-    outputRange[i + 1]
+    outputRange[i + 1],
+    output
   );
 };

package/src/external/reanimated/index.ts

@@ -1,3 +1,4 @@
-export * from "./useSharedValueEffect";
+export * from "./useAnimatedImageValue";
 export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
+export * from "./interpolators";

package/src/external/reanimated/interpolators.ts

@@ -0,0 +1,89 @@
+import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
+import { useMemo } from "react";
+
+import type { SkPath, SkPoint } from "../../skia/types";
+import { interpolatePaths, interpolateVector } from "../../animation";
+import { Skia } from "../../skia";
+
+import {
+  useAnimatedReaction,
+  useFrameCallback,
+  useSharedValue,
+} from "./moduleWrapper";
+
+export const notifyChange = (value: SharedValue<unknown>) => {
+  "worklet";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (value as any)._value = value.value;
+};
+
+export const useClock = () => {
+  const clock = useSharedValue(0);
+  useFrameCallback((info) => {
+    clock.value = info.timeSinceFirstFrame;
+  });
+  return clock;
+};
+
+/**
+ * @worklet
+ */
+type Interpolator<T> = (
+  value: number,
+  input: number[],
+  output: T[],
+  options: ExtrapolationType,
+  result: T
+) => T;
+
+const useInterpolator = <T>(
+  factory: () => T,
+  value: SharedValue<number>,
+  interpolator: Interpolator<T>,
+  input: number[],
+  output: T[],
+  options?: ExtrapolationType
+) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = useSharedValue(init);
+  useAnimatedReaction(
+    () => value.value,
+    (val) => {
+      result.value = interpolator(val, input, output, options, result.value);
+      notifyChange(result);
+    },
+    [input, output, options]
+  );
+  return result;
+};
+
+export const usePathInterpolation = (
+  value: SharedValue<number>,
+  input: number[],
+  outputRange: SkPath[],
+  options?: ExtrapolationType
+) =>
+  useInterpolator(
+    () => Skia.Path.Make(),
+    value,
+    interpolatePaths,
+    input,
+    outputRange,
+    options
+  );
+
+export const useVectorInterpolation = (
+  value: SharedValue<number>,
+  input: number[],
+  outputRange: SkPoint[],
+  options?: ExtrapolationType
+) =>
+  useInterpolator(
+    () => Skia.Point(0, 0),
+    value,
+    interpolateVector,
+    input,
+    outputRange,
+    options
+  );

package/src/external/reanimated/moduleWrapper.ts

@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useMemo } from "react";
-
-import type { SharedValueType } from "../../renderer/processors/Animations";
+import type { DependencyList } from "react";
+import type {
+  FrameCallback,
+  FrameInfo,
+  SharedValue,
+} from "react-native-reanimated";
 
 // This one is needed for the deprecated useSharedValue function
 // We can remove it once we remove the deprecation
@@ -13,9 +16,7 @@ let reanimatedVersion: string;
 
 try {
   Reanimated2 = require("react-native-reanimated");
-  reanimatedVersion =
-    // eslint-disable-next-line import/extensions
-    require("react-native-reanimated/package.json").version;
+  reanimatedVersion = require("react-native-reanimated/package.json").version;
   if (
     reanimatedVersion &&
     (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))
@@ -36,18 +37,34 @@ export function throwOnMissingReanimated() {
   }
 }
 
-export const useSharedValue =
-  Reanimated2?.useSharedValue ||
-  ((value: number) => useMemo(() => ({ value }), [value]));
-export const useFrameCallback: (...args: any[]) => any =
-  Reanimated2?.useFrameCallback || throwOnMissingReanimated;
+export const useSharedValue: <T>(
+  init: T,
+  oneWayReadsOnly?: boolean
+) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;
+
+export const useFrameCallback: (
+  callback: (frameInfo: FrameInfo) => void,
+  autostart?: boolean
+) => FrameCallback = Reanimated2?.useFrameCallback || throwOnMissingReanimated;
+
+export const startMapper: (
+  worklet: () => void,
+  inputs?: unknown[],
+  outputs?: unknown[]
+) => number = Reanimated2?.startMapper || throwOnMissingReanimated;
+
+export const stopMapper: (mapperID: number) => void =
+  Reanimated2?.stopMapper || throwOnMissingReanimated;
 
-export const startMapper = Reanimated2?.startMapper || throwOnMissingReanimated;
-export const stopMapper = Reanimated2?.stopMapper || throwOnMissingReanimated;
 export const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;
-export const isSharedValue = <T>(
-  value: unknown
-): value is SharedValueType<T> => {
+
+export const useAnimatedReaction: <T>(
+  prepare: () => T,
+  react: (v: T) => void,
+  dependencies?: DependencyList
+) => void = Reanimated2?.useAnimatedReaction || throwOnMissingReanimated;
+
+export const isSharedValue = <T>(value: unknown): value is SharedValue<T> => {
   return (
     !!value &&
     (Reanimated3

package/src/external/reanimated/renderHelpers.ts

@@ -44,7 +44,7 @@ function bindReanimatedProps2(
   const sharedValues = Object.values(reanimatedProps);
   const previousMapperId = _bindings.get(node);
   if (previousMapperId !== undefined) {
-    stopMapper(previousMapperId);
+    stopMapper(previousMapperId as number);
   }
   if (sharedValues.length > 0) {
     const viewId = container.getNativeId();
@@ -85,7 +85,7 @@ export function bindReanimatedProps(
   const sharedValues = Object.values(reanimatedProps);
   const previousMapperId = _bindings.get(node);
   if (previousMapperId !== undefined) {
-    stopMapper(previousMapperId);
+    stopMapper(previousMapperId as number);
   }
   if (sharedValues.length > 0) {
     const viewId = container.getNativeId();

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -0,0 +1,51 @@
+import type { FrameInfo } from "react-native-reanimated";
+
+import { useAnimatedImage } from "../../skia/core/AnimatedImage";
+import type { DataSourceParam, SkImage } from "../../skia/types";
+
+import {
+  throwOnMissingReanimated,
+  useFrameCallback,
+  useSharedValue,
+} from "./moduleWrapper";
+
+const DEFAULT_FRAME_DURATION = 60;
+
+export const useAnimatedImageValue = (source: DataSourceParam) => {
+  throwOnMissingReanimated();
+  const currentFrame = useSharedValue<null | SkImage>(null);
+  const lastTimestamp = useSharedValue(0);
+  const animatedImage = useAnimatedImage(source, (err) => {
+    console.error(err);
+    throw new Error(`Could not load animated image - got '${err.message}'`);
+  });
+  const frameDuration =
+    animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
+
+  useFrameCallback((frameInfo: FrameInfo) => {
+    if (!animatedImage) {
+      currentFrame.value = null;
+      return;
+    }
+
+    const { timestamp } = frameInfo;
+    const elapsed = timestamp - lastTimestamp.value;
+
+    // Check if it's time to switch frames based on GIF frame duration
+    if (elapsed < frameDuration) {
+      return;
+    }
+
+    // Update the current frame
+    animatedImage.decodeNextFrame();
+    if (currentFrame.value) {
+      currentFrame.value.dispose();
+    }
+    currentFrame.value = animatedImage.getCurrentFrame();
+
+    // Update the last timestamp
+    lastTimestamp.value = timestamp;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, true);
+  return currentFrame;
+};

package/src/external/reanimated/useDerivedValueOnJS.ts

@@ -1,4 +1,4 @@
-import { useEffect, type DependencyList } from "react";
+import { useEffect, useMemo } from "react";
 
 import {
   useSharedValue,
@@ -10,9 +10,10 @@ import {
 export const useDerivedValueOnJS = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   fn: () => any,
-  deps?: DependencyList
+  deps: unknown[]
 ) => {
-  const value = useSharedValue(fn());
+  const init = useMemo(() => fn(), [fn]);
+  const value = useSharedValue(init);
   useEffect(() => {
     const mapperId = startMapper(() => {
       "worklet";

package/src/mock/index.ts

@@ -6,6 +6,7 @@ import { ValueApi } from "../values/web";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Noop: () => any = () => undefined;
 const NoopValue = () => ({ current: 0 });
+const NoopSharedValue = () => ({ value: 0 });
 
 export const Mock = (CanvasKit: CanvasKit) => {
   global.SkiaApi = JsiSkApi(CanvasKit);
@@ -21,6 +22,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/nodes"),
     // We could use the real Canvas if we mock the SkiaView component for node
     Canvas: Noop,
+    // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,
     useTouchHandler: Noop,
@@ -29,6 +31,9 @@ export const Mock = (CanvasKit: CanvasKit) => {
     useSpring: NoopValue,
     useClockValue: NoopValue,
     useValueEffect: Noop,
+    // Reanimated hooks
+    useClock: NoopSharedValue,
+    usePathInterpolation: NoopSharedValue,
     useRawData: Noop,
     useData: Noop,
     useFont: () => Skia.Font(undefined, 0),

package/src/renderer/HostConfig.ts

@@ -7,7 +7,7 @@ import type { SkiaValue } from "../values";
 import {
   bindReanimatedProps,
   extractReanimatedProps,
-} from "../external/reanimated";
+} from "../external/reanimated/renderHelpers";
 
 import type { Container } from "./Container";
 import { createNode } from "./HostComponents";

package/src/skia/core/AnimatedImage.ts

@@ -1,8 +1,3 @@
-import {
-  throwOnMissingReanimated,
-  useFrameCallback,
-  useSharedValue,
-} from "../../external/reanimated/moduleWrapper";
 import { Skia } from "../Skia";
 import type { DataSourceParam } from "../types";
 
@@ -19,45 +14,3 @@ export const useAnimatedImage = (
   source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, animatedImgFactory, onError);
-
-const DEFAULT_FRAME_DURATION = 60;
-
-export const useAnimatedImageValue = (source: DataSourceParam) => {
-  throwOnMissingReanimated();
-  const currentFrame = useSharedValue(null);
-  const lastTimestamp = useSharedValue(0);
-  const animatedImage = useAnimatedImage(source, (err) => {
-    console.error(err);
-    throw new Error(`Could not load animated image - got '${err.message}'`);
-  });
-  const frameDuration =
-    animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useFrameCallback((frameInfo: any) => {
-    if (!animatedImage) {
-      currentFrame.value = null;
-      return;
-    }
-
-    const { timestamp } = frameInfo;
-    const elapsed = timestamp - lastTimestamp.value;
-
-    // Check if it's time to switch frames based on GIF frame duration
-    if (elapsed < frameDuration) {
-      return;
-    }
-
-    // Update the current frame
-    animatedImage.decodeNextFrame();
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
-    currentFrame.value = animatedImage.getCurrentFrame();
-
-    // Update the last timestamp
-    lastTimestamp.value = timestamp;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, true);
-  return currentFrame;
-};

package/src/skia/types/Matrix.ts

@@ -21,6 +21,10 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
   rotate: (theta: number) => SkMatrix;
+  postTranslate: (x: number, y: number) => SkMatrix;
+  postScale: (x: number, y?: number) => SkMatrix;
+  postSkew: (x: number, y: number) => SkMatrix;
+  postRotate: (theta: number) => SkMatrix;
   identity: () => SkMatrix;
   get: () => number[];
 }