@shopify/react-native-skia 0.1.188 → 0.1.190

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"sources":["useTouchHandler.ts"],"sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type { Vector } from \"../skia/types\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});\n  const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n        const prevTouch = prevTouchInfoRef.current[touch.id];\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX = touch.x - (prevTouch?.x ?? touch.x);\n        const distY = touch.y - (prevTouch?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled &&\n          timeDiffseconds > 0\n        ) {\n          prevVelocityRef.current[touch.id] = {\n            x: distX / timeDiffseconds / PixelRatio.get(),\n            y: distY / timeDiffseconds / PixelRatio.get(),\n          };\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,\n          velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"],"mappings":"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"}
+{"version":3,"names":["useCallback","useRef","Platform","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","Start","End","Cancelled","PixelRatio","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"sources":["useTouchHandler.ts"],"sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\n\nimport type { Vector } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});\n  const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n        const prevTouch = prevTouchInfoRef.current[touch.id];\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX = touch.x - (prevTouch?.x ?? touch.x);\n        const distY = touch.y - (prevTouch?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled &&\n          timeDiffseconds > 0\n        ) {\n          prevVelocityRef.current[touch.id] = {\n            x: distX / timeDiffseconds / Platform.PixelRatio,\n            y: distY / timeDiffseconds / Platform.PixelRatio,\n          };\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,\n          velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"],"mappings":"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"}

package/lib/module/web/WithSkiaWeb.js

@@ -1,5 +1,5 @@
 import React, { useMemo, lazy, Suspense } from "react";
-import { Platform } from "react-native";
+import { Platform } from "../Platform";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
 export const WithSkiaWeb = _ref => {
   let {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    // TODO: investigate\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (): any =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;EAAA,IAJO;IAC1BC,YAD0B;IAE1BC,QAF0B;IAG1BC;EAH0B,CAIP;EACnB,MAAMC,KAAK,GAAGT,OAAO,EACnB;EACA;EACA,mBACEC,IAAI,CAAC,YAAY;IACf,IAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;MACzB,MAAMN,WAAW,CAACI,IAAD,CAAjB;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,IAAR,CACE,yEADF;IAGD;;IACD,OAAON,YAAY,EAAnB;EACD,CATG,CAJa,EAcnB,CAACA,YAAD,EAAeE,IAAf,CAdmB,CAArB;EAgBA,oBACE,oBAAC,QAAD;IAAU,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;EAAhC,gBACE,oBAAC,KAAD,OADF,CADF;AAKD,CA1BM"}
+{"version":3,"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\n\nimport { Platform } from \"../Platform\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    // TODO: investigate\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (): any =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AAEA,SAASC,QAAT,QAAyB,aAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;EAAA,IAJO;IAC1BC,YAD0B;IAE1BC,QAF0B;IAG1BC;EAH0B,CAIP;EACnB,MAAMC,KAAK,GAAGT,OAAO,EACnB;EACA;EACA,mBACEC,IAAI,CAAC,YAAY;IACf,IAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;MACzB,MAAMN,WAAW,CAACI,IAAD,CAAjB;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,IAAR,CACE,yEADF;IAGD;;IACD,OAAON,YAAY,EAAnB;EACD,CATG,CAJa,EAcnB,CAACA,YAAD,EAAeE,IAAf,CAdmB,CAArB;EAgBA,oBACE,oBAAC,QAAD;IAAU,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;EAAhC,gBACE,oBAAC,KAAD,OADF,CADF;AAKD,CA1BM"}

package/lib/typescript/src/Platform/IPlatform.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
+import type { DataModule } from "../skia/types";
+export interface IPlatform {
+    OS: string;
+    requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
+    PixelRatio: number;
+    NativeModules: Record<string, any>;
+    findNodeHandle: (componentOrHandle: null | number | React.Component<any, any> | React.ComponentClass<any>) => null | NodeHandle;
+    resolveAsset: (source: DataModule) => string;
+    View: typeof ViewComponent;
+}

package/lib/typescript/src/Platform/Platform.d.ts

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

package/lib/typescript/src/Platform/Platform.web.d.ts

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

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

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

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

@@ -13,12 +13,12 @@ export declare enum MatrixIndex {
 }
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-    concat: (matrix: SkMatrix) => void;
-    translate: (x: number, y: number) => void;
-    scale: (x: number, y?: number) => void;
-    skew: (x: number, y: number) => void;
-    rotate: (theta: number) => void;
-    identity: () => void;
+    concat: (matrix: SkMatrix) => SkMatrix;
+    translate: (x: number, y: number) => SkMatrix;
+    scale: (x: number, y?: number) => SkMatrix;
+    skew: (x: number, y: number) => SkMatrix;
+    rotate: (theta: number) => SkMatrix;
+    identity: () => SkMatrix;
     get: () => number[];
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";

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

@@ -3,11 +3,11 @@ import type { SkMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
-    concat(matrix: SkMatrix): void;
-    translate(x: number, y: number): void;
-    scale(x: number, y?: number): void;
-    skew(x: number, y: number): void;
-    rotate(value: number): void;
-    identity(): void;
+    concat(matrix: SkMatrix): this;
+    translate(x: number, y: number): this;
+    scale(x: number, y?: number): this;
+    skew(x: number, y: number): this;
+    rotate(value: number): this;
+    identity(): this;
     get(): number[];
 }

package/lib/typescript/src/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/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.188",
+  "version": "0.1.190",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -81,28 +81,28 @@
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@types/jest": "^28.1.6",
+    "@types/pixelmatch": "^5.2.4",
+    "@types/pngjs": "^6.0.1",
     "@types/react-native": "0.70.6",
     "@types/react-reconciler": "^0.26.7",
+    "@types/ws": "^8.5.3",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "28.1.3",
     "merge-dirs": "^0.2.1",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^6.0.0",
     "react": "18.1.0",
     "react-native": "0.71.7",
     "react-native-builder-bob": "^0.18.2",
     "ts-jest": "^28.0.7",
-    "typescript": "4.8.3"
+    "typescript": "4.8.3",
+    "ws": "^8.11.0"
   },
   "dependencies": {
-    "@types/pixelmatch": "^5.2.4",
-    "@types/pngjs": "^6.0.1",
-    "@types/ws": "^8.5.3",
     "canvaskit-wasm": "0.38.0",
-    "pixelmatch": "^5.3.0",
-    "pngjs": "^6.0.0",
-    "react-reconciler": "^0.27.0",
-    "ws": "^8.11.0"
+    "react-reconciler": "^0.27.0"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/Platform/IPlatform.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
+
+import type { DataModule } from "../skia/types";
+
+export interface IPlatform {
+  OS: string;
+  requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
+  PixelRatio: number;
+  NativeModules: Record<string, any>;
+  findNodeHandle: (
+    componentOrHandle:
+      | null
+      | number
+      | React.Component<any, any>
+      | React.ComponentClass<any>
+  ) => null | NodeHandle;
+  resolveAsset: (source: DataModule) => string;
+  View: typeof ViewComponent;
+}

package/src/Platform/Platform.ts

@@ -0,0 +1,28 @@
+import {
+  Image,
+  PixelRatio,
+  requireNativeComponent,
+  Platform as RNPlatform,
+  findNodeHandle,
+  NativeModules,
+  View,
+} from "react-native";
+
+import type { DataModule } from "../skia/types";
+import { isRNModule } from "../skia/types";
+
+import type { IPlatform } from "./IPlatform";
+
+export const Platform: IPlatform = {
+  OS: RNPlatform.OS,
+  PixelRatio: PixelRatio.get(),
+  requireNativeComponent,
+  resolveAsset: (source: DataModule) => {
+    return isRNModule(source)
+      ? Image.resolveAssetSource(source).uri
+      : source.default;
+  },
+  findNodeHandle,
+  NativeModules,
+  View,
+};

package/src/Platform/Platform.web.tsx

@@ -0,0 +1,136 @@
+import type { RefObject, CSSProperties } from "react";
+import React, { useLayoutEffect, useMemo, useRef } from "react";
+import type { LayoutChangeEvent, ViewComponent, ViewProps } from "react-native";
+
+import type { DataModule } from "../skia/types";
+import { isRNModule } from "../skia/types";
+
+import type { IPlatform } from "./IPlatform";
+
+// 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";
+type OnLayout = ((event: LayoutChangeEvent) => void) | undefined;
+type Div = HTMLDivElement & {
+  __reactLayoutHandler: OnLayout;
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+const getObserver = () => {
+  if (resizeObserver == null) {
+    resizeObserver = new window.ResizeObserver(function (entries) {
+      entries.forEach((entry) => {
+        const node = entry.target as Div;
+        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: RefObject<Div>, onLayout: 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 = (({ children, onLayout, style: rawStyle }: ViewProps) => {
+  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
+  const ref = useRef<Div>(null);
+  useElementLayout(ref, onLayout);
+  const cssStyles = useMemo(() => {
+    return {
+      ...style,
+      display: "flex",
+      flexDirection: style.flexDirection || "column",
+      flexWrap: style.flexWrap || "nowrap",
+      justifyContent: style.justifyContent || "flex-start",
+      alignItems: style.alignItems || "stretch",
+      alignContent: style.alignContent || "stretch",
+    };
+  }, [style]);
+
+  return (
+    <div ref={ref} style={cssStyles}>
+      {children}
+    </div>
+  );
+}) as unknown as typeof ViewComponent;
+
+export const Platform: IPlatform = {
+  OS: "web",
+  PixelRatio: window.devicePixelRatio,
+  requireNativeComponent: () => {
+    throw new Error("requireNativeComponent is not supported on the web");
+  },
+  resolveAsset: (source: DataModule) => {
+    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,
+};

package/src/Platform/index.ts

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

package/src/skia/NativeSetup.ts

@@ -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 " +

package/src/skia/core/Data.ts

@@ -1,20 +1,8 @@
 import { useEffect, useRef, useState } from "react";
-import { Image } from "react-native";
 
 import { Skia } from "../Skia";
-import { isRNModule } from "../types";
-import type {
-  SkData,
-  DataModule,
-  DataSourceParam,
-  JsiDisposable,
-} from "../types";
-
-const resolveAsset = (source: DataModule) => {
-  return isRNModule(source)
-    ? Image.resolveAssetSource(source).uri
-    : source.default;
-};
+import type { SkData, DataSourceParam, JsiDisposable } from "../types";
+import { Platform } from "../../Platform";
 
 const factoryWrapper = <T>(
   data2: SkData,
@@ -42,7 +30,8 @@ const loadData = <T>(
       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/src/skia/core/Image.ts

@@ -1,5 +1,4 @@
-import { findNodeHandle, Platform } from "react-native";
-
+import { Platform } from "../../Platform";
 import { Skia } from "../Skia";
 import type { DataSourceParam, SkImage } from "../types";
 
@@ -48,7 +47,7 @@ export const makeImageFromView = <
       );
     }
   }
-  const viewTag = findNodeHandle(viewRef.current);
+  const viewTag = Platform.findNodeHandle(viewRef.current);
   if (viewTag !== null && viewTag !== 0) {
     return Skia.Image.MakeImageFromViewTag(viewTag);
   }

package/src/skia/types/Matrix.ts

@@ -16,12 +16,12 @@ export const isMatrix = (obj: unknown): obj is SkMatrix =>
   obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
 
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-  concat: (matrix: SkMatrix) => void;
-  translate: (x: number, y: number) => void;
-  scale: (x: number, y?: number) => void;
-  skew: (x: number, y: number) => void;
-  rotate: (theta: number) => void;
-  identity: () => void;
+  concat: (matrix: SkMatrix) => SkMatrix;
+  translate: (x: number, y: number) => SkMatrix;
+  scale: (x: number, y?: number) => SkMatrix;
+  skew: (x: number, y: number) => SkMatrix;
+  rotate: (theta: number) => SkMatrix;
+  identity: () => SkMatrix;
   get: () => number[];
 }
 

package/src/skia/web/JsiSkMatrix.ts

@@ -16,6 +16,7 @@ export class JsiSkMatrix
     this.ref.set(
       this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))
     );
+    return this;
   }
 
   translate(x: number, y: number) {
@@ -25,6 +26,7 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))
       )
     );
+    return this;
   }
 
   scale(x: number, y?: number) {
@@ -34,6 +36,7 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))
       )
     );
