@shopify/react-native-skia 0.1.116 → 0.1.118

package/lib/module/values/hooks/useDerivedValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDerivedValue.ts"],"names":["useMemo","ValueApi","isValue","useDerivedValue","cb","values","createDerivedValue","filter"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,gBAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,eAAe,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC7BL,OAAO,CACL,MAAMC,QAAQ,CAACK,kBAAT,CAA+BF,EAA/B,EAAmCC,MAAM,CAACE,MAAP,CAAcL,OAAd,CAAnC,CADD,EAEL;AACAG,MAHK,CADF","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer\";\n\n/**\n * Creates a new derived 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 useDerivedValue = <R>(cb: () => R, values: unknown[]) =>\n  useMemo(\n    () => ValueApi.createDerivedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n"]}
+{"version":3,"sources":["useDerivedValue.ts"],"names":["useMemo","ValueApi","isValue","useDerivedValue","cb","values","createDerivedValue","filter"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,2BAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,eAAe,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC7BL,OAAO,CACL,MAAMC,QAAQ,CAACK,kBAAT,CAA+BF,EAA/B,EAAmCC,MAAM,CAACE,MAAP,CAAcL,OAAd,CAAnC,CADD,EAEL;AACAG,MAHK,CADF","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors\";\n\n/**\n * Creates a new derived 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 useDerivedValue = <R>(cb: () => R, values: unknown[]) =>\n  useMemo(\n    () => ValueApi.createDerivedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n"]}

