@shopify/react-native-skia 0.1.232 → 0.1.234

package/lib/module/views/SkiaJSDomView.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Skia, SkRect } from "../skia/types";
+import type { SkiaDomViewProps } from "./types";
+export declare class SkiaJSDomView extends React.Component<SkiaDomViewProps & {
+    Skia: Skia;
+}> {
+    constructor(props: SkiaDomViewProps & {
+        Skia: Skia;
+    });
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDomViewProps & {
+        Skia: Skia;
+    }): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    private draw;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}

package/lib/module/views/SkiaJSDomView.js

@@ -0,0 +1,136 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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";
+import { Platform } from "../Platform";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { JsiDrawingContext } from "../dom/types";
+import { SkiaViewApi } from "./api";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
+const NativeSkiaPictureView = Platform.OS !== "web" ? SkiaPictureViewNativeComponent : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+null;
+export class SkiaJSDomView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "_nativeId", void 0);
+
+    this._nativeId = SkiaViewNativeId.current++;
+    const {
+      root,
+      onTouch,
+      onSize
+    } = props;
+
+    if (root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+
+    if (onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      root,
+      onTouch,
+      onSize
+    } = this.props;
+
+    if (root !== prevProps.root && root !== undefined) {
+      assertSkiaViewApi();
+      this.draw();
+    }
+
+    if (onTouch !== prevProps.onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+
+
+  makeImageSnapshot(rect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+
+
+  redraw() {
+    assertSkiaViewApi();
+    this.draw(); //SkiaViewApi.requestRedraw(this._nativeId);
+  }
+
+  draw() {
+    const {
+      root,
+      Skia
+    } = this.props;
+
+    if (root !== undefined) {
+      assertSkiaViewApi();
+      const rec = Skia.PictureRecorder();
+      const canvas = rec.beginRecording();
+      const ctx = new JsiDrawingContext(Skia, canvas);
+      root.render(ctx);
+      const picture = rec.finishRecordingAsPicture();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+  /**
+   * Clear up the dom node when unmounting to release resources.
+   */
+
+
+  componentWillUnmount() {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
+  }
+
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(NativeSkiaPictureView, _extends({
+      collapsable: false,
+      nativeID: `${this._nativeId}`,
+      mode: mode,
+      debug: debug
+    }, viewProps));
+  }
+
+}
+
+const assertSkiaViewApi = () => {
+  if (SkiaViewApi === null || SkiaViewApi.setJsiProperty === null || SkiaViewApi.callJsiMethod === null || SkiaViewApi.requestRedraw === null || SkiaViewApi.makeImageSnapshot === null) {
+    throw Error("Skia View Api was not found.");
+  }
+};
+//# sourceMappingURL=SkiaJSDomView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","SkiaPictureViewNativeComponent","JsiDrawingContext","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","OS","SkiaJSDomView","Component","constructor","props","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","undefined","draw","makeImageSnapshot","rect","redraw","Skia","rec","PictureRecorder","canvas","beginRecording","ctx","render","picture","finishRecordingAsPicture","componentWillUnmount","mode","debug","viewProps","callJsiMethod","requestRedraw","Error"],"sources":["SkiaJSDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { Skia, SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport { JsiDrawingContext } from \"../dom/types\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaPictureViewProps, SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaPictureViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaJSDomView extends React.Component<\n  SkiaDomViewProps & { Skia: Skia }\n> {\n  constructor(props: SkiaDomViewProps & { Skia: Skia }) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\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: SkiaDomViewProps & { Skia: Skia }) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root && root !== undefined) {\n      assertSkiaViewApi();\n      this.draw();\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\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    this.draw();\n    //SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  private draw() {\n    const { root, Skia } = this.props;\n    if (root !== undefined) {\n      assertSkiaViewApi();\n      const rec = Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      root.render(ctx);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\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.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,SAASC,QAAT,QAAyB,aAAzB;AACA,OAAOC,8BAAP,MAA2C,yCAA3C;AACA,SAASC,iBAAT,QAAkC,cAAlC;AAEA,SAASC,WAAT,QAA4B,OAA5B;AAEA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA,MAAMC,qBAA0D,GAC9DL,QAAQ,CAACM,EAAT,KAAgB,KAAhB,GACIL,8BADJ,GAEI;AACC,IAJP;AAMA,OAAO,MAAMM,aAAN,SAA4BR,KAAK,CAACS,SAAlC,CAEL;EACAC,WAAW,CAACC,KAAD,EAA2C;IACpD,MAAMA,KAAN;;IADoD;;IAEpD,KAAKC,SAAL,GAAiBP,gBAAgB,CAACQ,OAAjB,EAAjB;IACA,MAAM;MAAEC,IAAF;MAAQC,OAAR;MAAiBC;IAAjB,IAA4BL,KAAlC;;IACA,IAAIG,IAAJ,EAAU;MACRG,iBAAiB;MACjBb,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,MAA3C,EAAmDE,IAAnD;IACD;;IACD,IAAIC,OAAJ,EAAa;MACXE,iBAAiB;MACjBb,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,SAA3C,EAAsDG,OAAtD;IACD;;IACD,IAAIC,MAAJ,EAAY;MACVC,iBAAiB;MACjBb,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,QAA3C,EAAqDI,MAArD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKP,SAAZ;EACD;;EAEDQ,kBAAkB,CAACC,SAAD,EAA+C;IAC/D,MAAM;MAAEP,IAAF;MAAQC,OAAR;MAAiBC;IAAjB,IAA4B,KAAKL,KAAvC;;IACA,IAAIG,IAAI,KAAKO,SAAS,CAACP,IAAnB,IAA2BA,IAAI,KAAKQ,SAAxC,EAAmD;MACjDL,iBAAiB;MACjB,KAAKM,IAAL;IACD;;IACD,IAAIR,OAAO,KAAKM,SAAS,CAACN,OAA1B,EAAmC;MACjCE,iBAAiB;MACjBb,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,SAA3C,EAAsDG,OAAtD;IACD;;IACD,IAAIC,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBb,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,QAA3C,EAAqDI,MAArD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSQ,iBAAiB,CAACC,IAAD,EAAgB;IACtCR,iBAAiB;IACjB,OAAOb,WAAW,CAACoB,iBAAZ,CAA8B,KAAKZ,SAAnC,EAA8Ca,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdT,iBAAiB;IACjB,KAAKM,IAAL,GAFc,CAGd;EACD;;EAEOA,IAAI,GAAG;IACb,MAAM;MAAET,IAAF;MAAQa;IAAR,IAAiB,KAAKhB,KAA5B;;IACA,IAAIG,IAAI,KAAKQ,SAAb,EAAwB;MACtBL,iBAAiB;MACjB,MAAMW,GAAG,GAAGD,IAAI,CAACE,eAAL,EAAZ;MACA,MAAMC,MAAM,GAAGF,GAAG,CAACG,cAAJ,EAAf;MACA,MAAMC,GAAG,GAAG,IAAI7B,iBAAJ,CAAsBwB,IAAtB,EAA4BG,MAA5B,CAAZ;MACAhB,IAAI,CAACmB,MAAL,CAAYD,GAAZ;MACA,MAAME,OAAO,GAAGN,GAAG,CAACO,wBAAJ,EAAhB;MACA/B,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,SAA3C,EAAsDsB,OAAtD;IACD;EACF;EAED;AACF;AACA;;;EACEE,oBAAoB,GAAS;IAC3BnB,iBAAiB;IACjBb,WAAW,CAACc,cAAZ,CAA2B,KAAKN,SAAhC,EAA2C,SAA3C,EAAsD,IAAtD;EACD;;EAEDqB,MAAM,GAAG;IACP,MAAM;MAAEI,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAK5B,KAAnD;IACA,oBACE,oBAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEyB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AA5FD;;AA+FF,MAAMtB,iBAAiB,GAAG,MAAM;EAC9B,IACEb,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACc,cAAZ,KAA+B,IAD/B,IAEAd,WAAW,CAACoC,aAAZ,KAA8B,IAF9B,IAGApC,WAAW,CAACqC,aAAZ,KAA8B,IAH9B,IAIArC,WAAW,CAACoB,iBAAZ,KAAkC,IALpC,EAME;IACA,MAAMkB,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAVD"}

package/lib/module/views/SkiaJSDomView.web.d.ts

@@ -0,0 +1 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";

package/lib/module/views/SkiaJSDomView.web.js

@@ -0,0 +1,2 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";
+//# sourceMappingURL=SkiaJSDomView.web.js.map

package/lib/module/views/SkiaJSDomView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SkiaDomView","SkiaJSDomView"],"sources":["SkiaJSDomView.web.tsx"],"sourcesContent":["export { SkiaDomView as SkiaJSDomView } from \"./SkiaDomView\";\n"],"mappings":"AAAA,SAASA,WAAW,IAAIC,aAAxB,QAA6C,eAA7C"}

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

@@ -5,5 +5,6 @@ export declare class SkiaRoot {
     private container;
     constructor(Skia: Skia, redraw?: () => void, getNativeId?: () => number);
     render(element: ReactNode): void;
+    unmount(): void;
     get dom(): import("..").RenderNode<import("..").GroupProps>;
 }

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

@@ -1,5 +1,5 @@
 import type { CanvasKit, Path } from "canvaskit-wasm";
-import type { FillType, PathCommand, PathOp, SkMatrix, SkPath, SkPoint, SkRect, InputRRect, StrokeOpts } from "../types";
+import type { FillType, PathCommand, PathOp, SkMatrix, SkPath, SkPoint, SkRect, InputRRect, StrokeOpts, InputMatrix } from "../types";
 import { HostObject } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -51,7 +51,7 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     simplify(): boolean;
     toSVGString(): string;
     trim(start: number, stop: number, isComplement: boolean): this | null;
-    transform(m3: SkMatrix): this;
+    transform(m: InputMatrix): this;
     interpolate(end: SkPath, t: number, output?: SkPath): SkPath | JsiSkPath | null;
     isInterpolatable(path2: SkPath): boolean;
     toCmds(): PathCommand[];

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

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Skia, SkRect } from "../skia/types";
+import type { SkiaDomViewProps } from "./types";
+export declare class SkiaJSDomView extends React.Component<SkiaDomViewProps & {
+    Skia: Skia;
+}> {
+    constructor(props: SkiaDomViewProps & {
+        Skia: Skia;
+    });
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDomViewProps & {
+        Skia: Skia;
+    }): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    private draw;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}

