@shopify/react-native-skia 0.1.189 → 0.1.191

package/lib/module/Platform/Platform.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","PixelRatio","requireNativeComponent","Platform","RNPlatform","findNodeHandle","NativeModules","View","isRNModule","OS","get","resolveAsset","source","resolveAssetSource","uri","default"],"sources":["Platform.ts"],"sourcesContent":["import {\n  Image,\n  PixelRatio,\n  requireNativeComponent,\n  Platform as RNPlatform,\n  findNodeHandle,\n  NativeModules,\n  View,\n} from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\nexport const Platform: IPlatform = {\n  OS: RNPlatform.OS,\n  PixelRatio: PixelRatio.get(),\n  requireNativeComponent,\n  resolveAsset: (source: DataModule) => {\n    return isRNModule(source)\n      ? Image.resolveAssetSource(source).uri\n      : source.default;\n  },\n  findNodeHandle,\n  NativeModules,\n  View,\n};\n"],"mappings":"AAAA,SACEA,KADF,EAEEC,UAFF,EAGEC,sBAHF,EAIEC,QAAQ,IAAIC,UAJd,EAKEC,cALF,EAMEC,aANF,EAOEC,IAPF,QAQO,cARP;AAWA,SAASC,UAAT,QAA2B,eAA3B;AAIA,OAAO,MAAML,QAAmB,GAAG;EACjCM,EAAE,EAAEL,UAAU,CAACK,EADkB;EAEjCR,UAAU,EAAEA,UAAU,CAACS,GAAX,EAFqB;EAGjCR,sBAHiC;EAIjCS,YAAY,EAAGC,MAAD,IAAwB;IACpC,OAAOJ,UAAU,CAACI,MAAD,CAAV,GACHZ,KAAK,CAACa,kBAAN,CAAyBD,MAAzB,EAAiCE,GAD9B,GAEHF,MAAM,CAACG,OAFX;EAGD,CARgC;EASjCV,cATiC;EAUjCC,aAViC;EAWjCC;AAXiC,CAA5B"}

package/lib/module/Platform/Platform.web.d.ts

@@ -0,0 +1,2 @@
+import type { IPlatform } from "./IPlatform";
+export declare const Platform: IPlatform;

package/lib/module/Platform/Platform.web.js

@@ -0,0 +1,143 @@
+import React, { useLayoutEffect, useMemo, useRef } from "react";
+import { isRNModule } from "../skia/types";
+// eslint-disable-next-line max-len
+// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
+const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
+let resizeObserver = null;
+
+const getObserver = () => {
+  if (resizeObserver == null) {
+    resizeObserver = new window.ResizeObserver(function (entries) {
+      entries.forEach(entry => {
+        const node = entry.target;
+        const {
+          left,
+          top,
+          width,
+          height
+        } = entry.contentRect;
+        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
+
+        if (typeof onLayout === "function") {
+          // setTimeout 0 is taken from react-native-web (UIManager)
+          setTimeout(() => onLayout({
+            timeStamp: Date.now(),
+            nativeEvent: {
+              layout: {
+                x: left,
+                y: top,
+                width,
+                height
+              }
+            },
+            currentTarget: 0,
+            target: 0,
+            bubbles: false,
+            cancelable: false,
+            defaultPrevented: false,
+            eventPhase: 0,
+
+            isDefaultPrevented() {
+              throw new Error("Method not supported on web.");
+            },
+
+            isPropagationStopped() {
+              throw new Error("Method not supported on web.");
+            },
+
+            persist() {
+              throw new Error("Method not supported on web.");
+            },
+
+            preventDefault() {
+              throw new Error("Method not supported on web.");
+            },
+
+            stopPropagation() {
+              throw new Error("Method not supported on web.");
+            },
+
+            isTrusted: true,
+            type: ""
+          }), 0);
+        }
+      });
+    });
+  }
+
+  return resizeObserver;
+};
+
+const useElementLayout = (ref, onLayout) => {
+  const observer = getObserver();
+  useLayoutEffect(() => {
+    const node = ref.current;
+
+    if (node !== null) {
+      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
+    }
+  }, [ref, onLayout]);
+  useLayoutEffect(() => {
+    const node = ref.current;
+
+    if (node != null && observer != null) {
+      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
+        observer.observe(node);
+      } else {
+        observer.unobserve(node);
+      }
+    }
+
+    return () => {
+      if (node != null && observer != null) {
+        observer.unobserve(node);
+      }
+    };
+  }, [observer, ref]);
+};
+
+const View = _ref => {
+  let {
+    children,
+    onLayout,
+    style: rawStyle
+  } = _ref;
+  const style = useMemo(() => rawStyle !== null && rawStyle !== void 0 ? rawStyle : {}, [rawStyle]);
+  const ref = useRef(null);
+  useElementLayout(ref, onLayout);
+  const cssStyles = useMemo(() => {
+    return { ...style,
+      display: "flex",
+      flexDirection: style.flexDirection || "inherit",
+      flexWrap: style.flexWrap || "nowrap",
+      justifyContent: style.justifyContent || "flex-start",
+      alignItems: style.alignItems || "stretch",
+      alignContent: style.alignContent || "stretch"
+    };
+  }, [style]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: cssStyles
+  }, children);
+};
+
+export const Platform = {
+  OS: "web",
+  PixelRatio: window.devicePixelRatio,
+  requireNativeComponent: () => {
+    throw new Error("requireNativeComponent is not supported on the web");
+  },
+  resolveAsset: source => {
+    if (isRNModule(source)) {
+      throw new Error("Image source is a number - this is not supported on the web");
+    }
+
+    return source.default;
+  },
+  findNodeHandle: () => {
+    throw new Error("findNodeHandle is not supported on the web");
+  },
+  NativeModules: {},
+  View
+};
+//# sourceMappingURL=Platform.web.js.map