package/lib/module/views/SkiaView.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React from "react";
@@ -87,17 +89,16 @@ export class SkiaView extends React.Component {
 
   render() {
     const {
-      style,
       mode,
-      debug = false
+      debug = false,
+      ...viewProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(NativeSkiaView, {
-      style: style,
+    return /*#__PURE__*/React.createElement(NativeSkiaView, _extends({
       collapsable: false,
       nativeID: `${this._nativeId}`,
       mode: mode,
       debug: debug
-    });
+    }, viewProps));
   }
 
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","render","style","debug","Error"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAYA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAGF,sBAAsB,CAC3C,qBAD2C,CAA7C;AAoBA,MAAM;AAAEG,EAAAA;AAAF,IAAkBC,MAAxB;AAEA,OAAO,MAAMC,QAAN,SAAuBN,KAAK,CAACO,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;AACA,UAAM;AAAES,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,0BAA0B;AAC1BR,MAAAA,WAAW,CAACS,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;;AAIkB,MAARG,QAAQ,GAAG;AACpB,WAAO,KAAKJ,SAAZ;AACD;;AAEDK,EAAAA,kBAAkB,CAACC,SAAD,EAA2B;AAC3C,UAAM;AAAEL,MAAAA;AAAF,QAAa,KAAKF,KAAxB;;AACA,QAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;AAC/BC,MAAAA,0BAA0B;AAC1BR,MAAAA,WAAW,CAACS,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSM,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCN,IAAAA,0BAA0B;AAC1B,WAAOR,WAAW,CAACa,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdP,IAAAA,0BAA0B;AAC1BR,IAAAA,WAAW,CAACgB,kBAAZ,CAA+B,KAAKV,SAApC;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACSW,EAAAA,WAAW,CAACC,IAAD,EAAiB;AACjCV,IAAAA,0BAA0B;AAC1BR,IAAAA,WAAW,CAACiB,WAAZ,CAAwB,KAAKX,SAA7B,EAAwCY,IAAxC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSC,EAAAA,cAAc,CAACC,MAAD,EAAuC;AAC1DZ,IAAAA,0BAA0B;AAC1B,WAAOR,WAAW,CAACqB,oBAAZ,CAAiC,KAAKf,SAAtC,EAAiDc,MAAjD,CAAP;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,KAAF;AAASL,MAAAA,IAAT;AAAeM,MAAAA,KAAK,GAAG;AAAvB,QAAiC,KAAKnB,KAA5C;AACA,wBACE,oBAAC,cAAD;AACE,MAAA,KAAK,EAAEkB,KADT;AAEE,MAAA,WAAW,EAAE,KAFf;AAGE,MAAA,QAAQ,EAAG,GAAE,KAAKjB,SAAU,EAH9B;AAIE,MAAA,IAAI,EAAEY,IAJR;AAKE,MAAA,KAAK,EAAEM;AALT,MADF;AASD;;AA9E0D;;AAiF7D,MAAMhB,0BAA0B,GAAG,MAAM;AACvC,MACER,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACS,eAAZ,IAA+B,IAD/B,IAEAT,WAAW,CAACgB,kBAAZ,IAAkC,IAHpC,EAIE;AACA,UAAMS,KAAK,CAAC,0BAAD,CAAX;AACD;AACF,CARD","sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkImage, SkRect } from \"../skia\";\nimport type { SkiaReadonlyValue } from \"../values\";\n\nimport type {\n  DrawMode,\n  SkiaViewProps,\n  RNSkiaDrawCallback,\n  NativeSkiaViewProps,\n} from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\n);\n\ndeclare global {\n  var SkiaViewApi: {\n    invalidateSkiaView: (nativeId: number) => void;\n    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n    setDrawCallback: (\n      nativeId: number,\n      callback: RNSkiaDrawCallback | undefined\n    ) => void;\n    setDrawMode: (nativeId: number, mode: DrawMode) => void;\n    registerValuesInView: (\n      nativeId: number,\n      values: SkiaReadonlyValue<unknown>[]\n    ) => () => void;\n  };\n}\n\nconst { SkiaViewApi } = global;\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertDrawCallbacksEnabled();\n      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertDrawCallbacksEnabled();\n      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\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    assertDrawCallbacksEnabled();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertDrawCallbacksEnabled();\n    SkiaViewApi.invalidateSkiaView(this._nativeId);\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    assertDrawCallbacksEnabled();\n    SkiaViewApi.setDrawMode(this._nativeId, mode);\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: SkiaReadonlyValue<unknown>[]) {\n    assertDrawCallbacksEnabled();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { style, mode, debug = false } = this.props;\n    return (\n      <NativeSkiaView\n        style={style}\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n}\n\nconst assertDrawCallbacksEnabled = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setDrawCallback == null ||\n    SkiaViewApi.invalidateSkiaView == null\n  ) {\n    throw Error(\"Skia Api is not enabled.\");\n  }\n};\n"]}
+{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","render","debug","viewProps","Error"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,sBAAT,QAAuC,cAAvC;AAWA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAGF,sBAAsB,CAC3C,qBAD2C,CAA7C;AAoBA,MAAM;AAAEG,EAAAA;AAAF,IAAkBC,MAAxB;AA0BA,OAAO,MAAMC,QAAN,SAAuBN,KAAK,CAACO,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;AACA,UAAM;AAAES,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,0BAA0B;AAC1BR,MAAAA,WAAW,CAACS,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;;AAIkB,MAARG,QAAQ,GAAG;AACpB,WAAO,KAAKJ,SAAZ;AACD;;AAEDK,EAAAA,kBAAkB,CAACC,SAAD,EAA2B;AAC3C,UAAM;AAAEL,MAAAA;AAAF,QAAa,KAAKF,KAAxB;;AACA,QAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;AAC/BC,MAAAA,0BAA0B;AAC1BR,MAAAA,WAAW,CAACS,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSM,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCN,IAAAA,0BAA0B;AAC1B,WAAOR,WAAW,CAACa,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdP,IAAAA,0BAA0B;AAC1BR,IAAAA,WAAW,CAACgB,kBAAZ,CAA+B,KAAKV,SAApC;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACSW,EAAAA,WAAW,CAACC,IAAD,EAAiB;AACjCV,IAAAA,0BAA0B;AAC1BR,IAAAA,WAAW,CAACiB,WAAZ,CAAwB,KAAKX,SAA7B,EAAwCY,IAAxC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSC,EAAAA,cAAc,CAACC,MAAD,EAAuC;AAC1DZ,IAAAA,0BAA0B;AAC1B,WAAOR,WAAW,CAACqB,oBAAZ,CAAiC,KAAKf,SAAtC,EAAiDc,MAAjD,CAAP;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEJ,MAAAA,IAAF;AAAQK,MAAAA,KAAK,GAAG,KAAhB;AAAuB,SAAGC;AAA1B,QAAwC,KAAKnB,KAAnD;AACA,wBACE,oBAAC,cAAD;AACE,MAAA,WAAW,EAAE,KADf;AAEE,MAAA,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;AAGE,MAAA,IAAI,EAAEY,IAHR;AAIE,MAAA,KAAK,EAAEK;AAJT,OAKMC,SALN,EADF;AASD;;AA9E0D;;AAiF7D,MAAMhB,0BAA0B,GAAG,MAAM;AACvC,MACER,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACS,eAAZ,IAA+B,IAD/B,IAEAT,WAAW,CAACgB,kBAAZ,IAAkC,IAHpC,EAIE;AACA,UAAMS,KAAK,CAAC,0BAAD,CAAX;AACD;AACF,CARD","sourcesContent":["import React from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkImage, SkRect } from \"../skia\";\nimport type { SkiaReadonlyValue } from \"../values\";\n\nimport type {\n  DrawMode,\n  RNSkiaDrawCallback,\n  NativeSkiaViewProps,\n} from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\n);\n\ndeclare global {\n  var SkiaViewApi: {\n    invalidateSkiaView: (nativeId: number) => void;\n    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n    setDrawCallback: (\n      nativeId: number,\n      callback: RNSkiaDrawCallback | undefined\n    ) => void;\n    setDrawMode: (nativeId: number, mode: DrawMode) => void;\n    registerValuesInView: (\n      nativeId: number,\n      values: SkiaReadonlyValue<unknown>[]\n    ) => () => void;\n  };\n}\n\nconst { SkiaViewApi } = global;\n\nexport interface SkiaViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertDrawCallbacksEnabled();\n      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertDrawCallbacksEnabled();\n      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\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    assertDrawCallbacksEnabled();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertDrawCallbacksEnabled();\n    SkiaViewApi.invalidateSkiaView(this._nativeId);\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    assertDrawCallbacksEnabled();\n    SkiaViewApi.setDrawMode(this._nativeId, mode);\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: SkiaReadonlyValue<unknown>[]) {\n    assertDrawCallbacksEnabled();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertDrawCallbacksEnabled = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setDrawCallback == null ||\n    SkiaViewApi.invalidateSkiaView == null\n  ) {\n    throw Error(\"Skia Api is not enabled.\");\n  }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAWA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\nexport type SkiaViewProps = {\n  style?: ViewProps[\"style\"];\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n};\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n"]}
+{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAWA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n"]}

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -1,19 +1,15 @@
 import React from "react";
-import type { RefObject, ReactNode, ComponentProps, Context } from "react";
+import type { RefObject, ReactNode, ComponentProps } from "react";
 import ReactReconciler from "react-reconciler";
 import { SkiaView } from "../views";
 import type { TouchHandler } from "../views";
 import type { FontMgr } from "../skia/FontMgr/FontMgr";
+import type { SkiaReadonlyValue } from "../values/types";
 import { Container } from "./nodes";
-export declare const useContextBridge: (...contexts: Context<any>[]) => ({ children }: {
-    children: ReactNode;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-interface CanvasContext {
+export declare const useCanvasSize: () => SkiaReadonlyValue<{
     width: number;
     height: number;
-}
-declare const CanvasContext: React.Context<CanvasContext | null>;
-export declare const useCanvas: () => CanvasContext;
+}>;
 export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>>;
 export declare const useCanvasRef: () => React.RefObject<SkiaView>;
 export interface CanvasProps extends ComponentProps<typeof SkiaView> {
@@ -22,5 +18,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     onTouch?: TouchHandler;
     fontMgr?: FontMgr;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "mode" | "debug" | "onDraw" | "children" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;
-export {};
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { DrawingContext } from "../DrawingContext";
+interface DrawingProps {
+    drawing: (ctx: DrawingContext) => void;
+}
+export declare const Drawing: (props: DrawingProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { SkPicture } from "../../skia";
+export interface PictureProps {
+    picture: SkPicture;
+}
+export declare const Picture: (props: PictureProps) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/InnerShadow.d.ts

@@ -1,12 +1,3 @@
-/// <reference types="react" />
-import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia";
-export interface InnerShadowProps {
-    dx: number;
-    dy: number;
-    blur: number;
-    color: Color;
-    shadowOnly?: boolean;
-    inner?: boolean;
-}
-export declare const InnerShadow: (props: AnimatedProps<InnerShadowProps>) => JSX.Element;
+import type { SkColor } from "../../../skia";
+import type { SkImageFilter } from "../../../skia/ImageFilter/ImageFilter";
+export declare const MakeInnerShadow: (shadowOnly: boolean | undefined, dx: number, dy: number, sigmaX: number, sigmaY: number, color: SkColor, input: SkImageFilter | null) => SkImageFilter;

package/lib/typescript/src/renderer/components/imageFilters/{DropShadow.d.ts → Shadow.d.ts}

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import type { Color } from "../../../skia/Color";
-export interface DropShadowProps {
+export interface ShadowProps {
     dx: number;
     dy: number;
     blur: number;
     color: Color;
+    inner?: boolean;
     shadowOnly?: boolean;
 }
-export declare const DropShadow: (props: AnimatedProps<DropShadowProps>) => JSX.Element;
+export declare const Shadow: (props: AnimatedProps<ShadowProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./Blur";
 export * from "./Offset";
 export * from "./DisplacementMap";
-export * from "./DropShadow";
-export * from "./InnerShadow";
+export * from "./Shadow";
 export * from "./Morphology";

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

@@ -8,9 +8,11 @@ export * from "./maskFilters";
 export * from "./imageFilters";
 export * from "./pathEffects";
 export * from "../processors";
+export * from "./Picture";
 export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
 export * from "./Defs";
+export * from "./Drawing";

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { Color, SkRRect } from "../../../skia";
+import type { AnimatedProps, CustomPaintProps } from "../../processors";
+import type { SkRect } from "../../../skia/Rect";
+interface BoxShadowProps {
+    dx?: number;
+    dy?: number;
+    spread?: number;
+    blur: number;
+    color?: Color;
+    inner?: boolean;
+}
+export declare const BoxShadow: (props: AnimatedProps<BoxShadowProps>) => JSX.Element;
+interface BoxProps extends CustomPaintProps {
+    box: SkRRect | SkRect;
+}
+export declare const Box: {
+    (props: AnimatedProps<BoxProps>): JSX.Element;
+    defaultProps: {
+        shadows: never[];
+    };
+};
+export {};

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

@@ -10,3 +10,4 @@ export * from "./Patch";
 export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
+export * from "./Box";

package/lib/typescript/src/renderer/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
+export * from "./useContextBridge";

package/lib/typescript/src/renderer/nodes/Declaration.d.ts

@@ -1,3 +1,4 @@
+import type { DependencyList } from "react";
 import type { DrawingContext } from "../DrawingContext";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { AnimatedProps } from "../processors";
@@ -6,6 +7,7 @@ import { Node } from "./Node";
 export declare type DeclarationResult = SkJSIInstance<string> | null;
 declare type DeclarationCallback<T> = (props: T, children: DeclarationResult[], ctx: DrawingContext) => DeclarationResult;
 export declare const createDeclaration: <T>(cb: DeclarationCallback<T>) => DeclarationCallback<T>;
+export declare const useDeclaration: <P>(cb: DeclarationCallback<P>, deps?: DependencyList | undefined) => DeclarationCallback<P>;
 export interface DeclarationProps<P> {
     onDeclare: DeclarationCallback<P>;
 }

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { DependencyList, ReactNode } from "react";
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 import type { DependencyManager } from "../DependencyManager";
@@ -6,12 +6,12 @@ import { Node } from "./Node";
 declare type DrawingCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 declare type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 export declare const createDrawing: <P>(cb: OnDrawCallback<P>) => DrawingCallback<P>;
+export declare const useDrawing: <P>(cb: OnDrawCallback<P>, deps?: DependencyList | undefined) => OnDrawCallback<P>;
 export declare type DrawingProps<T> = {
     onDraw: DrawingCallback<T>;
     skipProcessing?: boolean;
     children?: ReactNode | ReactNode[];
 };
-export declare const Drawing: <P>(props: DrawingProps<P>) => JSX.Element;
 export declare class DrawingNode<P> extends Node<P> {
     onDraw: DrawingCallback<P>;
     skipProcessing: boolean;

package/lib/typescript/src/renderer/processors/math/Math.d.ts

@@ -1 +1,15 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 export declare const mix: (value: number, x: number, y: number) => number;
+/**
+ *  @summary Clamps a node with a lower and upper bound.
+ *  @example
+    clamp(-1, 0, 100); // 0
+    clamp(1, 0, 100); // 1
+    clamp(101, 0, 100); // 100
+  */
+export declare const clamp: (value: number, lowerBound: number, upperBound: number) => number;

package/lib/typescript/src/renderer/processors/math/Matrix3.d.ts

@@ -9,5 +9,6 @@ declare type Transformations = {
     readonly [Name in Transform2dName]: number;
 };
 export declare 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 declare const matrixVecMul3: (m: Matrix3, v: Vec3) => readonly [number, number, number];
 export declare const processTransform2d: (transforms: Transforms2d) => SkMatrix;
 export {};

package/lib/typescript/src/renderer/typeddash.d.ts

@@ -1,2 +1,3 @@
 export declare const mapKeys: <T>(obj: T) => (keyof T)[];
 export declare const exhaustiveCheck: (a: never) => never;
+export declare const shallowEq: <P>(p1: P, p2: P) => boolean;

package/lib/typescript/src/renderer/useContextBridge.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ReactNode, Context } from "react";
+export declare const useContextBridge: (...contexts: Context<any>[]) => ({ children }: {
+    children: ReactNode;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -12,6 +12,7 @@ import type { SkMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
+import type { SkPicture } from "./Picture";
 export declare enum ClipOp {
     Difference = 0,
     Intersect = 1
@@ -372,4 +373,9 @@ export interface SkCanvas {
      * @param m
      */
     concat(m: SkMatrix): void;
+    /**
+     * Draws the given picture using the current clip, current matrix, and the provided paint.
+     * @param skp
+     */
+    drawPicture(skp: SkPicture): void;
 }

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

@@ -0,0 +1,26 @@
+import type { InputColorMatrix } from "../ColorFilter";
+import type { FilterMode } from "../Image";
+import type { TileMode } from "../ImageFilter";
+import type { SkRect } from "../Rect";
+import type { IShader } from "../Shader";
+export interface SkPicture {
+    /**
+     *  Returns a new shader that will draw with this picture.
+     *
+     *  @param tmx  The tiling mode to use when sampling in the x-direction.
+     *  @param tmy  The tiling mode to use when sampling in the y-direction.
+     *  @param mode How to filter the tiles
+     *  @param localMatrix Optional matrix used when sampling
+     *  @param tileRect The tile rectangle in picture coordinates: this represents the subset
+     *              (or superset) of the picture used when building a tile. It is not
+     *              affected by localMatrix and does not imply scaling (only translation
+     *              and cropping). If null, the tile rect is considered equal to the picture
+     *              bounds.
+     */
+    makeShader(tmx: TileMode, tmy: TileMode, mode: FilterMode, localMatrix?: InputColorMatrix, tileRect?: SkRect): IShader;
+    /**
+     * Returns the serialized format of this SkPicture. The format may change at anytime and
+     * no promises are made for backwards or forward compatibility.
+     */
+    serialize(): Uint8Array | null;
+}

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

@@ -0,0 +1,8 @@
+import type { SkPicture } from "./Picture";
+export interface PictureFactory {
+    /**
+     * Returns an SkPicture which has been serialized previously to the given bytes.
+     * @param bytes
+     */
+    MakePicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null;
+}

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

@@ -0,0 +1,15 @@
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+import type { SkPicture } from "./Picture";
+export interface SkPictureRecorder {
+    /**
+     * Returns a canvas on which to draw. When done drawing, call finishRecordingAsPicture()
+     *
+     * @param bounds - a rect to cull the results.
+     */
+    beginRecording(bounds: SkRect): SkCanvas;
+    /**
+     * Returns the captured draw commands as a picture and invalidates the canvas returned earlier.
+     */
+    finishRecordingAsPicture(): SkPicture;
+}

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

@@ -0,0 +1,4 @@
+export * from "./Picture";
+export * from "./PictureRecorder";
+export * from "./usePicture";
+export * from "./PictureFactory";

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

@@ -0,0 +1,11 @@
+import type { DependencyList } from "react";
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+import type { SkPicture } from "./Picture";
+/**
+ * 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 usePicture: (rect: SkRect, cb: (canvas: SkCanvas) => void, deps?: DependencyList) => SkPicture;

package/lib/typescript/src/skia/Skia.d.ts

@@ -25,6 +25,7 @@ import "./NativeSetup";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
+import type { PictureFactory, SkPictureRecorder } from "./Picture";
 /**
  * Declares the interface for the native Skia API
  */
@@ -35,6 +36,8 @@ export interface Skia {
     RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;
     Paint: () => SkPaint;
+    PictureRecorder: () => SkPictureRecorder;
+    Picture: PictureFactory;
     Path: PathFactory;
     Matrix: () => SkMatrix;
     ColorFilter: ColorFilterFactory;
@@ -89,6 +92,8 @@ export declare const Skia: {
     XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
     RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
     Paint: () => SkPaint;
+    PictureRecorder: () => SkPictureRecorder;
+    Picture: PictureFactory;
     Path: PathFactory;
     ColorFilter: ColorFilterFactory;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;

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

@@ -20,4 +20,5 @@ export * from "./Surface";
 export * from "./FontMgr";
 export * from "./Vertices";
 export * from "./Color";
+export * from "./Picture";
 export * from "./Data";

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

@@ -1,7 +1,8 @@
 import React from "react";
+import type { ViewProps } from "react-native";
 import type { SkImage, SkRect } from "../skia";
 import type { SkiaReadonlyValue } from "../values";
-import type { DrawMode, SkiaViewProps, RNSkiaDrawCallback } from "./types";
+import type { DrawMode, RNSkiaDrawCallback } from "./types";
 declare global {
     var SkiaViewApi: {
         invalidateSkiaView: (nativeId: number) => void;
@@ -11,6 +12,29 @@ declare global {
         registerValuesInView: (nativeId: number, values: SkiaReadonlyValue<unknown>[]) => () => void;
     };
 }
+export interface SkiaViewProps extends ViewProps {
+    /**
+     * Sets the drawing mode for the skia view. There are two drawing
+     * modes, "continuous" and "default", where the continuous mode will
+     * continuously redraw the view, and the default mode will only
+     * redraw when any of the regular react properties are changed like
+     * sizes and margins.
+     */
+    mode?: DrawMode;
+    /**
+     * When set to true the view will display information about the
+     * average time it takes to render.
+     */
+    debug?: boolean;
+    /**
+     * Draw callback. Will be called whenever the view is invalidated and
+     * needs to redraw. This is either caused by a change in a react
+     * property, a touch event, or a call to redraw. If the view is in
+     * continuous mode the callback will be called 60 frames per second
+     * by the native view.
+     */
+    onDraw?: RNSkiaDrawCallback;
+}
 export declare class SkiaView extends React.Component<SkiaViewProps> {
     constructor(props: SkiaViewProps);
     private _nativeId;

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

@@ -35,30 +35,6 @@ export declare type TouchHandlers = {
 };
 export declare type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 export declare type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
-export declare type SkiaViewProps = {
-    style?: ViewProps["style"];
-    /**
-     * Sets the drawing mode for the skia view. There are two drawing
-     * modes, "continuous" and "default", where the continuous mode will
-     * continuously redraw the view, and the default mode will only
-     * redraw when any of the regular react properties are changed like
-     * sizes and margins.
-     */
-    mode?: DrawMode;
-    /**
-     * When set to true the view will display information about the
-     * average time it takes to render.
-     */
-    debug?: boolean;
-    /**
-     * Draw callback. Will be called whenever the view is invalidated and
-     * needs to redraw. This is either caused by a change in a react
-     * property, a touch event, or a call to redraw. If the view is in
-     * continuous mode the callback will be called 60 frames per second
-     * by the native view.
-     */
-    onDraw?: RNSkiaDrawCallback;
-};
 /**
  * Listener interface for value changes
  */

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.116",
+  "version": "0.1.118",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [