@shopify/react-native-skia 0.1.145 → 0.1.147

package/lib/module/views/SkiaView.js

@@ -19,8 +19,8 @@ export class SkiaView extends React.Component {
     } = props;
 
     if (onDraw) {
-      assertDrawCallbacksEnabled();
-      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
   }
 
@@ -34,8 +34,8 @@ export class SkiaView extends React.Component {
     } = this.props;
 
     if (onDraw !== prevProps.onDraw) {
-      assertDrawCallbacksEnabled();
-      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
   }
   /**
@@ -46,7 +46,7 @@ export class SkiaView extends React.Component {
 
 
   makeImageSnapshot(rect) {
-    assertDrawCallbacksEnabled();
+    assertSkiaViewApi();
     return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
   }
   /**
@@ -55,23 +55,8 @@ export class SkiaView extends React.Component {
 
 
   redraw() {
-    assertDrawCallbacksEnabled();
-    SkiaViewApi.invalidateSkiaView(this._nativeId);
-  }
-  /**
-   * Updates the drawing mode for the skia view. This is the same
-   * as declaratively setting the mode property on the SkiaView.
-   * 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 size and margins.
-   * @param mode Drawing mode to use.
-   */
-
-
-  setDrawMode(mode) {
-    assertDrawCallbacksEnabled();
-    SkiaViewApi.setDrawMode(this._nativeId, mode);
+    assertSkiaViewApi();
+    SkiaViewApi.requestRedraw(this._nativeId);
   }
   /**
    * Registers one or move values as a dependant value of the Skia View. The view will
@@ -81,7 +66,7 @@ export class SkiaView extends React.Component {
 
 
   registerValues(values) {
-    assertDrawCallbacksEnabled();
+    assertSkiaViewApi();
     return SkiaViewApi.registerValuesInView(this._nativeId, values);
   }
 
@@ -101,9 +86,9 @@ export class SkiaView extends React.Component {
 
 }
 
-const assertDrawCallbacksEnabled = () => {
-  if (SkiaViewApi === null || SkiaViewApi.setDrawCallback == null || SkiaViewApi.invalidateSkiaView == null) {
-    throw Error("Skia Api is not enabled.");
+const assertSkiaViewApi = () => {
+  if (SkiaViewApi === null || SkiaViewApi.setJsiProperty === null || SkiaViewApi.callJsiMethod === null || SkiaViewApi.registerValuesInView === null || SkiaViewApi.requestRedraw === null || SkiaViewApi.makeImageSnapshot === null) {
+    throw Error("Skia View Api was not found.");
   }
 };
 //# sourceMappingURL=SkiaView.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaView","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;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAGH,sBAAsB,CAC3C,qBAD2C,CAA7C;AAIA,OAAO,MAAMI,QAAN,SAAuBL,KAAK,CAACM,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;AACA,UAAM;AAAEO,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,0BAA0B;AAC1BT,MAAAA,WAAW,CAACU,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;AAC1BT,MAAAA,WAAW,CAACU,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSM,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCN,IAAAA,0BAA0B;AAC1B,WAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdP,IAAAA,0BAA0B;AAC1BT,IAAAA,WAAW,CAACiB,kBAAZ,CAA+B,KAAKV,SAApC;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACSW,EAAAA,WAAW,CAACC,IAAD,EAAiB;AACjCV,IAAAA,0BAA0B;AAC1BT,IAAAA,WAAW,CAACkB,WAAZ,CAAwB,KAAKX,SAA7B,EAAwCY,IAAxC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSC,EAAAA,cAAc,CAACC,MAAD,EAA+B;AAClDZ,IAAAA,0BAA0B;AAC1B,WAAOT,WAAW,CAACsB,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,MACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,eAAZ,IAA+B,IAD/B,IAEAV,WAAW,CAACiB,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 { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { DrawMode, NativeSkiaViewProps, SkiaViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\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: SkiaValue<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"]}
+{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaView","SkiaView","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAGH,sBAAsB,CAC3C,qBAD2C,CAA7C;AAIA,OAAO,MAAMI,QAAN,SAAuBL,KAAK,CAACM,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;AACA,UAAM;AAAEO,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,iBAAiB;AACjBT,MAAAA,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;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,iBAAiB;AACjBT,MAAAA,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSM,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCN,IAAAA,iBAAiB;AACjB,WAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdP,IAAAA,iBAAiB;AACjBT,IAAAA,WAAW,CAACiB,aAAZ,CAA0B,KAAKV,SAA/B;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSW,EAAAA,cAAc,CAACC,MAAD,EAA2C;AAC9DV,IAAAA,iBAAiB;AACjB,WAAOT,WAAW,CAACoB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA,KAAK,GAAG,KAAhB;AAAuB,SAAGC;AAA1B,QAAwC,KAAKlB,KAAnD;AACA,wBACE,oBAAC,cAAD;AACE,MAAA,WAAW,EAAE,KADf;AAEE,MAAA,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;AAGE,MAAA,IAAI,EAAEe,IAHR;AAIE,MAAA,KAAK,EAAEC;AAJT,OAKMC,SALN,EADF;AASD;;AAhE0D;;AAmE7D,MAAMf,iBAAiB,GAAG,MAAM;AAC9B,MACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,cAAZ,KAA+B,IAD/B,IAEAV,WAAW,CAACyB,aAAZ,KAA8B,IAF9B,IAGAzB,WAAW,CAACoB,oBAAZ,KAAqC,IAHrC,IAIApB,WAAW,CAACiB,aAAZ,KAA8B,IAJ9B,IAKAjB,WAAW,CAACc,iBAAZ,KAAkC,IANpC,EAOE;AACA,UAAMY,KAAK,CAAC,8BAAD,CAAX;AACD;AACF,CAXD","sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\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      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", 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      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", 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    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, ...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 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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAYA,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 { SkImage, SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\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  id: number;\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\nexport interface ISkiaViewApi {\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: SkiaValue<unknown>[]\n  ) => () => void;\n}\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"]}
+{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAYA,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, SkImage, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\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  id: number;\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\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\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"]}

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

@@ -19,6 +19,7 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     skew: (x: number, y: number) => void;
     rotate: (theta: number) => void;
     identity: () => void;
+    get: () => number[];
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
 declare type Transformations = {

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

@@ -9,4 +9,5 @@ export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> impleme
     skew(x: number, y: number): void;
     rotate(value: number): void;
     identity(): void;
+    get(): number[];
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
-import type { DrawMode, SkiaViewProps } from "./types";
+import type { SkiaViewProps } from "./types";
 export declare class SkiaView extends React.Component<SkiaViewProps> {
     constructor(props: SkiaViewProps);
     private _nativeId;
@@ -17,16 +17,6 @@ export declare class SkiaView extends React.Component<SkiaViewProps> {
      * Sends a redraw request to the native SkiaView.
      */
     redraw(): void;
