@shopify/react-native-skia 0.1.225 → 0.1.227

package/lib/commonjs/dom/nodes/datatypes/Gradient.d.ts

@@ -1,87 +1,247 @@
-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";
-export declare const transformOrigin: (origin: Vector, transform: Transforms2d) => (Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+export declare const transformOrigin: (origin: Vector, transform: Transforms3d) => (Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "translateX"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "translateY"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "translateZ"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "translate"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "scale"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "scaleX"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "scaleY"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "skewX"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "skewY"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
-}, "rotate">)[];
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "perspective"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotateX"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotateY"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotateZ"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotate"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "matrix">)[];
 export declare const processGradientProps: (Skia: Skia, { colors, positions, mode, flags, ...transform }: GradientProps) => {
     colors: Float32Array[];
     positions: number[] | null;

package/lib/commonjs/dom/nodes/datatypes/Gradient.js.map

@@ -1 +1 @@
-{"version":3,"names":["transformOrigin","origin","transform","translateX","x","translateY","y","processGradientProps","Skia","colors","positions","mode","flags","localMatrix","Matrix","processTransformProps","map","color","Color","TileMode","enumKey","getRect","props","width","height","rect","undefined","XYWHRect"],"sources":["Gradient.ts"],"sourcesContent":["import type { Skia, SkRect, Transforms2d, Vector } from \"../../../skia/types\";\nimport { TileMode } from \"../../../skia/types\";\nimport type { GradientProps, ImageShaderProps } from \"../../types\";\n\nimport { enumKey } from \"./Enum\";\nimport { processTransformProps } from \"./Transform\";\n\nexport const transformOrigin = (origin: Vector, transform: Transforms2d) => [\n  { translateX: origin.x },\n  { translateY: origin.y },\n  ...transform,\n  { translateX: -origin.x },\n  { translateY: -origin.y },\n];\n\nexport const processGradientProps = (\n  Skia: Skia,\n  { colors, positions, mode, flags, ...transform }: GradientProps\n) => {\n  const localMatrix = Skia.Matrix();\n  processTransformProps(localMatrix, transform);\n  return {\n    colors: colors.map((color) => Skia.Color(color)),\n    positions: positions ?? null,\n    mode: TileMode[enumKey(mode ?? \"clamp\")],\n    flags,\n    localMatrix,\n  };\n};\n\nexport const getRect = (\n  Skia: Skia,\n  props: Omit<ImageShaderProps, \"tx\" | \"ty\" | \"fm\" | \"mm\" | \"fit\" | \"image\">\n): SkRect | undefined => {\n  const { x, y, width, height } = props;\n  if (props.rect) {\n    return props.rect;\n  } else if (\n    x !== undefined &&\n    y !== undefined &&\n    width !== undefined &&\n    height !== undefined\n  ) {\n    return Skia.XYWHRect(x, y, width, height);\n  } else {\n    return undefined;\n  }\n};\n"],"mappings":";;;;;;;AACA;;AAGA;;AACA;;AAEO,MAAMA,eAAe,GAAG,CAACC,MAAD,EAAiBC,SAAjB,KAA6C,CAC1E;EAAEC,UAAU,EAAEF,MAAM,CAACG;AAArB,CAD0E,EAE1E;EAAEC,UAAU,EAAEJ,MAAM,CAACK;AAArB,CAF0E,EAG1E,GAAGJ,SAHuE,EAI1E;EAAEC,UAAU,EAAE,CAACF,MAAM,CAACG;AAAtB,CAJ0E,EAK1E;EAAEC,UAAU,EAAE,CAACJ,MAAM,CAACK;AAAtB,CAL0E,CAArE;;;;AAQA,MAAMC,oBAAoB,GAAG,CAClCC,IADkC,WAG/B;EAAA,IADH;IAAEC,MAAF;IAAUC,SAAV;IAAqBC,IAArB;IAA2BC,KAA3B;IAAkC,GAAGV;EAArC,CACG;EACH,MAAMW,WAAW,GAAGL,IAAI,CAACM,MAAL,EAApB;EACA,IAAAC,gCAAA,EAAsBF,WAAtB,EAAmCX,SAAnC;EACA,OAAO;IACLO,MAAM,EAAEA,MAAM,CAACO,GAAP,CAAYC,KAAD,IAAWT,IAAI,CAACU,KAAL,CAAWD,KAAX,CAAtB,CADH;IAELP,SAAS,EAAEA,SAAS,IAAI,IAFnB;IAGLC,IAAI,EAAEQ,eAAA,CAAS,IAAAC,aAAA,EAAQT,IAAI,IAAI,OAAhB,CAAT,CAHD;IAILC,KAJK;IAKLC;EALK,CAAP;AAOD,CAbM;;;;AAeA,MAAMQ,OAAO,GAAG,CACrBb,IADqB,EAErBc,KAFqB,KAGE;EACvB,MAAM;IAAElB,CAAF;IAAKE,CAAL;IAAQiB,KAAR;IAAeC;EAAf,IAA0BF,KAAhC;;EACA,IAAIA,KAAK,CAACG,IAAV,EAAgB;IACd,OAAOH,KAAK,CAACG,IAAb;EACD,CAFD,MAEO,IACLrB,CAAC,KAAKsB,SAAN,IACApB,CAAC,KAAKoB,SADN,IAEAH,KAAK,KAAKG,SAFV,IAGAF,MAAM,KAAKE,SAJN,EAKL;IACA,OAAOlB,IAAI,CAACmB,QAAL,CAAcvB,CAAd,EAAiBE,CAAjB,EAAoBiB,KAApB,EAA2BC,MAA3B,CAAP;EACD,CAPM,MAOA;IACL,OAAOE,SAAP;EACD;AACF,CAjBM"}
+{"version":3,"names":["transformOrigin","origin","transform","translateX","x","translateY","y","processGradientProps","Skia","colors","positions","mode","flags","localMatrix","Matrix","processTransformProps","map","color","Color","TileMode","enumKey","getRect","props","width","height","rect","undefined","XYWHRect"],"sources":["Gradient.ts"],"sourcesContent":["import type { Skia, SkRect, Transforms3d, Vector } from \"../../../skia/types\";\nimport { TileMode } from \"../../../skia/types\";\nimport type { GradientProps, ImageShaderProps } from \"../../types\";\n\nimport { enumKey } from \"./Enum\";\nimport { processTransformProps } from \"./Transform\";\n\nexport const transformOrigin = (origin: Vector, transform: Transforms3d) => [\n  { translateX: origin.x },\n  { translateY: origin.y },\n  ...transform,\n  { translateX: -origin.x },\n  { translateY: -origin.y },\n];\n\nexport const processGradientProps = (\n  Skia: Skia,\n  { colors, positions, mode, flags, ...transform }: GradientProps\n) => {\n  const localMatrix = Skia.Matrix();\n  processTransformProps(localMatrix, transform);\n  return {\n    colors: colors.map((color) => Skia.Color(color)),\n    positions: positions ?? null,\n    mode: TileMode[enumKey(mode ?? \"clamp\")],\n    flags,\n    localMatrix,\n  };\n};\n\nexport const getRect = (\n  Skia: Skia,\n  props: Omit<ImageShaderProps, \"tx\" | \"ty\" | \"fm\" | \"mm\" | \"fit\" | \"image\">\n): SkRect | undefined => {\n  const { x, y, width, height } = props;\n  if (props.rect) {\n    return props.rect;\n  } else if (\n    x !== undefined &&\n    y !== undefined &&\n    width !== undefined &&\n    height !== undefined\n  ) {\n    return Skia.XYWHRect(x, y, width, height);\n  } else {\n    return undefined;\n  }\n};\n"],"mappings":";;;;;;;AACA;;AAGA;;AACA;;AAEO,MAAMA,eAAe,GAAG,CAACC,MAAD,EAAiBC,SAAjB,KAA6C,CAC1E;EAAEC,UAAU,EAAEF,MAAM,CAACG;AAArB,CAD0E,EAE1E;EAAEC,UAAU,EAAEJ,MAAM,CAACK;AAArB,CAF0E,EAG1E,GAAGJ,SAHuE,EAI1E;EAAEC,UAAU,EAAE,CAACF,MAAM,CAACG;AAAtB,CAJ0E,EAK1E;EAAEC,UAAU,EAAE,CAACJ,MAAM,CAACK;AAAtB,CAL0E,CAArE;;;;AAQA,MAAMC,oBAAoB,GAAG,CAClCC,IADkC,WAG/B;EAAA,IADH;IAAEC,MAAF;IAAUC,SAAV;IAAqBC,IAArB;IAA2BC,KAA3B;IAAkC,GAAGV;EAArC,CACG;EACH,MAAMW,WAAW,GAAGL,IAAI,CAACM,MAAL,EAApB;EACA,IAAAC,gCAAA,EAAsBF,WAAtB,EAAmCX,SAAnC;EACA,OAAO;IACLO,MAAM,EAAEA,MAAM,CAACO,GAAP,CAAYC,KAAD,IAAWT,IAAI,CAACU,KAAL,CAAWD,KAAX,CAAtB,CADH;IAELP,SAAS,EAAEA,SAAS,IAAI,IAFnB;IAGLC,IAAI,EAAEQ,eAAA,CAAS,IAAAC,aAAA,EAAQT,IAAI,IAAI,OAAhB,CAAT,CAHD;IAILC,KAJK;IAKLC;EALK,CAAP;AAOD,CAbM;;;;AAeA,MAAMQ,OAAO,GAAG,CACrBb,IADqB,EAErBc,KAFqB,KAGE;EACvB,MAAM;IAAElB,CAAF;IAAKE,CAAL;IAAQiB,KAAR;IAAeC;EAAf,IAA0BF,KAAhC;;EACA,IAAIA,KAAK,CAACG,IAAV,EAAgB;IACd,OAAOH,KAAK,CAACG,IAAb;EACD,CAFD,MAEO,IACLrB,CAAC,KAAKsB,SAAN,IACApB,CAAC,KAAKoB,SADN,IAEAH,KAAK,KAAKG,SAFV,IAGAF,MAAM,KAAKE,SAJN,EAKL;IACA,OAAOlB,IAAI,CAACmB,QAAL,CAAcvB,CAAd,EAAiBE,CAAjB,EAAoBiB,KAApB,EAA2BC,MAA3B,CAAP;EACD,CAPM,MAOA;IACL,OAAOE,SAAP;EACD;AACF,CAjBM"}

package/lib/commonjs/dom/types/Common.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms2d, Vector } from "../../skia/types";
+import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms3d, Vector } from "../../skia/types";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export type PathDef = string | SkPath;
 export type ClipDef = SkRRect | SkRect | PathDef;