package/lib/typescript/src/views/SkiaJSDomView.web.d.ts

@@ -0,0 +1 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";

package/package.json

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

package/src/external/reanimated/interpolators.ts

@@ -8,6 +8,7 @@ import { useCallback, useMemo } from "react";
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
+import { Platform } from "../../Platform";
 
 import {
   useAnimatedReaction,
@@ -18,7 +19,7 @@ import {
 
 export const notifyChange = (value: SharedValue<unknown>) => {
   "worklet";
-  if (_WORKLET) {
+  if (_WORKLET || Platform.OS === "web") {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (value as any)._value = value.value;
   }

package/src/renderer/Canvas.tsx

@@ -15,9 +15,9 @@ import type {
 import type { LayoutChangeEvent } from "react-native";
 
 import { SkiaDomView } from "../views";
-import { SkiaDomView as SkiaDomViewWeb } from "../views/SkiaDomView.web";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
+import { SkiaJSDomView } from "../views/SkiaJSDomView";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -84,6 +84,12 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       root.render(children);
     }, [children, root, redraw]);
 
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
+
     if (NATIVE_DOM) {
       return (
         <SkiaDomView
@@ -99,7 +105,8 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       );
     } else {
       return (
-        <SkiaDomViewWeb
+        <SkiaJSDomView
+          Skia={Skia}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}

package/src/renderer/HostConfig.ts

@@ -82,7 +82,7 @@ export const skHostConfig: SkiaHostConfig = {
   noTimeout: -1,
 
   appendChildToContainer(container, child) {
-    debug("appendChildToContainer", container, child);
+    debug("appendChildToContainer");
     appendNode(container.root, child);
   },
 

package/src/renderer/Reconciler.tsx

@@ -44,6 +44,10 @@ export class SkiaRoot {
     });
   }
 
+  unmount() {
+    skiaReconciler.updateContainer(null, this.root, null, () => {});
+  }
+
   get dom() {
     return this.container.root;
   }

package/src/skia/types/Shader/Shader.ts

@@ -40,7 +40,7 @@ export const processUniforms = (
   for (let i = 0; i < uniformsCount; i++) {
     const name = source.getUniformName(i);
     const value = uniforms[name];
-    if (!value === undefined) {
+    if (value === undefined) {
       throw new Error(
         // eslint-disable-next-line max-len
         `The runtime effect has the uniform value "${name}" declared, but it is missing from the uniforms property of the Runtime effect.`

package/src/skia/web/JsiSkPath.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, Path } from "canvaskit-wasm";
+import type { CanvasKit, Matrix3x3, Path } from "canvaskit-wasm";
 
 import { PathVerb } from "../types";
 import type {
@@ -11,6 +11,7 @@ import type {
   SkRect,
   InputRRect,
   StrokeOpts,
+  InputMatrix,
 } from "../types";
 
 import { getEnum, HostObject, optEnum } from "./Host";
@@ -339,8 +340,27 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     return result === null ? result : this;
   }
 
-  transform(m3: SkMatrix) {
-    this.ref.transform(Array.isArray(m3) ? m3 : JsiSkMatrix.fromValue(m3));
+  transform(m: InputMatrix) {
+    let matrix =
+      m instanceof JsiSkMatrix
+        ? Array.from(JsiSkMatrix.fromValue<Matrix3x3>(m))
+        : (m as Exclude<InputMatrix, SkMatrix>);
+    if (matrix.length === 16) {
+      matrix = [
+        matrix[0],
+        matrix[1],
+        matrix[3],
+        matrix[4],
+        matrix[5],
+        matrix[7],
+        matrix[12],
+        matrix[13],
+        matrix[15],
+      ];
+    } else if (matrix.length !== 9) {
+      throw new Error(`Invalid matrix length: ${matrix.length}`);
+    }
+    this.ref.transform(matrix);
     return this;
   }
 

package/src/views/SkiaJSDomView.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import type { HostComponent } from "react-native";
+
+import type { Skia, SkRect } from "../skia/types";
+import { Platform } from "../Platform";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { JsiDrawingContext } from "../dom/types";
+
+import { SkiaViewApi } from "./api";
+import type { SkiaPictureViewProps, SkiaDomViewProps } from "./types";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
+
+const NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =
+  Platform.OS !== "web"
+    ? SkiaPictureViewNativeComponent
+    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (null as any);
+
+export class SkiaJSDomView extends React.Component<
+  SkiaDomViewProps & { Skia: Skia }
+> {
+  constructor(props: SkiaDomViewProps & { Skia: Skia }) {
+    super(props);
+    this._nativeId = SkiaViewNativeId.current++;
+    const { root, onTouch, onSize } = props;
+    if (root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  private _nativeId: number;
+
+  public get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {
+    const { root, onTouch, onSize } = this.props;
+    if (root !== prevProps.root && root !== undefined) {
+      assertSkiaViewApi();
+      this.draw();
+    }
+    if (onTouch !== prevProps.onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  public makeImageSnapshot(rect?: SkRect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  public redraw() {
+    assertSkiaViewApi();
+    this.draw();
+    //SkiaViewApi.requestRedraw(this._nativeId);
+  }
+
+  private draw() {
+    const { root, Skia } = this.props;
+    if (root !== undefined) {
+      assertSkiaViewApi();
+      const rec = Skia.PictureRecorder();
+      const canvas = rec.beginRecording();
+      const ctx = new JsiDrawingContext(Skia, canvas);
+      root.render(ctx);
+      const picture = rec.finishRecordingAsPicture();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+
+  /**
+   * Clear up the dom node when unmounting to release resources.
+   */
+  componentWillUnmount(): void {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
+  }
+
+  render() {
+    const { mode, debug = false, ...viewProps } = this.props;
+    return (
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${this._nativeId}`}
+        mode={mode}
+        debug={debug}
+        {...viewProps}
+      />
+    );
+  }
+}
+
+const assertSkiaViewApi = () => {
+  if (
+    SkiaViewApi === null ||
+    SkiaViewApi.setJsiProperty === null ||
+    SkiaViewApi.callJsiMethod === null ||
+    SkiaViewApi.requestRedraw === null ||
+    SkiaViewApi.makeImageSnapshot === null
+  ) {
+    throw Error("Skia View Api was not found.");
+  }
+};

package/src/views/SkiaJSDomView.web.tsx

@@ -0,0 +1 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";

package/android/cpp/jni/include/JniSkiaDrawView.h

@@ -1,90 +0,0 @@
-#pragma once
-
-#include <memory>
-#include <string>
-
-#include <fbjni/fbjni.h>
-#include <jni.h>
-#include <jsi/jsi.h>
-
-#include <JniSkiaBaseView.h>
-#include <JniSkiaManager.h>
-#include <RNSkAndroidView.h>
-#include <RNSkJsView.h>
-
-#include <android/native_window.h>
-#include <android/native_window_jni.h>
-#include <fbjni/detail/Hybrid.h>
-
-namespace RNSkia {
-namespace jsi = facebook::jsi;
-namespace jni = facebook::jni;
-
-class JniSkiaDrawView : public jni::HybridClass<JniSkiaDrawView>,
-                        public JniSkiaBaseView {
-public:
-  static auto constexpr kJavaDescriptor =
-      "Lcom/shopify/reactnative/skia/SkiaDrawView;";
-
-  static jni::local_ref<jhybriddata>
-  initHybrid(jni::alias_ref<jhybridobject> jThis,
-             jni::alias_ref<JniSkiaManager::javaobject> skiaManager) {
-    return makeCxxInstance(jThis, skiaManager);
-  }
-
-  static void registerNatives() {
-    registerHybrid(
-        {makeNativeMethod("initHybrid", JniSkiaDrawView::initHybrid),
-         makeNativeMethod("surfaceAvailable",
-                          JniSkiaDrawView::surfaceAvailable),
-         makeNativeMethod("surfaceDestroyed",
-                          JniSkiaDrawView::surfaceDestroyed),
-         makeNativeMethod("surfaceSizeChanged",
-                          JniSkiaDrawView::surfaceSizeChanged),
-         makeNativeMethod("setMode", JniSkiaDrawView::setMode),
-         makeNativeMethod("setDebugMode", JniSkiaDrawView::setDebugMode),
-         makeNativeMethod("updateTouchPoints",
-                          JniSkiaDrawView::updateTouchPoints),
-         makeNativeMethod("registerView", JniSkiaDrawView::registerView),
-         makeNativeMethod("unregisterView", JniSkiaDrawView::unregisterView)});
-  }
-
-protected:
-  void updateTouchPoints(jni::JArrayDouble touches) override {
-    JniSkiaBaseView::updateTouchPoints(touches);
-  }
-
-  void surfaceAvailable(jobject surface, int width, int height) override {
-    JniSkiaBaseView::surfaceAvailable(surface, width, height);
-  }
-
-  void surfaceSizeChanged(int width, int height) override {
-    JniSkiaBaseView::surfaceSizeChanged(width, height);
-  }
-
-  void surfaceDestroyed() override { JniSkiaBaseView::surfaceDestroyed(); }
-
-  void setMode(std::string mode) override { JniSkiaBaseView::setMode(mode); }
-
-  void setDebugMode(bool show) override { JniSkiaBaseView::setDebugMode(show); }
-
-  void registerView(int nativeId) override {
-    JniSkiaBaseView::registerView(nativeId);
-  }
-
-  void unregisterView() override { JniSkiaBaseView::unregisterView(); }
-
-private:
-  friend HybridBase;
-
-  explicit JniSkiaDrawView(
-      jni::alias_ref<jhybridobject> jThis,
-      jni::alias_ref<JniSkiaManager::javaobject> skiaManager)
-      : JniSkiaBaseView(skiaManager,
-                        std::make_shared<RNSkAndroidView<RNSkia::RNSkJsView>>(
-                            skiaManager->cthis()->getPlatformContext())) {}
-
-  jni::global_ref<javaobject> javaPart_;
-};
-
-} // namespace RNSkia