-    /**
-     * Updates the drawing mode for the skia view. This is the same
-     * as declaratively setting the mode property on the SkiaView.
-     * 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 size and margins.
-     * @param mode Drawing mode to use.
-     */
-    setDrawMode(mode: DrawMode): void;
     /**
      * Registers one or move values as a dependant value of the Skia View. The view will
      * The view will redraw itself when any of the values change.

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

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native";
-import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkCanvas, SkImage, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
@@ -45,11 +45,11 @@ export interface ValueListener {
     removeListener: (id: number) => void;
 }
 export interface ISkiaViewApi {
-    invalidateSkiaView: (nativeId: number) => void;
-    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
-    setDrawCallback: (nativeId: number, callback: RNSkiaDrawCallback | undefined) => void;
-    setDrawMode: (nativeId: number, mode: DrawMode) => void;
+    setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+    callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
     registerValuesInView: (nativeId: number, values: SkiaValue<unknown>[]) => () => void;
+    requestRedraw: (nativeId: number) => void;
+    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
 export interface SkiaViewProps extends ViewProps {
     /**

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.145",
+  "version": "0.1.147",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/renderer/HostConfig.ts

@@ -265,7 +265,17 @@ export const skHostConfig: SkiaHostConfig = {
       return;
     }
     bustBranchMemoization(instance);
-    instance.props = nextProps;
+    if (instance instanceof DrawingNode) {
+      const { onDraw, skipProcessing, ...props } = nextProps;
+      instance.props = props;
+    } else if (instance instanceof DeclarationNode) {
+      const { onDeclare, ...props } = nextProps;
+      instance.props = props;
+    } else {
+      throw new Error(
+        "Unsupported instance commitUpdate " + instance.constructor.name
+      );
+    }
   },
 
   commitTextUpdate: (

package/src/skia/types/Matrix.ts

@@ -22,6 +22,7 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   skew: (x: number, y: number) => void;
   rotate: (theta: number) => void;
   identity: () => void;
+  get: () => number[];
 }
 
 type Transform2dName =

package/src/skia/web/JsiSkMatrix.ts

@@ -57,4 +57,8 @@ export class JsiSkMatrix
   identity() {
     this.ref.set(this.CanvasKit.Matrix.identity());
   }
+
+  get() {
+    return Array.from(this.ref);
+  }
 }

package/src/views/SkiaView.tsx

@@ -5,7 +5,7 @@ import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 import { SkiaViewApi } from "./api";
-import type { DrawMode, NativeSkiaViewProps, SkiaViewProps } from "./types";
+import type { NativeSkiaViewProps, SkiaViewProps } from "./types";
 
 let SkiaViewNativeId = 1000;
 
@@ -19,8 +19,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
     this._nativeId = SkiaViewNativeId++;
     const { onDraw } = props;
     if (onDraw) {
-      assertDrawCallbacksEnabled();
-      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
   }
 
@@ -33,8 +33,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
   componentDidUpdate(prevProps: SkiaViewProps) {
     const { onDraw } = this.props;
     if (onDraw !== prevProps.onDraw) {
-      assertDrawCallbacksEnabled();
-      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
   }
 
@@ -44,7 +44,7 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * @returns An Image object.
    */
   public makeImageSnapshot(rect?: SkRect) {
-    assertDrawCallbacksEnabled();
+    assertSkiaViewApi();
     return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
   }
 