@@ -34,9 +34,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 {
     color?: Color;

package/lib/commonjs/dom/types/Common.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Common.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport type {\n  BlendMode,\n  Color,\n  PaintStyle,\n  SkMatrix,\n  SkPaint,\n  SkPath,\n  SkRect,\n  SkRRect,\n  StrokeCap,\n  StrokeJoin,\n  Transforms2d,\n  Vector,\n} from \"../../skia/types\";\n\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport type PathDef = string | SkPath;\n\nexport type ClipDef = SkRRect | SkRect | PathDef;\n\nexport type Fit =\n  | \"cover\"\n  | \"contain\"\n  | \"fill\"\n  | \"fitHeight\"\n  | \"fitWidth\"\n  | \"none\"\n  | \"scaleDown\";\n\nexport type Radius = number | Vector;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\nexport interface RectCtor {\n  x?: number;\n  y?: number;\n  width: number;\n  height: number;\n}\n\nexport interface RRectCtor extends RectCtor {\n  r?: Radius;\n}\n\nexport type RectDef = RectCtor | { rect: SkRect };\nexport type RRectDef = RRectCtor | { rect: SkRRect };\n\nexport interface PointCircleDef {\n  c?: Vector;\n  r: number;\n}\n\nexport interface ScalarCircleDef {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport type CircleDef = PointCircleDef | ScalarCircleDef;\n\nexport interface TransformProps {\n  transform?: Transforms2d;\n  origin?: Vector;\n  matrix?: SkMatrix;\n}\n\nexport interface PaintProps extends ChildrenProps {\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n  dither?: boolean;\n}\n\nexport interface GroupProps extends PaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: SkPaint | boolean;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["Common.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport type {\n  BlendMode,\n  Color,\n  PaintStyle,\n  SkMatrix,\n  SkPaint,\n  SkPath,\n  SkRect,\n  SkRRect,\n  StrokeCap,\n  StrokeJoin,\n  Transforms3d,\n  Vector,\n} from \"../../skia/types\";\n\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport type PathDef = string | SkPath;\n\nexport type ClipDef = SkRRect | SkRect | PathDef;\n\nexport type Fit =\n  | \"cover\"\n  | \"contain\"\n  | \"fill\"\n  | \"fitHeight\"\n  | \"fitWidth\"\n  | \"none\"\n  | \"scaleDown\";\n\nexport type Radius = number | Vector;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\nexport interface RectCtor {\n  x?: number;\n  y?: number;\n  width: number;\n  height: number;\n}\n\nexport interface RRectCtor extends RectCtor {\n  r?: Radius;\n}\n\nexport type RectDef = RectCtor | { rect: SkRect };\nexport type RRectDef = RRectCtor | { rect: SkRRect };\n\nexport interface PointCircleDef {\n  c?: Vector;\n  r: number;\n}\n\nexport interface ScalarCircleDef {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport type CircleDef = PointCircleDef | ScalarCircleDef;\n\nexport interface TransformProps {\n  transform?: Transforms3d;\n  origin?: Vector;\n  matrix?: SkMatrix | number[];\n}\n\nexport interface PaintProps extends ChildrenProps {\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n  dither?: boolean;\n}\n\nexport interface GroupProps extends PaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: SkPaint | boolean;\n}\n"],"mappings":""}

