@shopify/react-native-skia 0.1.224 → 0.1.227

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,8 @@ 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;
+export declare const translate: ({ x, y, }: Vector) => [{
+    translateX: number;
 }, {
-    readonly translateY: number;
+    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,5 +1,6 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
+import type { Transforms3d } from "./Matrix4";
 export declare enum MatrixIndex {
     ScaleX = 0,
     SkewX = 1,
@@ -13,7 +14,7 @@ export declare enum MatrixIndex {
 }
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-    concat: (matrix: SkMatrix) => SkMatrix;
+    concat: (matrix: SkMatrix | number[]) => SkMatrix;
     translate: (x: number, y: number) => SkMatrix;
     scale: (x: number, y?: number) => SkMatrix;
     skew: (x: number, y: number) => SkMatrix;
@@ -25,14 +26,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,39 @@
+type Vec2 = readonly [number, number];
+type Vec3 = readonly [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 mapPoint3d: (m: Matrix4, v: Vec3) => readonly [number, number, number];
+/**
+ * @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/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

@@ -6,7 +6,7 @@ export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> impleme
     private preMultiply;
     private postMultiply;
     dispose: () => void;
-    concat(matrix: SkMatrix): this;
+    concat(matrix: SkMatrix | number[]): 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.224",
+  "version": "0.1.227",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

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

@@ -11,7 +11,7 @@ import type {
   SkRRect,
   StrokeCap,
   StrokeJoin,
-  Transforms2d,
+  Transforms3d,
   Vector,
 } from "../../skia/types";
 
@@ -64,9 +64,9 @@ export interface ScalarCircleDef {
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 
 export interface TransformProps {
-  transform?: Transforms2d;
+  transform?: Transforms3d;
   origin?: Vector;
-  matrix?: SkMatrix;
+  matrix?: SkMatrix | 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 { useMemo, useRef } from "react";
 
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
@@ -13,15 +17,19 @@ import {
 
 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 useClock = () => {
   const clock = useSharedValue(0);
-  useFrameCallback((info) => {
+  const callback = useRef((info: FrameInfo) => {
+    "worklet";
     clock.value = info.timeSinceFirstFrame;
-  });
+  }).current;
+  useFrameCallback(callback);
   return clock;
 };
 

package/src/renderer/Canvas.tsx

@@ -4,7 +4,6 @@ import React, {
   useMemo,
   forwardRef,
   useRef,
-  useLayoutEffect,
 } from "react";
 import type {
   RefObject,
@@ -13,13 +12,13 @@ import type {
   ForwardedRef,
   FunctionComponent,
 } from "react";
+import type { LayoutChangeEvent } from "react-native";
 
-import { SkiaDomView, SkiaView } from "../views";
+import { SkiaDomView, SkiaPictureView } from "../views";
 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";
@@ -33,34 +32,42 @@ export interface CanvasProps extends SkiaBaseViewProps {
   onTouch?: TouchHandler;
 }
 
-const useOnSizeEvent = (resultValue: SkiaBaseViewProps["onSize"]) => {
-  const onSize = useValue({
-    width: 0,
-    height: 0,
-  });
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
 
-  useLayoutEffect(() => {
-    if (!resultValue) {
-      return;
-    }
-    return onSize.addListener((newValue) => {
       if (isValue(resultValue)) {
-        resultValue.current = newValue;
-      } else {
-        resultValue.value = newValue;
+        resultValue.current = { width, height };
+      } else if (resultValue) {
+        resultValue.value = { width, height };
       }
-    });
-  }, [resultValue, onSize]);
-
-  return onSize;
+    },
+    [onLayout, resultValue]
+  );
 };
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
     forwardedRef
   ) => {
-    const onSize = useOnSizeEvent(_onSize);
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {
@@ -102,26 +109,30 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
           style={style}
           root={root.dom}
           onTouch={onTouch}
-          onSize={onSize}
+          onLayout={onLayout}
           mode={mode}
           debug={debug}
           {...props}
         />
       );
     } else {
+      // This is for debugging
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording(
+        Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
+      );
+      const ctx = new JsiDrawingContext(Skia, canvas);
+      root.dom.render(ctx);
+      const picture = recorder.finishRecordingAsPicture();
       return (
-        <SkiaView
+        <SkiaPictureView
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}
           mode={mode}
           debug={debug}
-          onSize={onSize}
-          onDraw={(canvas, info) => {
-            onTouch && onTouch(info.touches);
-            const ctx = new JsiDrawingContext(Skia, canvas);
-            root.dom.render(ctx);
-          }}
+          picture={picture}
+          onLayout={onLayout}
           {...props}
         />
       );

package/src/renderer/components/Drawing.tsx

@@ -2,6 +2,11 @@ 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 const Drawing = (props: CustomDrawingNodeProps) => {
   return <skDrawing {...props} />;
 };

package/src/skia/core/Matrix.ts

@@ -1,6 +1,6 @@
 import { Skia } from "../Skia";
-import type { Transforms2d } from "../types";
+import type { Transforms3d } from "../types";
 import { processTransform } from "../types";
 
-export const processTransform2d = (transforms: Transforms2d) =>
+export const processTransform2d = (transforms: Transforms3d) =>
   processTransform(Skia.Matrix(), transforms);

package/src/skia/core/Picture.ts

@@ -1,5 +1,5 @@
 import { Skia } from "../Skia";
-import type { SkCanvas, SkRect } from "../types";
+import { isRect, type SkCanvas, type SkRect, type SkSize } from "../types";
 
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
@@ -7,9 +7,17 @@ import type { SkCanvas, SkRect } from "../types";
  * @param cb Callback for drawing to the canvas
  * @returns SkPicture
  */
-export const createPicture = (rect: SkRect, cb: (canvas: SkCanvas) => void) => {
+export const createPicture = (
+  cb: (canvas: SkCanvas) => void,
+  rect?: SkRect | SkSize
+) => {
+  "worklet";
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording(rect);
+  let bounds: undefined | SkRect;
+  if (rect) {
+    bounds = isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height);
+  }
+  const canvas = recorder.beginRecording(bounds);
   cb(canvas);
   return recorder.finishRecordingAsPicture();
 };

package/src/skia/core/Vector.ts

@@ -22,7 +22,10 @@ export const dist = (a: Vector, b: Vector) => {
   "worklet";
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
-export const translate = ({ x, y }: Vector) => {
+export const translate = ({
+  x,
+  y,
+}: Vector): [{ translateX: number }, { translateY: number }] => {
   "worklet";
-  return [{ translateX: x }, { translateY: y }] as const;
+  return [{ translateX: x }, { translateY: y }];
 };