@@ -52,22 +52,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * Sends a redraw request to the native SkiaView.
    */
   public redraw() {
-    assertDrawCallbacksEnabled();
-    SkiaViewApi.invalidateSkiaView(this._nativeId);
-  }
-
-  /**
-   * Updates the drawing mode for the skia view. This is the same
-   * as declaratively setting the mode property on the SkiaView.
-   * 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 size and margins.
-   * @param mode Drawing mode to use.
-   */
-  public setDrawMode(mode: DrawMode) {
-    assertDrawCallbacksEnabled();
-    SkiaViewApi.setDrawMode(this._nativeId, mode);
+    assertSkiaViewApi();
+    SkiaViewApi.requestRedraw(this._nativeId);
   }
 
   /**
@@ -75,8 +61,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * The view will redraw itself when any of the values change.
    * @param values Values to register
    */
-  public registerValues(values: SkiaValue<unknown>[]) {
-    assertDrawCallbacksEnabled();
+  public registerValues(values: SkiaValue<unknown>[]): () => void {
+    assertSkiaViewApi();
     return SkiaViewApi.registerValuesInView(this._nativeId, values);
   }
 
@@ -94,12 +80,15 @@ export class SkiaView extends React.Component<SkiaViewProps> {
   }
 }
 
-const assertDrawCallbacksEnabled = () => {
+const assertSkiaViewApi = () => {
   if (
     SkiaViewApi === null ||
-    SkiaViewApi.setDrawCallback == null ||
-    SkiaViewApi.invalidateSkiaView == null
+    SkiaViewApi.setJsiProperty === null ||
+    SkiaViewApi.callJsiMethod === null ||
+    SkiaViewApi.registerValuesInView === null ||
+    SkiaViewApi.requestRedraw === null ||
+    SkiaViewApi.makeImageSnapshot === null
   ) {
-    throw Error("Skia Api is not enabled.");
+    throw Error("Skia View Api was not found.");
   }
 };

package/src/views/types.ts

@@ -1,6 +1,6 @@
 import type { ViewProps } from "react-native";
 
-import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkCanvas, SkImage, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 export type DrawMode = "continuous" | "default";
@@ -58,17 +58,18 @@ export interface ValueListener {
 }
 
 export interface ISkiaViewApi {
-  invalidateSkiaView: (nativeId: number) => void;
-  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
-  setDrawCallback: (
+  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+  callJsiMethod: <T extends Array<unknown>>(
     nativeId: number,
-    callback: RNSkiaDrawCallback | undefined
+    name: string,
+    ...args: T
   ) => void;
-  setDrawMode: (nativeId: number, mode: DrawMode) => void;
   registerValuesInView: (
     nativeId: number,
     values: SkiaValue<unknown>[]
   ) => () => void;
+  requestRedraw: (nativeId: number) => void;
+  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
 
 export interface SkiaViewProps extends ViewProps {