@shopify/react-native-skia 0.1.225 → 0.1.228

package/lib/module/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/module/values/hooks/useClockValue.js

@@ -1,6 +1,9 @@
 import { useEffect, useMemo } from "react";
 import { ValueApi } from "../api";
 /**
+ * @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/module/values/hooks/useClockValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","ValueApi","useClockValue","clock","createClockValue","start","stop"],"sources":["useClockValue.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\n\n/**\n * @returns A new value that will be updated on every frame redraw with the\n * number of milliseconds elapsed since the value was started.\n * The clock is created in the stopped state.\n */\n\nexport const useClockValue = () => {\n  const clock = useMemo(() => ValueApi.createClockValue(), []);\n  useEffect(() => {\n    clock.start();\n    return clock.stop;\n  }, [clock]);\n  return clock;\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,OAApB,QAAmC,OAAnC;AAEA,SAASC,QAAT,QAAyB,QAAzB;AAEA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMC,aAAa,GAAG,MAAM;EACjC,MAAMC,KAAK,GAAGH,OAAO,CAAC,MAAMC,QAAQ,CAACG,gBAAT,EAAP,EAAoC,EAApC,CAArB;EACAL,SAAS,CAAC,MAAM;IACdI,KAAK,CAACE,KAAN;IACA,OAAOF,KAAK,CAACG,IAAb;EACD,CAHQ,EAGN,CAACH,KAAD,CAHM,CAAT;EAIA,OAAOA,KAAP;AACD,CAPM"}
+{"version":3,"names":["useEffect","useMemo","ValueApi","useClockValue","clock","createClockValue","start","stop"],"sources":["useClockValue.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\n\n/**\n * @deprecated Use Reanimated 3\n * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations\n *\n * @returns A new value that will be updated on every frame redraw with the\n * number of milliseconds elapsed since the value was started.\n * The clock is created in the stopped state.\n */\n\nexport const useClockValue = () => {\n  const clock = useMemo(() => ValueApi.createClockValue(), []);\n  useEffect(() => {\n    clock.start();\n    return clock.stop;\n  }, [clock]);\n  return clock;\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,OAApB,QAAmC,OAAnC;AAEA,SAASC,QAAT,QAAyB,QAAzB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMC,aAAa,GAAG,MAAM;EACjC,MAAMC,KAAK,GAAGH,OAAO,CAAC,MAAMC,QAAQ,CAACG,gBAAT,EAAP,EAAoC,EAApC,CAArB;EACAL,SAAS,CAAC,MAAM;IACdI,KAAK,CAACE,KAAN;IACA,OAAOF,KAAK,CAACG,IAAb;EACD,CAHQ,EAGN,CAACH,KAAD,CAHM,CAAT;EAIA,OAAOA,KAAP;AACD,CAPM"}

package/lib/module/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/module/values/hooks/useComputedValue.js

@@ -2,6 +2,9 @@ import { useEffect, useMemo } from "react";
 import { ValueApi } from "../api";
 import { isValue } from "../../renderer/processors/Animations";
 /**
+ * @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/module/values/hooks/useComputedValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","ValueApi","isValue","useComputedValue","cb","values","value","createComputedValue","filter","dispose"],"sources":["useComputedValue.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors/Animations\";\n\n/**\n * Creates a new computed value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useComputedValue = <R>(cb: () => R, values: unknown[]) => {\n  const value = useMemo(\n    () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n  useEffect(() => () => value.dispose(), [value]);\n  return value;\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,OAApB,QAAmC,OAAnC;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,sCAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAAuC;EACrE,MAAMC,KAAK,GAAGN,OAAO,CACnB,MAAMC,QAAQ,CAACM,mBAAT,CAAgCH,EAAhC,EAAoCC,MAAM,CAACG,MAAP,CAAcN,OAAd,CAApC,CADa,EAEnB;EACAG,MAHmB,CAArB;EAKAN,SAAS,CAAC,MAAM,MAAMO,KAAK,CAACG,OAAN,EAAb,EAA8B,CAACH,KAAD,CAA9B,CAAT;EACA,OAAOA,KAAP;AACD,CARM"}
+{"version":3,"names":["useEffect","useMemo","ValueApi","isValue","useComputedValue","cb","values","value","createComputedValue","filter","dispose"],"sources":["useComputedValue.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors/Animations\";\n\n/**\n * @deprecated Use Reanimated 3\n * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations\n *\n * Creates a new computed value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useComputedValue = <R>(cb: () => R, values: unknown[]) => {\n  const value = useMemo(\n    () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n  useEffect(() => () => value.dispose(), [value]);\n  return value;\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,OAApB,QAAmC,OAAnC;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,sCAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAAuC;EACrE,MAAMC,KAAK,GAAGN,OAAO,CACnB,MAAMC,QAAQ,CAACM,mBAAT,CAAgCH,EAAhC,EAAoCC,MAAM,CAACG,MAAP,CAAcN,OAAd,CAApC,CADa,EAEnB;EACAG,MAHmB,CAArB;EAKAN,SAAS,CAAC,MAAM,MAAMO,KAAK,CAACG,OAAN,EAAb,EAA8B,CAACH,KAAD,CAA9B,CAAT;EACA,OAAOA,KAAP;AACD,CARM"}

package/lib/module/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/module/values/hooks/useValue.js

@@ -2,6 +2,9 @@ import { useMemo } from "react";
 import { ValueApi } from "../api";
 
 /**
+ * @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/module/values/hooks/useValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","ValueApi","useValue","v","createValue"],"sources":["useValue.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport type { SkiaMutableValue } from \"../types\";\n\n/**\n * Creates a new value that holds some data.\n * @param v Value to hold\n * @returns A Value of type of v\n */\nexport const useValue = <T>(v: T): SkiaMutableValue<T> => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => ValueApi.createValue(v), []);\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;;AAGA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAOC,CAAJ,IAAkC;EACxD;EACA,OAAOH,OAAO,CAAC,MAAMC,QAAQ,CAACG,WAAT,CAAqBD,CAArB,CAAP,EAAgC,EAAhC,CAAd;AACD,CAHM"}
+{"version":3,"names":["useMemo","ValueApi","useValue","v","createValue"],"sources":["useValue.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport type { SkiaMutableValue } from \"../types\";\n\n/**\n * @deprecated Use Reanimated 3\n * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations\n *\n * Creates a new value that holds some data.\n * @param v Value to hold\n * @returns A Value of type of v\n */\nexport const useValue = <T>(v: T): SkiaMutableValue<T> => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => ValueApi.createValue(v), []);\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAOC,CAAJ,IAAkC;EACxD;EACA,OAAOH,OAAO,CAAC,MAAMC,QAAQ,CAACG,WAAT,CAAqBD,CAArB,CAAP,EAAgC,EAAhC,CAAd;AACD,CAHM"}

package/lib/module/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/module/values/hooks/useValueEffect.js

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
 /**
+ * @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/module/values/hooks/useValueEffect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useValueEffect","value","cb","addListener"],"sources":["useValueEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport type { SkiaValue } from \"../types\";\n\n/**\n * Sets up an effect that will be run whenever the value changes\n * @param value Value to subscribe to changes on\n * @param cb Callback to run when value changes\n */\nexport const useValueEffect = <T>(value: SkiaValue<T>, cb: (v: T) => void) => {\n  useEffect(() => {\n    return value.addListener(cb);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;;AAIA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAG,CAAIC,KAAJ,EAAyBC,EAAzB,KAAgD;EAC5EH,SAAS,CAAC,MAAM;IACd,OAAOE,KAAK,CAACE,WAAN,CAAkBD,EAAlB,CAAP,CADc,CAEd;EACD,CAHQ,EAGN,CAACD,KAAD,CAHM,CAAT;AAID,CALM"}
+{"version":3,"names":["useEffect","useValueEffect","value","cb","addListener"],"sources":["useValueEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport type { SkiaValue } from \"../types\";\n\n/**\n * @deprecated Use Reanimated 3\n * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations\n *\n * Sets up an effect that will be run whenever the value changes\n * @param value Value to subscribe to changes on\n * @param cb Callback to run when value changes\n */\nexport const useValueEffect = <T>(value: SkiaValue<T>, cb: (v: T) => void) => {\n  useEffect(() => {\n    return value.addListener(cb);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAG,CAAIC,KAAJ,EAAyBC,EAAzB,KAAgD;EAC5EH,SAAS,CAAC,MAAM;IACd,OAAOE,KAAK,CAACE,WAAN,CAAkBD,EAAlB,CAAP,CADc,CAEd;EACD,CAHQ,EAGN,CAACD,KAAD,CAHM,CAAT;AAID,CALM"}

package/lib/module/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/module/values/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SkiaValue<T = number> {\n  /**\n   * Gets the value hold by the Value object\n   */\n  readonly current: T;\n  /**\n   * Adds a listener that is called when value changes.\n   * Returns unsubscribe method.\n   */\n  addListener: (cb: (value: T) => void) => () => void;\n  /**\n   * Invalidates the value. Has different meaning depending on the type of the value.\n   */\n  dispose: () => void;\n  /**\n   * Field to make typechecking easier\n   */\n  __typename__: \"RNSkValue\";\n}\n\nexport interface SkiaMutableValue<T = number> extends SkiaValue<T> {\n  /**\n   * Get/sets the value hold by the Value object\n   */\n  current: T;\n  /**\n   * Get/sets the animation controlling the value\n   * */\n  animation: SkiaAnimation | undefined;\n}\n\nexport interface SkiaClockValue extends SkiaValue<number> {\n  start: () => void;\n  stop: () => void;\n}\n\nexport interface SkiaAnimation extends SkiaClockValue {\n  cancel: () => void;\n}\n\nexport interface AnimationState {\n  current: number;\n  finished: boolean;\n}\n\nexport interface ISkiaValueApi {\n  /**\n   * Creates a new value that holds the initial value and that\n   * can be changed.\n   */\n  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;\n  /**\n   * Creates a computed value. This is a calculated value that returns the result of\n   * a function that is called with the values of the dependencies.\n   */\n  createComputedValue: <R>(\n    cb: () => R,\n    values: Array<SkiaValue<unknown>>\n  ) => SkiaValue<R>;\n  /**\n   * Creates a clock value where the value is the number of milliseconds elapsed\n   * since the clock was created\n   */\n  createClockValue: () => SkiaClockValue;\n  /**\n   * Creates an animation that is driven from a clock and updated every frame.\n   * @param cb Callback to calculate next value from time.\n   * @returns An animation object that can control a value.\n   */\n  createAnimation: <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ) => SkiaAnimation;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SkiaValue<T = number> {\n  /**\n   * Gets the value hold by the Value object\n   */\n  readonly current: T;\n  /**\n   * Adds a listener that is called when value changes.\n   * Returns unsubscribe method.\n   */\n  addListener: (cb: (value: T) => void) => () => void;\n  /**\n   * Invalidates the value. Has different meaning depending on the type of the value.\n   */\n  dispose: () => void;\n  /**\n   * Field to make typechecking easier\n   */\n  __typename__: \"RNSkValue\";\n}\n\nexport interface SkiaMutableValue<T = number> extends SkiaValue<T> {\n  /**\n   * Get/sets the value hold by the Value object\n   */\n  current: T;\n  /**\n   * Get/sets the animation controlling the value\n   * */\n  animation: SkiaAnimation | undefined;\n}\n\nexport interface SkiaClockValue extends SkiaValue<number> {\n  start: () => void;\n  stop: () => void;\n}\n\nexport interface SkiaAnimation extends SkiaClockValue {\n  cancel: () => void;\n}\n\nexport interface AnimationState {\n  current: number;\n  finished: boolean;\n}\n\nexport interface ISkiaValueApi {\n  /**\n   * Creates a new value that holds the initial value and that\n   * can be changed.\n   */\n  createValue<T>(initialValue: T): SkiaMutableValue<T>;\n  /**\n   * Creates a computed value. This is a calculated value that returns the result of\n   * a function that is called with the values of the dependencies.\n   */\n  createComputedValue<R>(\n    cb: () => R,\n    values: Array<SkiaValue<unknown>>\n  ): SkiaValue<R>;\n  /**\n   * Creates a clock value where the value is the number of milliseconds elapsed\n   * since the clock was created\n   */\n  createClockValue(): SkiaClockValue;\n  /**\n   * Creates an animation that is driven from a clock and updated every frame.\n   * @param cb Callback to calculate next value from time.\n   * @returns An animation object that can control a value.\n   */\n  createAnimation<S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation;\n}\n"],"mappings":""}

package/lib/module/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/lib/module/views/SkiaView.js

@@ -9,12 +9,22 @@ export const SkiaViewNativeId = {
   current: 1000
 };
 const NativeSkiaView = SkiaDrawViewNativeComponent;
+/**
+ * @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 class SkiaView extends React.Component {
   constructor(props) {
     super(props);
 
     _defineProperty(this, "_nativeId", void 0);
 
+    console.warn(`The SkiaView component is deprecated and will be removed in the next release.
+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`);
     this._nativeId = SkiaViewNativeId.current++;
     const {
       onDraw,

package/lib/module/views/SkiaView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SkiaDrawViewNativeComponent","SkiaViewApi","SkiaViewNativeId","current","NativeSkiaView","SkiaView","Component","constructor","props","_nativeId","onDraw","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport SkiaDrawViewNativeComponent from \"../specs/SkiaDrawViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaDrawViewProps } from \"./types\";\n\nexport const SkiaViewNativeId = { current: 1000 };\n\nconst NativeSkiaView = SkiaDrawViewNativeComponent;\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { onDraw, onSize } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDrawViewProps) {\n    const { onDraw, onSize } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, onSize, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode ?? \"default\"}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,OAAOC,2BAAP,MAAwC,sCAAxC;AAEA,SAASC,WAAT,QAA4B,OAA5B;AAGA,OAAO,MAAMC,gBAAgB,GAAG;EAAEC,OAAO,EAAE;AAAX,CAAzB;AAEP,MAAMC,cAAc,GAAGJ,2BAAvB;AAEA,OAAO,MAAMK,QAAN,SAAuBN,KAAK,CAACO,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBP,gBAAgB,CAACC,OAAjB,EAAjB;IACA,MAAM;MAAEO,MAAF;MAAUC;IAAV,IAAqBH,KAA3B;;IACA,IAAIE,MAAJ,EAAY;MACVE,iBAAiB;MACjBX,WAAW,CAACY,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;;IACD,IAAIC,MAAJ,EAAY;MACVC,iBAAiB;MACjBX,WAAW,CAACY,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,QAA3C,EAAqDE,MAArD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEN,MAAF;MAAUC;IAAV,IAAqB,KAAKH,KAAhC;;IACA,IAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BE,iBAAiB;MACjBX,WAAW,CAACY,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;;IACD,IAAIC,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBX,WAAW,CAACY,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,QAA3C,EAAqDE,MAArD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOX,WAAW,CAACgB,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBX,WAAW,CAACmB,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOX,WAAW,CAACsB,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuBf,MAAvB;MAA+B,GAAGgB;IAAlC,IAAgD,KAAKnB,KAA3D;IACA,oBACE,oBAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,SAHhB;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAxE8D;;AA2EjE,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACEX,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACY,cAAZ,KAA+B,IAD/B,IAEAZ,WAAW,CAAC2B,aAAZ,KAA8B,IAF9B,IAGA3B,WAAW,CAACsB,oBAAZ,KAAqC,IAHrC,IAIAtB,WAAW,CAACmB,aAAZ,KAA8B,IAJ9B,IAKAnB,WAAW,CAACgB,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
+{"version":3,"names":["React","SkiaDrawViewNativeComponent","SkiaViewApi","SkiaViewNativeId","current","NativeSkiaView","SkiaView","Component","constructor","props","console","warn","_nativeId","onDraw","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport SkiaDrawViewNativeComponent from \"../specs/SkiaDrawViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaDrawViewProps } from \"./types\";\n\nexport const SkiaViewNativeId = { current: 1000 };\n\nconst NativeSkiaView = SkiaDrawViewNativeComponent;\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 class SkiaView extends React.Component<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n    console.warn(\n      `The SkiaView component is deprecated and will be removed in the next release.\nIf 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    );\n    this._nativeId = SkiaViewNativeId.current++;\n    const { onDraw, onSize } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDrawViewProps) {\n    const { onDraw, onSize } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, onSize, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode ?? \"default\"}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":"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"}

package/lib/typescript/src/animation/spring/runSpring.d.ts

@@ -1,6 +1,9 @@
 import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
 import type { AnimationParams, SpringConfig, AnimationCallback } from "../types";
 /**
+ * @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/lib/typescript/src/animation/spring/useSpring.d.ts

@@ -1,6 +1,9 @@
 import type { SkiaValue } from "../../values/types";
 import type { SpringConfig, AnimationParams, AnimationCallback } from "../types";
 /**
+ * @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/lib/typescript/src/animation/timing/runTiming.d.ts

@@ -1,6 +1,9 @@
 import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
 import type { AnimationParams, TimingConfig, AnimationCallback } from "../types";
 /**
+ * @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/lib/typescript/src/animation/timing/useLoop.d.ts

@@ -1,5 +1,8 @@
 import type { TimingConfig } from "../types";
 /**
+ * @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/lib/typescript/src/animation/timing/useTiming.d.ts

@@ -1,6 +1,9 @@
 import type { SkiaValue } from "../../values/types";
 import type { AnimationParams, TimingConfig, AnimationCallback } from "../types";
 /**
+ * @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/lib/typescript/src/dom/nodes/datatypes/Fitting.d.ts

@@ -8,14 +8,14 @@ export declare const size: (width?: number, height?: number) => {
     width: number;
     height: number;
 };
-export declare const rect2rect: (src: SkRect, dst: SkRect) => readonly [{
-    readonly translateX: number;
+export declare const rect2rect: (src: SkRect, dst: SkRect) => [{
+    translateX: number;
 }, {
-    readonly translateY: number;
+    translateY: number;
 }, {
-    readonly scaleX: number;
+    scaleX: number;
 }, {
-    readonly scaleY: number;
+    scaleY: number;
 }];
 export declare const fitRects: (fit: Fit, rect: SkRect, { x, y, width, height }: SkRect) => {
     src: {

package/lib/typescript/src/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/typescript/src/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, Matrix3, Matrix4, 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 | Matrix4 | Matrix3 | number[];
 }
 export interface PaintProps extends ChildrenProps {
     color?: Color;