+    return this;
   }
 
   skew(x: number, y: number) {
@@ -43,6 +46,7 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))
       )
     );
+    return this;
   }
 
   rotate(value: number) {
@@ -52,10 +56,12 @@ export class JsiSkMatrix
         Float32Array.of(...this.CanvasKit.Matrix.rotated(value))
       )
     );
+    return this;
   }
 
   identity() {
     this.ref.set(this.CanvasKit.Matrix.identity());
+    return this;
   }
 
   get() {

package/src/views/SkiaBaseWebView.tsx

@@ -2,16 +2,16 @@
 import React from "react";
 import type { PointerEvent } from "react";
 import type { LayoutChangeEvent } from "react-native";
-import { PixelRatio, View } from "react-native";
 
 import type { SkRect, SkCanvas } from "../skia/types";
 import type { SkiaValue } from "../values";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import { Platform } from "../Platform";
 
 import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
 import { TouchType } from "./types";
 
-const pd = PixelRatio.get();
+const pd = Platform.PixelRatio;
 
 export abstract class SkiaBaseWebView<
   TProps extends SkiaBaseViewProps
@@ -38,17 +38,16 @@ export abstract class SkiaBaseWebView<
     this._unsubscriptions = [];
   }
 
-  private onLayout(evt: LayoutChangeEvent) {
+  private onLayoutEvent(evt: LayoutChangeEvent) {
     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);
+    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");
       }