package/lib/commonjs/external/reanimated/interpolators.js

@@ -14,18 +14,24 @@ var _skia = require("../../skia");
 var _moduleWrapper = require("./moduleWrapper");
 
 const notifyChange = value => {
-  "worklet"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  "worklet";
 
-  value._value = value.value;
+  if (_WORKLET) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value._value = value.value;
+  }
 };
 
 exports.notifyChange = notifyChange;
 
 const useClock = () => {
   const clock = (0, _moduleWrapper.useSharedValue)(0);
-  (0, _moduleWrapper.useFrameCallback)(info => {
+  const callback = (0, _react.useRef)(info => {
+    "worklet";
+
     clock.value = info.timeSinceFirstFrame;
-  });
+  }).current;
+  (0, _moduleWrapper.useFrameCallback)(callback);
   return clock;
 };
 /**

package/lib/commonjs/external/reanimated/interpolators.js.map

@@ -1 +1 @@
-{"version":3,"names":["notifyChange","value","_value","useClock","clock","useSharedValue","useFrameCallback","info","timeSinceFirstFrame","useInterpolator","factory","interpolator","input","output","options","init","useMemo","result","useAnimatedReaction","val","usePathInterpolation","outputRange","Skia","Path","Make","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type { ExtrapolationType, SharedValue } from \"react-native-reanimated\";\nimport { useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\n\nimport {\n  useAnimatedReaction,\n  useFrameCallback,\n  useSharedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n  \"worklet\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (value as any)._value = value.value;\n};\n\nexport const useClock = () => {\n  const clock = useSharedValue(0);\n  useFrameCallback((info) => {\n    clock.value = info.timeSinceFirstFrame;\n  });\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = useSharedValue(init);\n  useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":";;;;;;;AACA;;AAGA;;AACA;;AAEA;;AAMO,MAAMA,YAAY,GAAIC,KAAD,IAAiC;EAC3D,UAD2D,CAE3D;;EACCA,KAAD,CAAeC,MAAf,GAAwBD,KAAK,CAACA,KAA9B;AACD,CAJM;;;;AAMA,MAAME,QAAQ,GAAG,MAAM;EAC5B,MAAMC,KAAK,GAAG,IAAAC,6BAAA,EAAe,CAAf,CAAd;EACA,IAAAC,+BAAA,EAAkBC,IAAD,IAAU;IACzBH,KAAK,CAACH,KAAN,GAAcM,IAAI,CAACC,mBAAnB;EACD,CAFD;EAGA,OAAOJ,KAAP;AACD,CANM;AAQP;AACA;AACA;;;;;AASA,MAAMK,eAAe,GAAG,CACtBC,OADsB,EAEtBT,KAFsB,EAGtBU,YAHsB,EAItBC,KAJsB,EAKtBC,MALsB,EAMtBC,OANsB,KAOnB;EACH;EACA,MAAMC,IAAI,GAAG,IAAAC,cAAA,EAAQ,MAAMN,OAAO,EAArB,EAAyB,EAAzB,CAAb;EACA,MAAMO,MAAM,GAAG,IAAAZ,6BAAA,EAAeU,IAAf,CAAf;EACA,IAAAG,kCAAA,EACE,MAAMjB,KAAK,CAACA,KADd,EAEGkB,GAAD,IAAS;IACPF,MAAM,CAAChB,KAAP,GAAeU,YAAY,CAACQ,GAAD,EAAMP,KAAN,EAAaC,MAAb,EAAqBC,OAArB,EAA8BG,MAAM,CAAChB,KAArC,CAA3B;IACAD,YAAY,CAACiB,MAAD,CAAZ;EACD,CALH,EAME,CAACL,KAAD,EAAQC,MAAR,EAAgBC,OAAhB,CANF;EAQA,OAAOG,MAAP;AACD,CApBD;;AAsBO,MAAMG,oBAAoB,GAAG,CAClCnB,KADkC,EAElCW,KAFkC,EAGlCS,WAHkC,EAIlCP,OAJkC,KAMlCL,eAAe,CACb,MAAMa,UAAA,CAAKC,IAAL,CAAUC,IAAV,EADO,EAEbvB,KAFa,EAGbwB,2BAHa,EAIbb,KAJa,EAKbS,WALa,EAMbP,OANa,CANV;;;;AAeA,MAAMY,sBAAsB,GAAG,CACpCzB,KADoC,EAEpCW,KAFoC,EAGpCS,WAHoC,EAIpCP,OAJoC,KAMpCL,eAAe,CACb,MAAMa,UAAA,CAAKK,KAAL,CAAW,CAAX,EAAc,CAAd,CADO,EAEb1B,KAFa,EAGb2B,4BAHa,EAIbhB,KAJa,EAKbS,WALa,EAMbP,OANa,CANV"}
+{"version":3,"names":["notifyChange","value","_WORKLET","_value","useClock","clock","useSharedValue","callback","useRef","info","timeSinceFirstFrame","current","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","init","useMemo","result","useAnimatedReaction","val","usePathInterpolation","outputRange","Skia","Path","Make","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n  ExtrapolationType,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\nimport { useMemo, useRef } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\n\nimport {\n  useAnimatedReaction,\n  useFrameCallback,\n  useSharedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n  \"worklet\";\n  if (_WORKLET) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (value as any)._value = value.value;\n  }\n};\n\nexport const useClock = () => {\n  const clock = useSharedValue(0);\n  const callback = useRef((info: FrameInfo) => {\n    \"worklet\";\n    clock.value = info.timeSinceFirstFrame;\n  }).current;\n  useFrameCallback(callback);\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = useSharedValue(init);\n  useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":";;;;;;;AAKA;;AAGA;;AACA;;AAEA;;AAMO,MAAMA,YAAY,GAAIC,KAAD,IAAiC;EAC3D;;EACA,IAAIC,QAAJ,EAAc;IACZ;IACCD,KAAD,CAAeE,MAAf,GAAwBF,KAAK,CAACA,KAA9B;EACD;AACF,CANM;;;;AAQA,MAAMG,QAAQ,GAAG,MAAM;EAC5B,MAAMC,KAAK,GAAG,IAAAC,6BAAA,EAAe,CAAf,CAAd;EACA,MAAMC,QAAQ,GAAG,IAAAC,aAAA,EAAQC,IAAD,IAAqB;IAC3C;;IACAJ,KAAK,CAACJ,KAAN,GAAcQ,IAAI,CAACC,mBAAnB;EACD,CAHgB,EAGdC,OAHH;EAIA,IAAAC,+BAAA,EAAiBL,QAAjB;EACA,OAAOF,KAAP;AACD,CARM;AAUP;AACA;AACA;;;;;AASA,MAAMQ,eAAe,GAAG,CACtBC,OADsB,EAEtBb,KAFsB,EAGtBc,YAHsB,EAItBC,KAJsB,EAKtBC,MALsB,EAMtBC,OANsB,KAOnB;EACH;EACA,MAAMC,IAAI,GAAG,IAAAC,cAAA,EAAQ,MAAMN,OAAO,EAArB,EAAyB,EAAzB,CAAb;EACA,MAAMO,MAAM,GAAG,IAAAf,6BAAA,EAAea,IAAf,CAAf;EACA,IAAAG,kCAAA,EACE,MAAMrB,KAAK,CAACA,KADd,EAEGsB,GAAD,IAAS;IACPF,MAAM,CAACpB,KAAP,GAAec,YAAY,CAACQ,GAAD,EAAMP,KAAN,EAAaC,MAAb,EAAqBC,OAArB,EAA8BG,MAAM,CAACpB,KAArC,CAA3B;IACAD,YAAY,CAACqB,MAAD,CAAZ;EACD,CALH,EAME,CAACL,KAAD,EAAQC,MAAR,EAAgBC,OAAhB,CANF;EAQA,OAAOG,MAAP;AACD,CApBD;;AAsBO,MAAMG,oBAAoB,GAAG,CAClCvB,KADkC,EAElCe,KAFkC,EAGlCS,WAHkC,EAIlCP,OAJkC,KAMlCL,eAAe,CACb,MAAMa,UAAA,CAAKC,IAAL,CAAUC,IAAV,EADO,EAEb3B,KAFa,EAGb4B,2BAHa,EAIbb,KAJa,EAKbS,WALa,EAMbP,OANa,CANV;;;;AAeA,MAAMY,sBAAsB,GAAG,CACpC7B,KADoC,EAEpCe,KAFoC,EAGpCS,WAHoC,EAIpCP,OAJoC,KAMpCL,eAAe,CACb,MAAMa,UAAA,CAAKK,KAAL,CAAW,CAAX,EAAc,CAAd,CADO,EAEb9B,KAFa,EAGb+B,4BAHa,EAIbhB,KAJa,EAKbS,WALa,EAMbP,OANa,CANV"}

package/lib/commonjs/renderer/Canvas.js

@@ -13,8 +13,6 @@ var _Skia = require("../skia/Skia");
 
 var _types = require("../dom/types");
 
-var _values = require("../values");
-
 var _Reconciler = require("./Reconciler");
 
 var _HostComponents = require("./HostComponents");
@@ -31,25 +29,29 @@ const useCanvasRef = () => (0, _react.useRef)(null);
 
 exports.useCanvasRef = useCanvasRef;
 
-const useOnSizeEvent = resultValue => {
-  const onSize = (0, _values.useValue)({
-    width: 0,
-    height: 0
-  });
-  (0, _react.useLayoutEffect)(() => {
-    if (!resultValue) {
-      return;
+const useOnSizeEvent = (resultValue, onLayout) => {
+  return (0, _react.useCallback)(event => {
+    if (onLayout) {
+      onLayout(event);
     }
 
-    return onSize.addListener(newValue => {
-      if ((0, _processors.isValue)(resultValue)) {
-        resultValue.current = newValue;
-      } else {
-        resultValue.value = newValue;
-      }
-    });
-  }, [resultValue, onSize]);
-  return onSize;
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+
+    if ((0, _processors.isValue)(resultValue)) {
+      resultValue.current = {
+        width,
+        height
+      };
+    } else if (resultValue) {
+      resultValue.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, resultValue]);
 };
 
 const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
@@ -60,9 +62,10 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
     mode,
     onTouch,
     onSize: _onSize,
+    onLayout: _onLayout,
     ...props
   } = _ref;
-  const onSize = useOnSizeEvent(_onSize);
+  const onLayout = useOnSizeEvent(_onSize, _onLayout);
   const innerRef = useCanvasRef();
   const ref = useCombinedRefs(forwardedRef, innerRef);
   const redraw = (0, _react.useCallback)(() => {
@@ -100,23 +103,26 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
       style: style,
       root: root.dom,
       onTouch: onTouch,
-      onSize: onSize,
+      onLayout: onLayout,
       mode: mode,
       debug: debug
     }, props));
   } else {
-    return /*#__PURE__*/_react.default.createElement(_views.SkiaView // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // This is for debugging
+    const recorder = _Skia.Skia.PictureRecorder();
+
+    const canvas = recorder.beginRecording(_Skia.Skia.XYWHRect(0, 0, 2_000_000, 2_000_000));
+    const ctx = new _types.JsiDrawingContext(_Skia.Skia, canvas);
+    root.dom.render(ctx);
+    const picture = recorder.finishRecordingAsPicture();
+    return /*#__PURE__*/_react.default.createElement(_views.SkiaPictureView // eslint-disable-next-line @typescript-eslint/no-explicit-any
     , _extends({
       ref: ref,
       style: style,
       mode: mode,
       debug: debug,
-      onSize: onSize,
-      onDraw: (canvas, info) => {
-        onTouch && onTouch(info.touches);
-        const ctx = new _types.JsiDrawingContext(_Skia.Skia, canvas);
-        root.dom.render(ctx);
-      }
+      picture: picture,
+      onLayout: onLayout
     }, props));
   }
 });

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCanvasRef","useRef","useOnSizeEvent","resultValue","onSize","useValue","width","height","useLayoutEffect","addListener","newValue","isValue","current","value","Canvas","forwardRef","forwardedRef","children","style","debug","mode","onTouch","_onSize","props","innerRef","ref","useCombinedRefs","redraw","useCallback","getNativeId","id","nativeId","registerValues","values","root","useMemo","SkiaRoot","Skia","useEffect","render","unmount","NATIVE_DOM","dom","canvas","info","touches","ctx","JsiDrawingContext","refs","targetRef","React","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n  useLayoutEffect,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n  FunctionComponent,\n} from \"react\";\n\nimport { SkiaDomView, SkiaView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\nimport { JsiDrawingContext } from \"../dom/types\";\nimport { useValue } from \"../values\";\n\nimport { SkiaRoot } from \"./Reconciler\";\nimport { NATIVE_DOM } from \"./HostComponents\";\nimport { isValue } from \"./processors\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nconst useOnSizeEvent = (resultValue: SkiaBaseViewProps[\"onSize\"]) => {\n  const onSize = useValue({\n    width: 0,\n    height: 0,\n  });\n\n  useLayoutEffect(() => {\n    if (!resultValue) {\n      return;\n    }\n    return onSize.addListener((newValue) => {\n      if (isValue(resultValue)) {\n        resultValue.current = newValue;\n      } else {\n        resultValue.value = newValue;\n      }\n    });\n  }, [resultValue, onSize]);\n\n  return onSize;\n};\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },\n    forwardedRef\n  ) => {\n    const onSize = useOnSizeEvent(_onSize);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),\n      [redraw, registerValues, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n    if (NATIVE_DOM) {\n      return (\n        <SkiaDomView\n          ref={ref}\n          style={style}\n          root={root.dom}\n          onTouch={onTouch}\n          onSize={onSize}\n          mode={mode}\n          debug={debug}\n          {...props}\n        />\n      );\n    } else {\n      return (\n        <SkiaView\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          ref={ref as any}\n          style={style}\n          mode={mode}\n          debug={debug}\n          onSize={onSize}\n          onDraw={(canvas, info) => {\n            onTouch && onTouch(info.touches);\n            const ctx = new JsiDrawingContext(Skia, canvas);\n            root.dom.render(ctx);\n          }}\n          {...props}\n        />\n      );\n    }\n  }\n) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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"}
+{"version":3,"names":["useCanvasRef","useRef","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","isValue","current","value","Canvas","forwardRef","forwardedRef","children","style","debug","mode","onTouch","onSize","_onSize","_onLayout","props","innerRef","ref","useCombinedRefs","redraw","getNativeId","id","nativeId","registerValues","values","root","useMemo","SkiaRoot","Skia","useEffect","render","unmount","NATIVE_DOM","dom","recorder","PictureRecorder","canvas","beginRecording","XYWHRect","ctx","JsiDrawingContext","picture","finishRecordingAsPicture","refs","targetRef","React","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n  FunctionComponent,\n} from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport { SkiaDomView, SkiaPictureView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\nimport { JsiDrawingContext } from \"../dom/types\";\n\nimport { SkiaRoot } from \"./Reconciler\";\nimport { NATIVE_DOM } from \"./HostComponents\";\nimport { isValue } from \"./processors\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (isValue(resultValue)) {\n        resultValue.current = { width, height };\n      } else if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    {\n      children,\n      style,\n      debug,\n      mode,\n      onTouch,\n      onSize: _onSize,\n      onLayout: _onLayout,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const onLayout = useOnSizeEvent(_onSize, _onLayout);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),\n      [redraw, registerValues, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n    if (NATIVE_DOM) {\n      return (\n        <SkiaDomView\n          ref={ref}\n          style={style}\n          root={root.dom}\n          onTouch={onTouch}\n          onLayout={onLayout}\n          mode={mode}\n          debug={debug}\n          {...props}\n        />\n      );\n    } else {\n      // This is for debugging\n      const recorder = Skia.PictureRecorder();\n      const canvas = recorder.beginRecording(\n        Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)\n      );\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      root.dom.render(ctx);\n      const picture = recorder.finishRecordingAsPicture();\n      return (\n        <SkiaPictureView\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          ref={ref as any}\n          style={style}\n          mode={mode}\n          debug={debug}\n          picture={picture}\n          onLayout={onLayout}\n          {...props}\n        />\n      );\n    }\n  }\n) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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"}

package/lib/commonjs/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/commonjs/renderer/components/Drawing.js

@@ -9,6 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/**
+ * @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
+ */
 const Drawing = props => {
   return /*#__PURE__*/_react.default.createElement("skDrawing", props);
 };

package/lib/commonjs/renderer/components/Drawing.js.map

@@ -1 +1 @@
-{"version":3,"names":["Drawing","props"],"sources":["Drawing.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { CustomDrawingNodeProps } from \"../../dom/types\";\n\nexport const Drawing = (props: CustomDrawingNodeProps) => {\n  return <skDrawing {...props} />;\n};\n"],"mappings":";;;;;;;AAAA;;;;AAIO,MAAMA,OAAO,GAAIC,KAAD,IAAmC;EACxD,oBAAO,0CAAeA,KAAf,CAAP;AACD,CAFM"}
+{"version":3,"names":["Drawing","props"],"sources":["Drawing.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { CustomDrawingNodeProps } from \"../../dom/types\";\n\n/**\n * @deprecated If you are looking to use the Skia imperative API, you can use:\n * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/\n * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures\n */\nexport const Drawing = (props: CustomDrawingNodeProps) => {\n  return <skDrawing {...props} />;\n};\n"],"mappings":";;;;;;;AAAA;;;;AAIA;AACA;AACA;AACA;AACA;AACO,MAAMA,OAAO,GAAIC,KAAD,IAAmC;EACxD,oBAAO,0CAAeA,KAAf,CAAP;AACD,CAFM"}

package/lib/commonjs/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/commonjs/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/commonjs/skia/core/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"names":["processTransform2d","transforms","processTransform","Skia","Matrix"],"sources":["Matrix.ts"],"sourcesContent":["import { Skia } from \"../Skia\";\nimport type { Transforms2d } from \"../types\";\nimport { processTransform } from \"../types\";\n\nexport const processTransform2d = (transforms: Transforms2d) =>\n  processTransform(Skia.Matrix(), transforms);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEO,MAAMA,kBAAkB,GAAIC,UAAD,IAChC,IAAAC,uBAAA,EAAiBC,UAAA,CAAKC,MAAL,EAAjB,EAAgCH,UAAhC,CADK"}
+{"version":3,"names":["processTransform2d","transforms","processTransform","Skia","Matrix"],"sources":["Matrix.ts"],"sourcesContent":["import { Skia } from \"../Skia\";\nimport type { Transforms3d } from \"../types\";\nimport { processTransform } from \"../types\";\n\nexport const processTransform2d = (transforms: Transforms3d) =>\n  processTransform(Skia.Matrix(), transforms);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEO,MAAMA,kBAAkB,GAAIC,UAAD,IAChC,IAAAC,uBAAA,EAAiBC,UAAA,CAAKC,MAAL,EAAjB,EAAgCH,UAAhC,CADK"}