package/lib/module/Platform/Platform.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useLayoutEffect","useMemo","useRef","isRNModule","DOM_LAYOUT_HANDLER_NAME","resizeObserver","getObserver","window","ResizeObserver","entries","forEach","entry","node","target","left","top","width","height","contentRect","onLayout","setTimeout","timeStamp","Date","now","nativeEvent","layout","x","y","currentTarget","bubbles","cancelable","defaultPrevented","eventPhase","isDefaultPrevented","Error","isPropagationStopped","persist","preventDefault","stopPropagation","isTrusted","type","useElementLayout","ref","observer","current","observe","unobserve","View","children","style","rawStyle","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","Platform","OS","PixelRatio","devicePixelRatio","requireNativeComponent","resolveAsset","source","default","findNodeHandle","NativeModules"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { RefObject, CSSProperties } from \"react\";\nimport React, { useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { LayoutChangeEvent, ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// eslint-disable-next-line max-len\n// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js\nconst DOM_LAYOUT_HANDLER_NAME = \"__reactLayoutHandler\";\ntype OnLayout = ((event: LayoutChangeEvent) => void) | undefined;\ntype Div = HTMLDivElement & {\n  __reactLayoutHandler: OnLayout;\n};\n\nlet resizeObserver: ResizeObserver | null = null;\n\nconst getObserver = () => {\n  if (resizeObserver == null) {\n    resizeObserver = new window.ResizeObserver(function (entries) {\n      entries.forEach((entry) => {\n        const node = entry.target as Div;\n        const { left, top, width, height } = entry.contentRect;\n        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];\n        if (typeof onLayout === \"function\") {\n          // setTimeout 0 is taken from react-native-web (UIManager)\n          setTimeout(\n            () =>\n              onLayout({\n                timeStamp: Date.now(),\n                nativeEvent: { layout: { x: left, y: top, width, height } },\n                currentTarget: 0,\n                target: 0,\n                bubbles: false,\n                cancelable: false,\n                defaultPrevented: false,\n                eventPhase: 0,\n                isDefaultPrevented() {\n                  throw new Error(\"Method not supported on web.\");\n                },\n                isPropagationStopped() {\n                  throw new Error(\"Method not supported on web.\");\n                },\n                persist() {\n                  throw new Error(\"Method not supported on web.\");\n                },\n                preventDefault() {\n                  throw new Error(\"Method not supported on web.\");\n                },\n                stopPropagation() {\n                  throw new Error(\"Method not supported on web.\");\n                },\n                isTrusted: true,\n                type: \"\",\n              }),\n            0\n          );\n        }\n      });\n    });\n  }\n  return resizeObserver;\n};\n\nconst useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {\n  const observer = getObserver();\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (node !== null) {\n      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;\n    }\n  }, [ref, onLayout]);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null && observer != null) {\n      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === \"function\") {\n        observer.observe(node);\n      } else {\n        observer.unobserve(node);\n      }\n    }\n    return () => {\n      if (node != null && observer != null) {\n        observer.unobserve(node);\n      }\n    };\n  }, [observer, ref]);\n};\n\nconst View = (({ children, onLayout, style: rawStyle }: ViewProps) => {\n  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n  const ref = useRef<Div>(null);\n  useElementLayout(ref, onLayout);\n  const cssStyles = useMemo(() => {\n    return {\n      ...style,\n      display: \"flex\",\n      flexDirection: style.flexDirection || \"inherit\",\n      flexWrap: style.flexWrap || \"nowrap\",\n      justifyContent: style.justifyContent || \"flex-start\",\n      alignItems: style.alignItems || \"stretch\",\n      alignContent: style.alignContent || \"stretch\",\n    };\n  }, [style]);\n\n  return (\n    <div ref={ref} style={cssStyles}>\n      {children}\n    </div>\n  );\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n  OS: \"web\",\n  PixelRatio: window.devicePixelRatio,\n  requireNativeComponent: () => {\n    throw new Error(\"requireNativeComponent is not supported on the web\");\n  },\n  resolveAsset: (source: DataModule) => {\n    if (isRNModule(source)) {\n      throw new Error(\n        \"Image source is a number - this is not supported on the web\"\n      );\n    }\n    return source.default;\n  },\n  findNodeHandle: () => {\n    throw new Error(\"findNodeHandle is not supported on the web\");\n  },\n  NativeModules: {},\n  View,\n};\n"],"mappings":"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"}

package/lib/module/Platform/index.d.ts

@@ -0,0 +1 @@
+export * from "./Platform";

package/lib/module/Platform/index.js

@@ -0,0 +1,2 @@
+export * from "./Platform";
+//# sourceMappingURL=index.js.map

package/lib/module/Platform/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Platform\";\n"],"mappings":"AAAA,cAAc,YAAd"}

package/lib/module/dom/nodes/drawings/ImageSVG.d.ts

@@ -1,8 +1,13 @@
 import type { DrawingContext, ImageSVGProps } from "../../types";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
-export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
+export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, Pick<ImageSVGProps, "x" | "y" | "width" | "height">> {
     constructor(ctx: NodeContext, props: ImageSVGProps);
-    deriveProps(): null;
+    deriveProps(): import("../../..").SkRect | {
+        x: number | undefined;
+        y: number | undefined;
+        width: number | undefined;
+        height: number | undefined;
+    };
     draw({ canvas }: DrawingContext): void;
 }

package/lib/module/dom/nodes/drawings/ImageSVG.js

@@ -1,5 +1,4 @@
 import { NodeType } from "../../types";
-import { processRect } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 export class ImageSVGNode extends JsiDrawingNode {
   constructor(ctx, props) {
@@ -7,7 +6,22 @@ export class ImageSVGNode extends JsiDrawingNode {
   }
 
   deriveProps() {
-    return null;
+    if (this.props.rect) {
+      return this.props.rect;
+    }
+
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props;
+    return {
+      x,
+      y,
+      width,
+      height
+    };
   }
 
   draw(_ref) {
@@ -18,8 +32,8 @@ export class ImageSVGNode extends JsiDrawingNode {
       svg
     } = this.props;
 
-    if (!svg) {
-      return;
+    if (!this.derived) {
+      throw new Error("ImageSVGNode: derived props unresolved");
     }
 
     const {
@@ -27,9 +41,18 @@ export class ImageSVGNode extends JsiDrawingNode {
       y,
       width,
       height
-    } = processRect(this.Skia, this.props);
+    } = this.derived;
+
+    if (svg === null) {
+      return;
+    }
+
     canvas.save();
-    canvas.translate(x, y);
+
+    if (x && y) {
+      canvas.translate(x, y);
+    }
+
     canvas.drawSvg(svg, width, height);
     canvas.restore();
   }

package/lib/module/dom/nodes/drawings/ImageSVG.js.map

@@ -1 +1 @@
-{"version":3,"names":["NodeType","processRect","JsiDrawingNode","ImageSVGNode","constructor","ctx","props","ImageSVG","deriveProps","draw","canvas","svg","x","y","width","height","Skia","save","translate","drawSvg","restore"],"sources":["ImageSVG.ts"],"sourcesContent":["import type { DrawingContext, ImageSVGProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { processRect } from \"../datatypes\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {\n  constructor(ctx: NodeContext, props: ImageSVGProps) {\n    super(ctx, NodeType.ImageSVG, props);\n  }\n\n  deriveProps() {\n    return null;\n  }\n\n  draw({ canvas }: DrawingContext) {\n    const { svg } = this.props;\n    if (!svg) {\n      return;\n    }\n    const { x, y, width, height } = processRect(this.Skia, this.props);\n    canvas.save();\n    canvas.translate(x, y);\n    canvas.drawSvg(svg, width, height);\n    canvas.restore();\n  }\n}\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,WAAT,QAA4B,cAA5B;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,YAAN,SAA2BD,cAA3B,CAA+D;EACpEE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWL,QAAQ,CAACO,QAApB,EAA8BD,KAA9B;EACD;;EAEDE,WAAW,GAAG;IACZ,OAAO,IAAP;EACD;;EAEDC,IAAI,OAA6B;IAAA,IAA5B;MAAEC;IAAF,CAA4B;IAC/B,MAAM;MAAEC;IAAF,IAAU,KAAKL,KAArB;;IACA,IAAI,CAACK,GAAL,EAAU;MACR;IACD;;IACD,MAAM;MAAEC,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0Bd,WAAW,CAAC,KAAKe,IAAN,EAAY,KAAKV,KAAjB,CAA3C;IACAI,MAAM,CAACO,IAAP;IACAP,MAAM,CAACQ,SAAP,CAAiBN,CAAjB,EAAoBC,CAApB;IACAH,MAAM,CAACS,OAAP,CAAeR,GAAf,EAAoBG,KAApB,EAA2BC,MAA3B;IACAL,MAAM,CAACU,OAAP;EACD;;AAnBmE"}
+{"version":3,"names":["NodeType","JsiDrawingNode","ImageSVGNode","constructor","ctx","props","ImageSVG","deriveProps","rect","x","y","width","height","draw","canvas","svg","derived","Error","save","translate","drawSvg","restore"],"sources":["ImageSVG.ts"],"sourcesContent":["import type { DrawingContext, ImageSVGProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class ImageSVGNode extends JsiDrawingNode<\n  ImageSVGProps,\n  Pick<ImageSVGProps, \"x\" | \"y\" | \"width\" | \"height\">\n> {\n  constructor(ctx: NodeContext, props: ImageSVGProps) {\n    super(ctx, NodeType.ImageSVG, props);\n  }\n\n  deriveProps() {\n    if (this.props.rect) {\n      return this.props.rect;\n    }\n    const { x, y, width, height } = this.props;\n    return { x, y, width, height };\n  }\n\n  draw({ canvas }: DrawingContext) {\n    const { svg } = this.props;\n    if (!this.derived) {\n      throw new Error(\"ImageSVGNode: derived props unresolved\");\n    }\n    const { x, y, width, height } = this.derived;\n    if (svg === null) {\n      return;\n    }\n    canvas.save();\n    if (x && y) {\n      canvas.translate(x, y);\n    }\n    canvas.drawSvg(svg, width, height);\n    canvas.restore();\n  }\n}\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,YAAN,SAA2BD,cAA3B,CAGL;EACAE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWJ,QAAQ,CAACM,QAApB,EAA8BD,KAA9B;EACD;;EAEDE,WAAW,GAAG;IACZ,IAAI,KAAKF,KAAL,CAAWG,IAAf,EAAqB;MACnB,OAAO,KAAKH,KAAL,CAAWG,IAAlB;IACD;;IACD,MAAM;MAAEC,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0B,KAAKP,KAArC;IACA,OAAO;MAAEI,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,CAAP;EACD;;EAEDC,IAAI,OAA6B;IAAA,IAA5B;MAAEC;IAAF,CAA4B;IAC/B,MAAM;MAAEC;IAAF,IAAU,KAAKV,KAArB;;IACA,IAAI,CAAC,KAAKW,OAAV,EAAmB;MACjB,MAAM,IAAIC,KAAJ,CAAU,wCAAV,CAAN;IACD;;IACD,MAAM;MAAER,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0B,KAAKI,OAArC;;IACA,IAAID,GAAG,KAAK,IAAZ,EAAkB;MAChB;IACD;;IACDD,MAAM,CAACI,IAAP;;IACA,IAAIT,CAAC,IAAIC,CAAT,EAAY;MACVI,MAAM,CAACK,SAAP,CAAiBV,CAAjB,EAAoBC,CAApB;IACD;;IACDI,MAAM,CAACM,OAAP,CAAeL,GAAf,EAAoBJ,KAApB,EAA2BC,MAA3B;IACAE,MAAM,CAACO,OAAP;EACD;;AA5BD"}

package/lib/module/dom/nodes/drawings/PathNode.js

@@ -1,3 +1,4 @@
+import { saturate } from "../../../renderer/processors/math";
 import { FillType } from "../../../skia/types";
 import { NodeType } from "../../types";
 import { enumKey, processPath } from "../datatypes";
@@ -9,12 +10,14 @@ export class PathNode extends JsiDrawingNode {
 
   deriveProps() {
     const {
-      start,
-      end,
+      start: trimStart,
+      end: trimEnd,
       fillType,
       stroke,
       ...pathProps
     } = this.props;
+    const start = saturate(trimStart);
+    const end = saturate(trimEnd);
     const hasStartOffset = start !== 0;
     const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;

package/lib/module/dom/nodes/drawings/PathNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["FillType","NodeType","enumKey","processPath","JsiDrawingNode","PathNode","constructor","ctx","props","Path","deriveProps","start","end","fillType","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","Skia","path","copy","setFillType","trim","draw","canvas","paint","derived","Error","drawPath"],"sources":["PathNode.ts"],"sourcesContent":["import { FillType } from \"../../../skia/types\";\nimport type { SkPath } from \"../../../skia/types\";\nimport type { DrawingContext, PathProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { enumKey, processPath } from \"../datatypes\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class PathNode extends JsiDrawingNode<PathProps, SkPath> {\n  constructor(ctx: NodeContext, props: PathProps) {\n    super(ctx, NodeType.Path, props);\n  }\n\n  protected deriveProps() {\n    const { start, end, fillType, stroke, ...pathProps } = this.props;\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = end !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const hasFillType = !!fillType;\n    const willMutatePath =\n      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;\n    const pristinePath = processPath(this.Skia, pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasFillType) {\n      path.setFillType(FillType[enumKey(fillType)]);\n    }\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    return path;\n  }\n\n  draw({ canvas, paint }: DrawingContext) {\n    if (!this.derived) {\n      throw new Error(\"Path not initialized\");\n    }\n    canvas.drawPath(this.derived, paint);\n  }\n}\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,qBAAzB;AAGA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,OAAT,EAAkBC,WAAlB,QAAqC,cAArC;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,QAAN,SAAuBD,cAAvB,CAAyD;EAC9DE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAqC;IAC9C,MAAMD,GAAN,EAAWN,QAAQ,CAACQ,IAApB,EAA0BD,KAA1B;EACD;;EAESE,WAAW,GAAG;IACtB,MAAM;MAAEC,KAAF;MAASC,GAAT;MAAcC,QAAd;MAAwBC,MAAxB;MAAgC,GAAGC;IAAnC,IAAiD,KAAKP,KAA5D;IACA,MAAMQ,cAAc,GAAGL,KAAK,KAAK,CAAjC;IACA,MAAMM,YAAY,GAAGL,GAAG,KAAK,CAA7B;IACA,MAAMM,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;IACA,MAAMC,WAAW,GAAG,CAAC,CAACP,QAAtB;IACA,MAAMQ,cAAc,GAClBL,cAAc,IAAIC,YAAlB,IAAkCC,gBAAlC,IAAsDE,WADxD;IAEA,MAAME,YAAY,GAAGnB,WAAW,CAAC,KAAKoB,IAAN,EAAYR,SAAS,CAACS,IAAtB,CAAhC;IACA,MAAMA,IAAI,GAAGH,cAAc,GAAGC,YAAY,CAACG,IAAb,EAAH,GAAyBH,YAApD;;IACA,IAAIF,WAAJ,EAAiB;MACfI,IAAI,CAACE,WAAL,CAAiB1B,QAAQ,CAACE,OAAO,CAACW,QAAD,CAAR,CAAzB;IACD;;IACD,IAAIK,gBAAJ,EAAsB;MACpBM,IAAI,CAACV,MAAL,CAAYA,MAAZ;IACD;;IACD,IAAIE,cAAc,IAAIC,YAAtB,EAAoC;MAClCO,IAAI,CAACG,IAAL,CAAUhB,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;IACD;;IACD,OAAOY,IAAP;EACD;;EAEDI,IAAI,OAAoC;IAAA,IAAnC;MAAEC,MAAF;MAAUC;IAAV,CAAmC;;IACtC,IAAI,CAAC,KAAKC,OAAV,EAAmB;MACjB,MAAM,IAAIC,KAAJ,CAAU,sBAAV,CAAN;IACD;;IACDH,MAAM,CAACI,QAAP,CAAgB,KAAKF,OAArB,EAA8BD,KAA9B;EACD;;AAhC6D"}
+{"version":3,"names":["saturate","FillType","NodeType","enumKey","processPath","JsiDrawingNode","PathNode","constructor","ctx","props","Path","deriveProps","start","trimStart","end","trimEnd","fillType","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","Skia","path","copy","setFillType","trim","draw","canvas","paint","derived","Error","drawPath"],"sources":["PathNode.ts"],"sourcesContent":["import { saturate } from \"../../../renderer/processors/math\";\nimport { FillType } from \"../../../skia/types\";\nimport type { SkPath } from \"../../../skia/types\";\nimport type { DrawingContext, PathProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { enumKey, processPath } from \"../datatypes\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class PathNode extends JsiDrawingNode<PathProps, SkPath> {\n  constructor(ctx: NodeContext, props: PathProps) {\n    super(ctx, NodeType.Path, props);\n  }\n\n  protected deriveProps() {\n    const {\n      start: trimStart,\n      end: trimEnd,\n      fillType,\n      stroke,\n      ...pathProps\n    } = this.props;\n    const start = saturate(trimStart);\n    const end = saturate(trimEnd);\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = end !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const hasFillType = !!fillType;\n    const willMutatePath =\n      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;\n    const pristinePath = processPath(this.Skia, pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasFillType) {\n      path.setFillType(FillType[enumKey(fillType)]);\n    }\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    return path;\n  }\n\n  draw({ canvas, paint }: DrawingContext) {\n    if (!this.derived) {\n      throw new Error(\"Path not initialized\");\n    }\n    canvas.drawPath(this.derived, paint);\n  }\n}\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,mCAAzB;AACA,SAASC,QAAT,QAAyB,qBAAzB;AAGA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,OAAT,EAAkBC,WAAlB,QAAqC,cAArC;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,QAAN,SAAuBD,cAAvB,CAAyD;EAC9DE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAqC;IAC9C,MAAMD,GAAN,EAAWN,QAAQ,CAACQ,IAApB,EAA0BD,KAA1B;EACD;;EAESE,WAAW,GAAG;IACtB,MAAM;MACJC,KAAK,EAAEC,SADH;MAEJC,GAAG,EAAEC,OAFD;MAGJC,QAHI;MAIJC,MAJI;MAKJ,GAAGC;IALC,IAMF,KAAKT,KANT;IAOA,MAAMG,KAAK,GAAGZ,QAAQ,CAACa,SAAD,CAAtB;IACA,MAAMC,GAAG,GAAGd,QAAQ,CAACe,OAAD,CAApB;IACA,MAAMI,cAAc,GAAGP,KAAK,KAAK,CAAjC;IACA,MAAMQ,YAAY,GAAGN,GAAG,KAAK,CAA7B;IACA,MAAMO,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;IACA,MAAMC,WAAW,GAAG,CAAC,CAACP,QAAtB;IACA,MAAMQ,cAAc,GAClBL,cAAc,IAAIC,YAAlB,IAAkCC,gBAAlC,IAAsDE,WADxD;IAEA,MAAME,YAAY,GAAGrB,WAAW,CAAC,KAAKsB,IAAN,EAAYR,SAAS,CAACS,IAAtB,CAAhC;IACA,MAAMA,IAAI,GAAGH,cAAc,GAAGC,YAAY,CAACG,IAAb,EAAH,GAAyBH,YAApD;;IACA,IAAIF,WAAJ,EAAiB;MACfI,IAAI,CAACE,WAAL,CAAiB5B,QAAQ,CAACE,OAAO,CAACa,QAAD,CAAR,CAAzB;IACD;;IACD,IAAIK,gBAAJ,EAAsB;MACpBM,IAAI,CAACV,MAAL,CAAYA,MAAZ;IACD;;IACD,IAAIE,cAAc,IAAIC,YAAtB,EAAoC;MAClCO,IAAI,CAACG,IAAL,CAAUlB,KAAV,EAAiBE,GAAjB,EAAsB,KAAtB;IACD;;IACD,OAAOa,IAAP;EACD;;EAEDI,IAAI,OAAoC;IAAA,IAAnC;MAAEC,MAAF;MAAUC;IAAV,CAAmC;;IACtC,IAAI,CAAC,KAAKC,OAAV,EAAmB;MACjB,MAAM,IAAIC,KAAJ,CAAU,sBAAV,CAAN;IACD;;IACDH,MAAM,CAACI,QAAP,CAAgB,KAAKF,OAArB,EAA8BD,KAA9B;EACD;;AAxC6D"}

package/lib/module/dom/types/Drawings.d.ts

@@ -50,9 +50,14 @@ export interface VerticesProps extends DrawingNodeProps {
     blendMode?: SkEnum<typeof BlendMode>;
     indices?: number[];
 }
-export declare type ImageSVGProps = RectDef & {
+export interface ImageSVGProps extends DrawingNodeProps {
     svg: SkSVG | null;
-} & DrawingNodeProps;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    rect?: SkRect;
+}
 export interface PictureProps extends DrawingNodeProps {
     picture: SkPicture;
 }

package/lib/module/dom/types/Drawings.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n  FillType,\n  SkImage,\n  StrokeOpts,\n  Vector,\n  Color,\n  SkPoint,\n  BlendMode,\n  PointMode,\n  VertexMode,\n  SkFont,\n  SkRRect,\n  SkTextBlob,\n  SkPicture,\n  SkSVG,\n  SkPaint,\n  SkRect,\n} from \"../../skia/types\";\n\nimport type {\n  CircleDef,\n  Fit,\n  GroupProps,\n  PathDef,\n  RectDef,\n  RRectDef,\n  SkEnum,\n} from \"./Common\";\nimport type { DrawingContext } from \"./DrawingContext\";\n\nexport interface DrawingNodeProps extends GroupProps {\n  paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n  RectDef & {\n    fit?: Fit;\n    image: SkImage | null;\n  };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface CustomDrawingNodeProps extends DrawingNodeProps {\n  drawing: (ctx: DrawingContext) => void;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n  p1: Vector;\n  p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface CubicBezierHandle {\n  pos: Vector;\n  c1: Vector;\n  c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n  colors?: Color[];\n  patch: [\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle\n  ];\n  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n  blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n  colors?: string[];\n  vertices: SkPoint[];\n  textures?: SkPoint[];\n  mode: SkEnum<typeof VertexMode>;\n  blendMode?: SkEnum<typeof BlendMode>;\n  indices?: number[];\n}\n\nexport type ImageSVGProps = RectDef & {\n  svg: SkSVG | null;\n} & DrawingNodeProps;\n\nexport interface PictureProps extends DrawingNodeProps {\n  picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n  points: SkPoint[];\n  mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n  inner: SkRRect;\n  outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  path: PathDef;\n  initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n  blob: SkTextBlob;\n  x: number;\n  y: number;\n}\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n  font: SkFont | null;\n  x: number;\n  y: number;\n  glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n  box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n  FillType,\n  SkImage,\n  StrokeOpts,\n  Vector,\n  Color,\n  SkPoint,\n  BlendMode,\n  PointMode,\n  VertexMode,\n  SkFont,\n  SkRRect,\n  SkTextBlob,\n  SkPicture,\n  SkSVG,\n  SkPaint,\n  SkRect,\n} from \"../../skia/types\";\n\nimport type {\n  CircleDef,\n  Fit,\n  GroupProps,\n  PathDef,\n  RectDef,\n  RRectDef,\n  SkEnum,\n} from \"./Common\";\nimport type { DrawingContext } from \"./DrawingContext\";\n\nexport interface DrawingNodeProps extends GroupProps {\n  paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n  RectDef & {\n    fit?: Fit;\n    image: SkImage | null;\n  };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface CustomDrawingNodeProps extends DrawingNodeProps {\n  drawing: (ctx: DrawingContext) => void;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n  p1: Vector;\n  p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface CubicBezierHandle {\n  pos: Vector;\n  c1: Vector;\n  c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n  colors?: Color[];\n  patch: [\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle\n  ];\n  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n  blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n  colors?: string[];\n  vertices: SkPoint[];\n  textures?: SkPoint[];\n  mode: SkEnum<typeof VertexMode>;\n  blendMode?: SkEnum<typeof BlendMode>;\n  indices?: number[];\n}\n\nexport interface ImageSVGProps extends DrawingNodeProps {\n  svg: SkSVG | null;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  rect?: SkRect;\n}\n\nexport interface PictureProps extends DrawingNodeProps {\n  picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n  points: SkPoint[];\n  mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n  inner: SkRRect;\n  outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  path: PathDef;\n  initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n  blob: SkTextBlob;\n  x: number;\n  y: number;\n}\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n  font: SkFont | null;\n  x: number;\n  y: number;\n  glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n  box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n"],"mappings":""}

package/lib/module/renderer/processors/math/Math.d.ts

@@ -13,3 +13,4 @@ export declare const mix: (value: number, x: number, y: number) => number;
     clamp(101, 0, 100); // 100
   */
 export declare const clamp: (value: number, lowerBound: number, upperBound: number) => number;
+export declare const saturate: (value: number) => number;

package/lib/module/renderer/processors/math/Math.js

@@ -22,4 +22,9 @@ export const clamp = (value, lowerBound, upperBound) => {
 
   return Math.min(Math.max(lowerBound, value), upperBound);
 };
+export const saturate = value => {
+  "worklet";
+
+  return clamp(value, 0, 1);
+};
 //# sourceMappingURL=Math.js.map

package/lib/module/renderer/processors/math/Math.js.map

@@ -1 +1 @@
-{"version":3,"names":["mix","value","x","y","clamp","lowerBound","upperBound","Math","min","max"],"sources":["Math.ts"],"sourcesContent":["/**\n * Linear interpolation\n * @param value\n * @param x\n * @param y\n */\nexport const mix = (value: number, x: number, y: number) => {\n  \"worklet\";\n  return x * (1 - value) + y * value;\n};\n\n/**\n *  @summary Clamps a node with a lower and upper bound.\n *  @example\n    clamp(-1, 0, 100); // 0\n    clamp(1, 0, 100); // 1\n    clamp(101, 0, 100); // 100\n  */\nexport const clamp = (\n  value: number,\n  lowerBound: number,\n  upperBound: number\n) => {\n  \"worklet\";\n  return Math.min(Math.max(lowerBound, value), upperBound);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,CAA3B,KAAyC;EAC1D;;EACA,OAAOD,CAAC,IAAI,IAAID,KAAR,CAAD,GAAkBE,CAAC,GAAGF,KAA7B;AACD,CAHM;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMG,KAAK,GAAG,CACnBH,KADmB,EAEnBI,UAFmB,EAGnBC,UAHmB,KAIhB;EACH;;EACA,OAAOC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASJ,UAAT,EAAqBJ,KAArB,CAAT,EAAsCK,UAAtC,CAAP;AACD,CAPM"}
+{"version":3,"names":["mix","value","x","y","clamp","lowerBound","upperBound","Math","min","max","saturate"],"sources":["Math.ts"],"sourcesContent":["/**\n * Linear interpolation\n * @param value\n * @param x\n * @param y\n */\nexport const mix = (value: number, x: number, y: number) => {\n  \"worklet\";\n  return x * (1 - value) + y * value;\n};\n\n/**\n *  @summary Clamps a node with a lower and upper bound.\n *  @example\n    clamp(-1, 0, 100); // 0\n    clamp(1, 0, 100); // 1\n    clamp(101, 0, 100); // 100\n  */\nexport const clamp = (\n  value: number,\n  lowerBound: number,\n  upperBound: number\n) => {\n  \"worklet\";\n  return Math.min(Math.max(lowerBound, value), upperBound);\n};\n\nexport const saturate = (value: number) => {\n  \"worklet\";\n  return clamp(value, 0, 1);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,CAA3B,KAAyC;EAC1D;;EACA,OAAOD,CAAC,IAAI,IAAID,KAAR,CAAD,GAAkBE,CAAC,GAAGF,KAA7B;AACD,CAHM;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMG,KAAK,GAAG,CACnBH,KADmB,EAEnBI,UAFmB,EAGnBC,UAHmB,KAIhB;EACH;;EACA,OAAOC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASJ,UAAT,EAAqBJ,KAArB,CAAT,EAAsCK,UAAtC,CAAP;AACD,CAPM;AASP,OAAO,MAAMI,QAAQ,GAAIT,KAAD,IAAmB;EACzC;;EACA,OAAOG,KAAK,CAACH,KAAD,EAAQ,CAAR,EAAW,CAAX,CAAZ;AACD,CAHM"}

package/lib/module/skia/NativeSetup.js

@@ -1,8 +1,8 @@
-import { NativeModules, Platform } from "react-native";
+import { Platform } from "../Platform";
 
 if (Platform.OS !== "web" && global.SkiaApi == null) {
   // Initialize RN Skia
-  const SkiaModule = NativeModules.RNSkia;
+  const SkiaModule = Platform.NativeModules.RNSkia;
 
   if (SkiaModule == null || typeof SkiaModule.install !== "function") {
     throw new Error("Native RNSkia Module cannot be found! Make sure you correctly " + "installed native dependencies and rebuilt your app.");

package/lib/module/skia/NativeSetup.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeModules","Platform","OS","global","SkiaApi","SkiaModule","RNSkia","install","Error","result"],"sources":["NativeSetup.ts"],"sourcesContent":["import { NativeModules, Platform } from \"react-native\";\n\nif (Platform.OS !== \"web\" && global.SkiaApi == null) {\n  // Initialize RN Skia\n  const SkiaModule = NativeModules.RNSkia;\n  if (SkiaModule == null || typeof SkiaModule.install !== \"function\") {\n    throw new Error(\n      \"Native RNSkia Module cannot be found! Make sure you correctly \" +\n        \"installed native dependencies and rebuilt your app.\"\n    );\n  }\n  const result = SkiaModule.install();\n  if (result !== true) {\n    throw new Error(\n      `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`\n    );\n  }\n}\n"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,QAAxB,QAAwC,cAAxC;;AAEA,IAAIA,QAAQ,CAACC,EAAT,KAAgB,KAAhB,IAAyBC,MAAM,CAACC,OAAP,IAAkB,IAA/C,EAAqD;EACnD;EACA,MAAMC,UAAU,GAAGL,aAAa,CAACM,MAAjC;;EACA,IAAID,UAAU,IAAI,IAAd,IAAsB,OAAOA,UAAU,CAACE,OAAlB,KAA8B,UAAxD,EAAoE;IAClE,MAAM,IAAIC,KAAJ,CACJ,mEACE,qDAFE,CAAN;EAID;;EACD,MAAMC,MAAM,GAAGJ,UAAU,CAACE,OAAX,EAAf;;EACA,IAAIE,MAAM,KAAK,IAAf,EAAqB;IACnB,MAAM,IAAID,KAAJ,CACH,wEAAuEC,MAAO,EAD3E,CAAN;EAGD;AACF"}
+{"version":3,"names":["Platform","OS","global","SkiaApi","SkiaModule","NativeModules","RNSkia","install","Error","result"],"sources":["NativeSetup.ts"],"sourcesContent":["import { Platform } from \"../Platform\";\n\nif (Platform.OS !== \"web\" && global.SkiaApi == null) {\n  // Initialize RN Skia\n  const SkiaModule = Platform.NativeModules.RNSkia;\n  if (SkiaModule == null || typeof SkiaModule.install !== \"function\") {\n    throw new Error(\n      \"Native RNSkia Module cannot be found! Make sure you correctly \" +\n        \"installed native dependencies and rebuilt your app.\"\n    );\n  }\n  const result = SkiaModule.install();\n  if (result !== true) {\n    throw new Error(\n      `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`\n    );\n  }\n}\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,aAAzB;;AAEA,IAAIA,QAAQ,CAACC,EAAT,KAAgB,KAAhB,IAAyBC,MAAM,CAACC,OAAP,IAAkB,IAA/C,EAAqD;EACnD;EACA,MAAMC,UAAU,GAAGJ,QAAQ,CAACK,aAAT,CAAuBC,MAA1C;;EACA,IAAIF,UAAU,IAAI,IAAd,IAAsB,OAAOA,UAAU,CAACG,OAAlB,KAA8B,UAAxD,EAAoE;IAClE,MAAM,IAAIC,KAAJ,CACJ,mEACE,qDAFE,CAAN;EAID;;EACD,MAAMC,MAAM,GAAGL,UAAU,CAACG,OAAX,EAAf;;EACA,IAAIE,MAAM,KAAK,IAAf,EAAqB;IACnB,MAAM,IAAID,KAAJ,CACH,wEAAuEC,MAAO,EAD3E,CAAN;EAGD;AACF"}

package/lib/module/skia/core/Data.js

@@ -1,11 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Image } from "react-native";
 import { Skia } from "../Skia";
-import { isRNModule } from "../types";
-
-const resolveAsset = source => {
-  return isRNModule(source) ? Image.resolveAssetSource(source).uri : source.default;
-};
+import { Platform } from "../../Platform";
 
 const factoryWrapper = (data2, factory, onError) => {
   const factoryResult = factory(data2);
@@ -24,7 +19,7 @@ const loadData = (source, factory, onError) => {
   } else if (source instanceof Uint8Array) {
     return new Promise(resolve => resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError)));
   } else {
-    const uri = typeof source === "string" ? source : resolveAsset(source);
+    const uri = typeof source === "string" ? source : Platform.resolveAsset(source);
     return Skia.Data.fromURI(uri).then(d => factoryWrapper(d, factory, onError));
   }
 };

package/lib/module/skia/core/Data.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useState","Image","Skia","isRNModule","resolveAsset","source","resolveAssetSource","uri","default","factoryWrapper","data2","factory","onError","factoryResult","Error","loadData","undefined","Promise","resolve","Uint8Array","Data","fromBytes","fromURI","then","d","useLoading","loader","mounted","data","setData","dataRef","current","value","dispose","useRawData","identity","useData"],"sources":["Data.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Image } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport { isRNModule } from \"../types\";\nimport type {\n  SkData,\n  DataModule,\n  DataSourceParam,\n  JsiDisposable,\n} from \"../types\";\n\nconst resolveAsset = (source: DataModule) => {\n  return isRNModule(source)\n    ? Image.resolveAssetSource(source).uri\n    : source.default;\n};\n\nconst factoryWrapper = <T>(\n  data2: SkData,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n) => {\n  const factoryResult = factory(data2);\n  if (factoryResult === null) {\n    onError && onError(new Error(\"Could not load data\"));\n    return null;\n  } else {\n    return factoryResult;\n  }\n};\n\nconst loadData = <T>(\n  source: DataSourceParam,\n  factory: (data: SkData) => T | null,\n  onError?: (err: Error) => void\n): Promise<T | null> => {\n  if (source === null || source === undefined) {\n    return new Promise((resolve) => resolve(null));\n  } else if (source instanceof Uint8Array) {\n    return new Promise((resolve) =>\n      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))\n    );\n  } else {\n    const uri = typeof source === \"string\" ? source : resolveAsset(source);\n    return Skia.Data.fromURI(uri).then((d) =>\n      factoryWrapper(d, factory, onError)\n    );\n  }\n};\nconst useLoading = <T extends JsiDisposable>(\n  source: DataSourceParam,\n  loader: () => Promise<T | null>\n) => {\n  const mounted = useRef(false);\n  const [data, setData] = useState<T | null>(null);\n  const dataRef = useRef<T | null>(null);\n  useEffect(() => {\n    mounted.current = true;\n    loader().then((value) => {\n      if (mounted.current) {\n        setData(value);\n        dataRef.current = value;\n      }\n    });\n    return () => {\n      dataRef.current?.dispose();\n      mounted.current = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source]);\n  return data;\n};\n\nexport const useRawData = <T extends JsiDisposable>(\n  source: DataSourceParam,\n  factory: (data: SkData) => T | null,\n  onError?: (err: Error) => void\n) => useLoading(source, () => loadData<T>(source, factory, onError));\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, identity, onError);\n"],"mappings":"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"}
+{"version":3,"names":["useEffect","useRef","useState","Skia","Platform","factoryWrapper","data2","factory","onError","factoryResult","Error","loadData","source","undefined","Promise","resolve","Uint8Array","Data","fromBytes","uri","resolveAsset","fromURI","then","d","useLoading","loader","mounted","data","setData","dataRef","current","value","dispose","useRawData","identity","useData"],"sources":["Data.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkData, DataSourceParam, JsiDisposable } from \"../types\";\nimport { Platform } from \"../../Platform\";\n\nconst factoryWrapper = <T>(\n  data2: SkData,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n) => {\n  const factoryResult = factory(data2);\n  if (factoryResult === null) {\n    onError && onError(new Error(\"Could not load data\"));\n    return null;\n  } else {\n    return factoryResult;\n  }\n};\n\nconst loadData = <T>(\n  source: DataSourceParam,\n  factory: (data: SkData) => T | null,\n  onError?: (err: Error) => void\n): Promise<T | null> => {\n  if (source === null || source === undefined) {\n    return new Promise((resolve) => resolve(null));\n  } else if (source instanceof Uint8Array) {\n    return new Promise((resolve) =>\n      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))\n    );\n  } else {\n    const uri =\n      typeof source === \"string\" ? source : Platform.resolveAsset(source);\n    return Skia.Data.fromURI(uri).then((d) =>\n      factoryWrapper(d, factory, onError)\n    );\n  }\n};\nconst useLoading = <T extends JsiDisposable>(\n  source: DataSourceParam,\n  loader: () => Promise<T | null>\n) => {\n  const mounted = useRef(false);\n  const [data, setData] = useState<T | null>(null);\n  const dataRef = useRef<T | null>(null);\n  useEffect(() => {\n    mounted.current = true;\n    loader().then((value) => {\n      if (mounted.current) {\n        setData(value);\n        dataRef.current = value;\n      }\n    });\n    return () => {\n      dataRef.current?.dispose();\n      mounted.current = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source]);\n  return data;\n};\n\nexport const useRawData = <T extends JsiDisposable>(\n  source: DataSourceParam,\n  factory: (data: SkData) => T | null,\n  onError?: (err: Error) => void\n) => useLoading(source, () => loadData<T>(source, factory, onError));\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, identity, onError);\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,OAA5C;AAEA,SAASC,IAAT,QAAqB,SAArB;AAEA,SAASC,QAAT,QAAyB,gBAAzB;;AAEA,MAAMC,cAAc,GAAG,CACrBC,KADqB,EAErBC,OAFqB,EAGrBC,OAHqB,KAIlB;EACH,MAAMC,aAAa,GAAGF,OAAO,CAACD,KAAD,CAA7B;;EACA,IAAIG,aAAa,KAAK,IAAtB,EAA4B;IAC1BD,OAAO,IAAIA,OAAO,CAAC,IAAIE,KAAJ,CAAU,qBAAV,CAAD,CAAlB;IACA,OAAO,IAAP;EACD,CAHD,MAGO;IACL,OAAOD,aAAP;EACD;AACF,CAZD;;AAcA,MAAME,QAAQ,GAAG,CACfC,MADe,EAEfL,OAFe,EAGfC,OAHe,KAIO;EACtB,IAAII,MAAM,KAAK,IAAX,IAAmBA,MAAM,KAAKC,SAAlC,EAA6C;IAC3C,OAAO,IAAIC,OAAJ,CAAaC,OAAD,IAAaA,OAAO,CAAC,IAAD,CAAhC,CAAP;EACD,CAFD,MAEO,IAAIH,MAAM,YAAYI,UAAtB,EAAkC;IACvC,OAAO,IAAIF,OAAJ,CAAaC,OAAD,IACjBA,OAAO,CAACV,cAAc,CAACF,IAAI,CAACc,IAAL,CAAUC,SAAV,CAAoBN,MAApB,CAAD,EAA8BL,OAA9B,EAAuCC,OAAvC,CAAf,CADF,CAAP;EAGD,CAJM,MAIA;IACL,MAAMW,GAAG,GACP,OAAOP,MAAP,KAAkB,QAAlB,GAA6BA,MAA7B,GAAsCR,QAAQ,CAACgB,YAAT,CAAsBR,MAAtB,CADxC;IAEA,OAAOT,IAAI,CAACc,IAAL,CAAUI,OAAV,CAAkBF,GAAlB,EAAuBG,IAAvB,CAA6BC,CAAD,IACjClB,cAAc,CAACkB,CAAD,EAAIhB,OAAJ,EAAaC,OAAb,CADT,CAAP;EAGD;AACF,CAlBD;;AAmBA,MAAMgB,UAAU,GAAG,CACjBZ,MADiB,EAEjBa,MAFiB,KAGd;EACH,MAAMC,OAAO,GAAGzB,MAAM,CAAC,KAAD,CAAtB;EACA,MAAM,CAAC0B,IAAD,EAAOC,OAAP,IAAkB1B,QAAQ,CAAW,IAAX,CAAhC;EACA,MAAM2B,OAAO,GAAG5B,MAAM,CAAW,IAAX,CAAtB;EACAD,SAAS,CAAC,MAAM;IACd0B,OAAO,CAACI,OAAR,GAAkB,IAAlB;IACAL,MAAM,GAAGH,IAAT,CAAeS,KAAD,IAAW;MACvB,IAAIL,OAAO,CAACI,OAAZ,EAAqB;QACnBF,OAAO,CAACG,KAAD,CAAP;QACAF,OAAO,CAACC,OAAR,GAAkBC,KAAlB;MACD;IACF,CALD;IAMA,OAAO,MAAM;MAAA;;MACX,oBAAAF,OAAO,CAACC,OAAR,sEAAiBE,OAAjB;MACAN,OAAO,CAACI,OAAR,GAAkB,KAAlB;IACD,CAHD,CARc,CAYd;EACD,CAbQ,EAaN,CAAClB,MAAD,CAbM,CAAT;EAcA,OAAOe,IAAP;AACD,CAtBD;;AAwBA,OAAO,MAAMM,UAAU,GAAG,CACxBrB,MADwB,EAExBL,OAFwB,EAGxBC,OAHwB,KAIrBgB,UAAU,CAACZ,MAAD,EAAS,MAAMD,QAAQ,CAAIC,MAAJ,EAAYL,OAAZ,EAAqBC,OAArB,CAAvB,CAJR;;AAMP,MAAM0B,QAAQ,GAAIP,IAAD,IAAkBA,IAAnC;;AAEA,OAAO,MAAMQ,OAAO,GAAG,CACrBvB,MADqB,EAErBJ,OAFqB,KAGlByB,UAAU,CAACrB,MAAD,EAASsB,QAAT,EAAmB1B,OAAnB,CAHR"}

package/lib/module/skia/core/Image.js

@@ -1,4 +1,4 @@
-import { findNodeHandle, Platform } from "react-native";
+import { Platform } from "../../Platform";
 import { Skia } from "../Skia";
 import { useRawData } from "./Data";
 const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
@@ -30,7 +30,7 @@ export const makeImageFromView = function (viewRef) {
     }
   }
 
-  const viewTag = findNodeHandle(viewRef.current);
+  const viewTag = Platform.findNodeHandle(viewRef.current);
 
   if (viewTag !== null && viewTag !== 0) {
     return Skia.Image.MakeImageFromViewTag(viewTag);

package/lib/module/skia/core/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["findNodeHandle","Platform","Skia","useRawData","imgFactory","Image","MakeImageFromEncoded","bind","useImage","source","onError","makeImageFromView","viewRef","callback","OS","Promise","reject","Error","viewTag","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { findNodeHandle, Platform } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":"AAAA,SAASA,cAAT,EAAyBC,QAAzB,QAAyC,cAAzC;AAEA,SAASC,IAAT,QAAqB,SAArB;AAGA,SAASC,UAAT,QAA2B,QAA3B;AAEA,MAAMC,UAAU,GAAGF,IAAI,CAACG,KAAL,CAAWC,oBAAX,CAAgCC,IAAhC,CAAqCL,IAAI,CAACG,KAA1C,CAAnB;AAEA;AACA;AACA;;AACA,OAAO,MAAMG,QAAQ,GAAG,CACtBC,MADsB,EAEtBC,OAFsB,KAGnBP,UAAU,CAACM,MAAD,EAASL,UAAT,EAAqBM,OAArB,CAHR;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,iBAAiB,GAAG,UAM/BC,OAN+B,EAU5B;EAAA,IAHHC,QAGG,uEAD8D,IAC9D;;EACH;EACA,IAAIZ,QAAQ,CAACa,EAAT,KAAgB,KAApB,EAA2B;IACzB,IAAID,QAAJ,EAAc;MACZ,OAAOA,QAAQ,CAACD,OAAD,CAAf;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,MAAR,CACE,IAAIC,KAAJ,CACE,gEADF,CADF;IAKD;EACF;;EACD,MAAMC,OAAO,GAAGlB,cAAc,CAACY,OAAO,CAACO,OAAT,CAA9B;;EACA,IAAID,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,CAApC,EAAuC;IACrC,OAAOhB,IAAI,CAACG,KAAL,CAAWe,oBAAX,CAAgCF,OAAhC,CAAP;EACD;;EACD,OAAOH,OAAO,CAACC,MAAR,CAAe,IAAIC,KAAJ,CAAU,kBAAV,CAAf,CAAP;AACD,CA5BM"}
+{"version":3,"names":["Platform","Skia","useRawData","imgFactory","Image","MakeImageFromEncoded","bind","useImage","source","onError","makeImageFromView","viewRef","callback","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { Platform } from \"../../Platform\";\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = Platform.findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,gBAAzB;AACA,SAASC,IAAT,QAAqB,SAArB;AAGA,SAASC,UAAT,QAA2B,QAA3B;AAEA,MAAMC,UAAU,GAAGF,IAAI,CAACG,KAAL,CAAWC,oBAAX,CAAgCC,IAAhC,CAAqCL,IAAI,CAACG,KAA1C,CAAnB;AAEA;AACA;AACA;;AACA,OAAO,MAAMG,QAAQ,GAAG,CACtBC,MADsB,EAEtBC,OAFsB,KAGnBP,UAAU,CAACM,MAAD,EAASL,UAAT,EAAqBM,OAArB,CAHR;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,iBAAiB,GAAG,UAM/BC,OAN+B,EAU5B;EAAA,IAHHC,QAGG,uEAD8D,IAC9D;;EACH;EACA,IAAIZ,QAAQ,CAACa,EAAT,KAAgB,KAApB,EAA2B;IACzB,IAAID,QAAJ,EAAc;MACZ,OAAOA,QAAQ,CAACD,OAAD,CAAf;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,MAAR,CACE,IAAIC,KAAJ,CACE,gEADF,CADF;IAKD;EACF;;EACD,MAAMC,OAAO,GAAGjB,QAAQ,CAACkB,cAAT,CAAwBP,OAAO,CAACQ,OAAhC,CAAhB;;EACA,IAAIF,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,CAApC,EAAuC;IACrC,OAAOhB,IAAI,CAACG,KAAL,CAAWgB,oBAAX,CAAgCH,OAAhC,CAAP;EACD;;EACD,OAAOH,OAAO,CAACC,MAAR,CAAe,IAAIC,KAAJ,CAAU,kBAAV,CAAf,CAAP;AACD,CA5BM"}

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

@@ -17,7 +17,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     protected width: number;
     protected height: number;
     private unsubscribeAll;
-    private onLayout;
+    private onLayoutEvent;
     protected getSize(): {
         width: number;
         height: number;
@@ -58,5 +58,10 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     registerValues(_values: SkiaValue<unknown>[]): void;
     private handleTouchEvent;
     createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
+    private onStart;
+    private onActive;
+    private onCancel;
+    private onEnd;
+    private onLayout;
     render(): JSX.Element;
 }

package/lib/module/views/SkiaBaseWebView.js

@@ -4,10 +4,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /* global HTMLCanvasElement */
 import React from "react";
-import { PixelRatio, View } from "react-native";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import { Platform } from "../Platform";
 import { TouchType } from "./types";
-const pd = PixelRatio.get();
+const pd = Platform.PixelRatio;
 export class SkiaBaseWebView extends React.Component {
   constructor(props) {
     var _props$mode;
@@ -34,6 +34,16 @@ export class SkiaBaseWebView extends React.Component {
 
     _defineProperty(this, "height", 0);
 
+    _defineProperty(this, "onStart", this.createTouchHandler(TouchType.Start));
+
+    _defineProperty(this, "onActive", this.createTouchHandler(TouchType.Active));
+
+    _defineProperty(this, "onCancel", this.createTouchHandler(TouchType.Cancelled));
+
+    _defineProperty(this, "onEnd", this.createTouchHandler(TouchType.End));
+
+    _defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
+
     this._mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : "default";
   }
 
@@ -43,22 +53,19 @@ export class SkiaBaseWebView extends React.Component {
     this._unsubscriptions = [];
   }
 
-  onLayout(evt) {
+  onLayoutEvent(evt) {
     const {
       CanvasKit
-    } = global;
-    const {
-      width,
-      height
-    } = evt.nativeEvent.layout;
-    this.width = width;
-    this.height = height; // Reset canvas / surface on layout change
-
-    if (this._canvasRef.current) {
-      const canvas = this._canvasRef.current;
-      canvas.width = width * pd;
-      canvas.height = height * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+    } = global; // Reset canvas / surface on layout change
+
+    const canvas = this._canvasRef.current;
+
+    if (canvas) {
+      this.width = canvas.clientWidth;
+      this.height = canvas.clientHeight;
+      canvas.width = this.width * pd;
+      canvas.height = this.height * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
 
       if (!surface) {
         throw new Error("Could not create surface");
@@ -92,12 +99,17 @@ export class SkiaBaseWebView extends React.Component {
   }
 
   componentWillUnmount() {
-    var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
-
     this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId); // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+    cancelAnimationFrame(this.requestId); // eslint-disable-next-line max-len
+    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
+    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+    // We delete the context, only if the context has been intialized
 
-    (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
+    if (this._surface) {
+      var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
+
+      (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
+    }
   }
   /**
    * Creates a snapshot from the canvas in the surface
@@ -204,20 +216,20 @@ export class SkiaBaseWebView extends React.Component {
       debug = false,
       ...viewProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
-      onLayout: this.onLayout.bind(this)
+    return /*#__PURE__*/React.createElement(Platform.View, _extends({}, viewProps, {
+      onLayout: this.onLayout
     }), /*#__PURE__*/React.createElement("canvas", {
       ref: this._canvasRef,
       style: {
         display: "flex",
         flex: 1
       },
-      onPointerDown: this.createTouchHandler(TouchType.Start),
-      onPointerMove: this.createTouchHandler(TouchType.Active),
-      onPointerUp: this.createTouchHandler(TouchType.End),
-      onPointerCancel: this.createTouchHandler(TouchType.Cancelled),
-      onPointerLeave: this.createTouchHandler(TouchType.End),
-      onPointerOut: this.createTouchHandler(TouchType.End)
+      onPointerDown: this.onStart,
+      onPointerMove: this.onActive,
+      onPointerUp: this.onEnd,
+      onPointerCancel: this.onCancel,
+      onPointerLeave: this.onEnd,
+      onPointerOut: this.onEnd
     }));
   }