@@ -178,21 +177,27 @@ export abstract class SkiaBaseWebView<
     return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
   }
 
+  private onStart = this.createTouchHandler(TouchType.Start);
+  private onActive = this.createTouchHandler(TouchType.Active);
+  private onCancel = this.createTouchHandler(TouchType.Cancelled);
+  private onEnd = this.createTouchHandler(TouchType.End);
+  private onLayout = this.onLayoutEvent.bind(this);
+
   render() {
     const { mode, debug = false, ...viewProps } = this.props;
     return (
-      <View {...viewProps} onLayout={this.onLayout.bind(this)}>
+      <Platform.View {...viewProps} onLayout={this.onLayout}>
         <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}
         />
-      </View>
+      </Platform.View>
     );
   }
 }

package/src/views/SkiaDomView.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { requireNativeComponent, Platform } from "react-native";
 import type { HostComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
+import { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
 import { SkiaViewNativeId } from "./SkiaView";
@@ -11,7 +11,7 @@ import type { NativeSkiaViewProps, SkiaDomViewProps } from "./types";
 
 const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
   Platform.OS !== "web"
-    ? requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
+    ? Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 

package/src/views/SkiaPictureView.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { requireNativeComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
+import { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
 import { SkiaViewNativeId } from "./SkiaView";
 import type { NativeSkiaViewProps, SkiaPictureViewProps } from "./types";
 
 const NativeSkiaPictureView =
-  requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
+  Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
 
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {

package/src/views/SkiaView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { requireNativeComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
+import { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
 import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
@@ -10,7 +10,7 @@ import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
 export const SkiaViewNativeId = { current: 1000 };
 
 const NativeSkiaView =
-  requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
+  Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
 
 export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {