@shopify/react-native-skia 0.1.156 → 0.1.158

package/lib/module/views/useTouchHandler.js

@@ -12,7 +12,7 @@ const useInternalTouchHandler = function (handlers) {
     history.forEach(touches => {
       // Enumerate touches
       for (let i = 0; i < touches.length; i++) {
-        var _prevTouchInfoRef$cur, _prevVelocityRef$curr, _prevVelocityRef$curr2;
+        var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouch$x, _prevTouch$y, _prevVelocityRef$curr, _prevVelocityRef$curr2, _prevVelocityRef$curr3, _prevVelocityRef$curr4;
 
         if (!multiTouch && i > 0) {
           break;
@@ -21,9 +21,9 @@ const useInternalTouchHandler = function (handlers) {
         const touch = touches[i];
         const prevTouch = prevTouchInfoRef.current[touch.id]; // Calculate the velocity from the previous touch.
 
-        const timeDiffseconds = touch.timestamp - (((_prevTouchInfoRef$cur = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur === void 0 ? void 0 : _prevTouchInfoRef$cur.timestamp) ?? touch.timestamp);
-        const distX = touch.x - ((prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.x) ?? touch.x);
-        const distY = touch.y - ((prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.y) ?? touch.y);
+        const timeDiffseconds = touch.timestamp - ((_prevTouchInfoRef$cur = (_prevTouchInfoRef$cur2 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur2 === void 0 ? void 0 : _prevTouchInfoRef$cur2.timestamp) !== null && _prevTouchInfoRef$cur !== void 0 ? _prevTouchInfoRef$cur : touch.timestamp);
+        const distX = touch.x - ((_prevTouch$x = prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.x) !== null && _prevTouch$x !== void 0 ? _prevTouch$x : touch.x);
+        const distY = touch.y - ((_prevTouch$y = prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.y) !== null && _prevTouch$y !== void 0 ? _prevTouch$y : touch.y);
 
         if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled && timeDiffseconds > 0) {
           prevVelocityRef.current[touch.id] = {
@@ -33,8 +33,8 @@ const useInternalTouchHandler = function (handlers) {
         }
 
         const extendedTouchInfo = { ...touch,
-          velocityX: ((_prevVelocityRef$curr = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr === void 0 ? void 0 : _prevVelocityRef$curr.x) ?? 0,
-          velocityY: ((_prevVelocityRef$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.y) ?? 0
+          velocityX: (_prevVelocityRef$curr = (_prevVelocityRef$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.x) !== null && _prevVelocityRef$curr !== void 0 ? _prevVelocityRef$curr : 0,
+          velocityY: (_prevVelocityRef$curr3 = (_prevVelocityRef$curr4 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr4 === void 0 ? void 0 : _prevVelocityRef$curr4.y) !== null && _prevVelocityRef$curr3 !== void 0 ? _prevVelocityRef$curr3 : 0
         }; // Save previous touch
 
         prevTouchInfoRef.current[touch.id] = touch;

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":"AACA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AACA,SAASC,UAAT,QAA2B,cAA3B;AAUA,SAASC,SAAT,QAA0B,SAA1B;;AAEA,MAAMC,uBAAuB,GAAG,UAC9BC,QAD8B,EAIb;EAAA,IAFjBC,IAEiB,uEAFM,EAEN;EAAA,IADjBC,UACiB,uEADJ,KACI;EACjB,MAAMC,gBAAgB,GAAGP,MAAM,CAA2C,EAA3C,CAA/B;EACA,MAAMQ,eAAe,GAAGR,MAAM,CAAwC,EAAxC,CAA9B;EAEA,OAAOD,WAAW,CAAEU,OAAD,IAAsC;IACvD;IACAA,OAAO,CAACC,OAAR,CAAiBC,OAAD,IAAa;MAC3B;MACA,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,OAAO,CAACE,MAA5B,EAAoCD,CAAC,EAArC,EAAyC;QAAA;;QACvC,IAAI,CAACN,UAAD,IAAeM,CAAC,GAAG,CAAvB,EAA0B;UACxB;QACD;;QAED,MAAME,KAAK,GAAGH,OAAO,CAACC,CAAD,CAArB;QACA,MAAMG,SAAS,GAAGR,gBAAgB,CAACS,OAAjB,CAAyBF,KAAK,CAACG,EAA/B,CAAlB,CANuC,CAOvC;;QACA,MAAMC,eAAe,GACnBJ,KAAK,CAACK,SAAN,IACC,0BAAAZ,gBAAgB,CAACS,OAAjB,CAAyBF,KAAK,CAACG,EAA/B,iFAAoCE,SAApC,KAAiDL,KAAK,CAACK,SADxD,CADF;QAIA,MAAMC,KAAK,GAAGN,KAAK,CAACO,CAAN,IAAW,CAAAN,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEM,CAAX,KAAgBP,KAAK,CAACO,CAAjC,CAAd;QACA,MAAMC,KAAK,GAAGR,KAAK,CAACS,CAAN,IAAW,CAAAR,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEQ,CAAX,KAAgBT,KAAK,CAACS,CAAjC,CAAd;;QAEA,IACET,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACuB,KAAzB,IACAX,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACwB,GADzB,IAEAZ,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACyB,SAFzB,IAGAT,eAAe,GAAG,CAJpB,EAKE;UACAV,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,IAAoC;YAClCI,CAAC,EAAED,KAAK,GAAGF,eAAR,GAA0BjB,UAAU,CAAC2B,GAAX,EADK;YAElCL,CAAC,EAAED,KAAK,GAAGJ,eAAR,GAA0BjB,UAAU,CAAC2B,GAAX;UAFK,CAApC;QAID;;QAED,MAAMC,iBAAoC,GAAG,EAC3C,GAAGf,KADwC;UAE3CgB,SAAS,EAAE,0BAAAtB,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,iFAAmCI,CAAnC,KAAwC,CAFR;UAG3CU,SAAS,EAAE,2BAAAvB,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,mFAAmCM,CAAnC,KAAwC;QAHR,CAA7C,CA3BuC,CAiCvC;;QACAhB,gBAAgB,CAACS,OAAjB,CAAyBF,KAAK,CAACG,EAA/B,IAAqCH,KAArC;;QAEA,IAAIA,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACuB,KAA7B,EAAoC;UAClC,OAAOjB,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,CAAP;UACAb,QAAQ,CAAC4B,OAAT,IAAoB5B,QAAQ,CAAC4B,OAAT,CAAiBlB,KAAjB,CAApB;QACD,CAHD,MAGO,IAAIA,KAAK,CAACU,IAAN,KAAetB,SAAS,CAAC+B,MAA7B,EAAqC;UAC1C7B,QAAQ,CAAC8B,QAAT,IAAqB9B,QAAQ,CAAC8B,QAAT,CAAkBL,iBAAlB,CAArB;QACD,CAFM,MAEA;UACLzB,QAAQ,CAAC+B,KAAT,IAAkB/B,QAAQ,CAAC+B,KAAT,CAAeN,iBAAf,CAAlB;QACD;MACF;IACF,CA/CD,EAFuD,CAkDvD;EACD,CAnDiB,EAmDfxB,IAnDe,CAAlB;AAoDD,CA5DD;AA8DA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAM+B,eAAe,GAAG,UAC7BhC,QAD6B,EAGZ;EAAA,IADjBC,IACiB,uEADM,EACN;EACjB,OAAOF,uBAAuB,CAACC,QAAD,EAAWC,IAAX,EAAiB,KAAjB,CAA9B;AACD,CALM;AAOP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMgC,oBAAoB,GAAG,UAClCjC,QADkC,EAGjB;EAAA,IADjBC,IACiB,uEADM,EACN;EACjB,OAAOF,uBAAuB,CAACC,QAAD,EAAWC,IAAX,EAAiB,IAAjB,CAA9B;AACD,CALM"}
+{"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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"}

package/lib/module/web/WithSkiaWeb.js

@@ -19,7 +19,7 @@ export const WithSkiaWeb = _ref => {
     return getComponent();
   }), [getComponent, opts]);
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: fallback ?? null
+    fallback: fallback !== null && fallback !== void 0 ? fallback : null
   }, /*#__PURE__*/React.createElement(Inner, null));
 };
 //# sourceMappingURL=WithSkiaWeb.js.map

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,QAAQ,IAAI;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\";\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"}

package/lib/typescript/src/dom/nodes/RenderNode.d.ts

@@ -1,6 +1,5 @@
-import type { RefObject } from "react";
 import type { SkMatrix, SkRect, SkRRect, SkPath, SkPaint } from "../../skia/types";
-import type { RenderNode, GroupProps, DrawingContext, NodeType, Node, DeclarationNode } from "../types";
+import type { RenderNode, GroupProps, DrawingContext, NodeType, Node } from "../types";
 import type { NodeContext } from "./Node";
 import { JsiNode } from "./Node";
 interface PaintCache {
@@ -25,5 +24,4 @@ export declare abstract class JsiRenderNode<P extends GroupProps> extends JsiNod
     render(parentCtx: DrawingContext): void;
     abstract renderNode(ctx: DrawingContext): void;
 }
-export declare const isSkPaint: (obj: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint) => obj is SkPaint;
 export {};

package/lib/typescript/src/dom/types/Common.d.ts

@@ -1,6 +1,5 @@
-import type { ReactNode, RefObject } from "react";
+import type { ReactNode } from "react";
 import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms2d, Vector } from "../../skia/types";
-import type { DeclarationNode } from "./Node";
 export declare type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export declare type PathDef = string | SkPath;
 export declare type ClipDef = SkRRect | SkRect | PathDef;
@@ -53,5 +52,5 @@ export interface PaintProps extends ChildrenProps {
 export interface GroupProps extends PaintProps, TransformProps {
     clip?: ClipDef;
     invertClip?: boolean;
-    layer?: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint | boolean;
+    layer?: SkPaint | boolean;
 }

package/lib/typescript/src/dom/types/Drawings.d.ts

@@ -1,10 +1,8 @@
-import type { RefObject } from "react";
 import type { FillType, SkImage, StrokeOpts, Vector, Color, SkPoint, BlendMode, PointMode, VertexMode, SkFont, SkRRect, SkTextBlob, SkPicture, SkSVG, SkPaint, SkRect } from "../../skia/types";
 import type { CircleDef, Fit, GroupProps, PathDef, RectDef, RRectDef, SkEnum } from "./Common";
 import type { DrawingContext } from "./DrawingContext";
-import type { DeclarationNode } from "./Node";
 export interface DrawingNodeProps extends GroupProps {
-    paint?: SkPaint | RefObject<DeclarationNode<unknown, SkPaint>>;
+    paint?: SkPaint;
 }
 export declare type ImageProps = DrawingNodeProps & RectDef & {
     fit: Fit;

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

@@ -3,6 +3,8 @@ import type { RefObject, ReactNode, ComponentProps } from "react";
 import ReactReconciler from "react-reconciler";
 import { SkiaView } from "../views";
 import type { TouchHandler } from "../views";
+import type { SkiaMutableValue } from "../values";
+import type { SkSize } from "../skia/types";
 import { Container } from "./Container";
 export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("..").Node<unknown>, import("..").Node<unknown>, import("..").Node<unknown>, import("..").Node<unknown>>;
 export declare const useCanvasRef: () => React.RefObject<SkiaView>;
@@ -10,5 +12,6 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     ref?: RefObject<SkiaView>;
     children: ReactNode;
     onTouch?: TouchHandler;
+    onSize?: SkiaMutableValue<SkSize>;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch" | "onSize"> & React.RefAttributes<SkiaView>>;

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

@@ -1,9 +1,7 @@
-import type { ForwardedRef } from "react";
 import { NodeType } from "../dom/types";
 import type { CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, CustomDrawingNodeProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type { BlendProps, MorphologyImageFilterProps } from "../dom/types/ImageFilters";
-import type { PaintNode } from "../dom/nodes/PaintNode";
 import type { Container } from "./Container";
 import type { SkiaProps } from "./processors";
 declare global {
@@ -11,9 +9,7 @@ declare global {
         interface IntrinsicElements {
             skGroup: SkiaProps<GroupProps>;
             skLayer: SkiaProps<ChildrenProps>;
-            skPaint: SkiaProps<PaintProps> & {
-                ref: ForwardedRef<PaintNode>;
-            };
+            skPaint: SkiaProps<PaintProps>;
             skFill: SkiaProps<DrawingNodeProps>;
             skImage: SkiaProps<ImageProps>;
             skCircle: SkiaProps<CircleProps>;

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

@@ -1,5 +1,4 @@
-import React from "react";
+/// <reference types="react" />
+import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
-import type { PaintNode } from "../../dom/nodes/PaintNode";
-export declare const usePaintRef: () => React.RefObject<PaintNode>;
-export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps, never> & React.RefAttributes<PaintNode>>;
+export declare const Paint: (props: SkiaProps<DrawingNodeProps>) => JSX.Element;

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

@@ -11,4 +11,5 @@ interface CanvasContext {
 declare const CanvasContext: React.Context<CanvasContext | null>;
 export declare const CanvasProvider: React.Provider<CanvasContext | null>;
 export declare const useCanvas: () => CanvasContext;
+export declare const useSkiaPrivate: () => Skia;
 export {};

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

@@ -1,12 +1,4 @@
-import type { DependencyList } from "react";
 import type { SkCanvas, SkRect } from "../types";
-/**
- * Memoizes and returns an SkPicture that can be drawn to another canvas.
- * @param rect Picture bounds
- * @param cb Callback for drawing to the canvas
- * @returns SkPicture
- */
-export declare const usePicture: (rect: SkRect, cb: (canvas: SkCanvas) => void, deps?: DependencyList) => import("../types").SkPicture;
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds

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

@@ -1,5 +1,6 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkPath } from "./Path/Path";
+import type { SkPoint } from "./Point";
 export interface PosTan {
     px: number;
     py: number;
@@ -9,10 +10,10 @@ export interface PosTan {
 export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
     /**
      * Returns the given position and tangent line for the distance on the given contour.
-     * The return value is 4 floats in this order: posX, posY, vecX, vecY.
+     * The return value an array of 2 vectors: [position, tangent]
      * @param distance - will be pinned between 0 and length().
      */
-    getPosTan(distance: number): PosTan;
+    getPosTan(distance: number): [position: SkPoint, tangent: SkPoint];
     /**
      * Returns an Path representing the segment of this contour.
      * @param startD - will be pinned between 0 and length()

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

@@ -0,0 +1,4 @@
+export interface SkSize {
+    width: number;
+    height: number;
+}

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

@@ -25,3 +25,4 @@ export * from "./RSXform";
 export * from "./JsiInstance";
 export * from "./Skia";
 export * from "./TextBlob";
+export * from "./Size";

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

@@ -2,14 +2,10 @@ import type { CanvasKit, ContourMeasure } from "canvaskit-wasm";
 import type { SkContourMeasure } from "../types";
 import { HostObject } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
 export declare class JsiSkContourMeasure extends HostObject<ContourMeasure, "ContourMeasure"> implements SkContourMeasure {
     constructor(CanvasKit: CanvasKit, ref: ContourMeasure);
-    getPosTan(distance: number): {
-        px: number;
-        py: number;
-        tx: number;
-        ty: number;
-    };
+    getPosTan(distance: number): [position: JsiSkPoint, tangent: JsiSkPoint];
     getSegment(startD: number, stopD: number, startWithMoveTo: boolean): JsiSkPath;
     isClosed(): boolean;
     length(): number;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.156",
+  "version": "0.1.158",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -67,8 +67,8 @@
   "licenseFilename": "LICENSE.md",
   "readmeFilename": "README.md",
   "peerDependencies": {
-    "react": ">=16.8.1",
-    "react-native": ">=0.63.0-rc.0 <1.0.x",
+    "react": ">=18.0",
+    "react-native": ">=0.64",
     "react-native-reanimated": ">=2.0.0"
   },
   "peerDependenciesMeta": {
@@ -77,9 +77,10 @@
     }
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@types/jest": "^28.1.6",
     "@types/react-native": "0.66.2",
-    "@types/react-reconciler": "0.26.4",
+    "@types/react-reconciler": "^0.26.7",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
@@ -92,7 +93,7 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.36.1",
-    "react-reconciler": "0.26.2"
+    "react-reconciler": "^0.27.0"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -103,7 +104,12 @@
     "output": "lib",
     "targets": [
       "commonjs",
-      "module",
+      [
+        "module",
+        {
+          "configFile": "./.babelrc"
+        }
+      ],
       "typescript"
     ]
   },

package/src/dom/nodes/DrawingNode.ts

@@ -9,7 +9,7 @@ import type {
 import type { NodeContext } from "./Node";
 import { JsiDeclarationNode } from "./Node";
 import { PaintNode } from "./PaintNode";
-import { isSkPaint, JsiRenderNode } from "./RenderNode";
+import { JsiRenderNode } from "./RenderNode";
 
 export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
   extends JsiRenderNode<P>
@@ -52,10 +52,8 @@ export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
   }
 
   renderNode(ctx: DrawingContext): void {
-    if (this.props.paint && isSkPaint(this.props.paint)) {
+    if (this.props.paint) {
       this.draw({ ...ctx, paint: this.props.paint });
-    } else if (this.props.paint && this.props.paint.current != null) {
-      this.draw({ ...ctx, paint: this.props.paint.current.materialize() });
     } else {
       this.draw(ctx);
     }

package/src/dom/nodes/RenderNode.ts

@@ -1,5 +1,3 @@
-import type { RefObject } from "react";
-
 import type {
   SkMatrix,
   SkRect,
@@ -21,7 +19,6 @@ import type {
   DrawingContext,
   NodeType,
   Node,
-  DeclarationNode,
 } from "../types";
 
 import { isPathDef, processPath, processTransformProps } from "./datatypes";
@@ -236,17 +233,12 @@ export abstract class JsiRenderNode<P extends GroupProps>
       this.clipRRect !== undefined;
     const shouldSave = hasTransform || hasClip || !!layer;
     const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-
     if (shouldSave) {
       if (layer) {
         if (typeof layer === "boolean") {
           canvas.saveLayer();
-        } else if (isSkPaint(layer)) {
-          canvas.saveLayer(layer);
         } else {
-          canvas.saveLayer(
-            layer.current ? layer.current.materialize() : undefined
-          );
+          canvas.saveLayer(layer);
         }
       } else {
         canvas.save();
@@ -274,10 +266,6 @@ export abstract class JsiRenderNode<P extends GroupProps>
   abstract renderNode(ctx: DrawingContext): void;
 }
 
-export const isSkPaint = (
-  obj: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint
-): obj is SkPaint => "__typename__" in obj && obj.__typename__ === "Paint";
-
 const concatPaint = (
   parent: SkPaint,
   {

package/src/dom/nodes/drawings/Text.ts

@@ -57,10 +57,10 @@ export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
       }
       // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
       // line at that position.
-      const { px, py, tx, ty } = cont.getPosTan(dist);
-      const adjustedX = px - (width / 2) * tx;
-      const adjustedY = py - (width / 2) * ty;
-      rsx.push(this.Skia.RSXform(tx, ty, adjustedX, adjustedY));
+      const [p, t] = cont.getPosTan(dist);
+      const adjustedX = p.x - (width / 2) * t.x;
+      const adjustedY = p.y - (width / 2) * t.y;
+      rsx.push(this.Skia.RSXform(t.x, t.y, adjustedX, adjustedY));
       dist += width / 2;
     }
     return this.Skia.TextBlob.MakeFromRSXform(text, rsx, font);

package/src/dom/types/Common.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from "react";
+import type { ReactNode } from "react";
 
 import type {
   BlendMode,
@@ -15,8 +15,6 @@ import type {
   Vector,
 } from "../../skia/types";
 
-import type { DeclarationNode } from "./Node";
-
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export type PathDef = string | SkPath;
@@ -86,5 +84,5 @@ export interface PaintProps extends ChildrenProps {
 export interface GroupProps extends PaintProps, TransformProps {
   clip?: ClipDef;
   invertClip?: boolean;
-  layer?: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint | boolean;
+  layer?: SkPaint | boolean;
 }

package/src/dom/types/Drawings.ts

@@ -1,5 +1,3 @@
-import type { RefObject } from "react";
-
 import type {
   FillType,
   SkImage,
@@ -29,10 +27,9 @@ import type {
   SkEnum,
 } from "./Common";
 import type { DrawingContext } from "./DrawingContext";
-import type { DeclarationNode } from "./Node";
 
 export interface DrawingNodeProps extends GroupProps {
-  paint?: SkPaint | RefObject<DeclarationNode<unknown, SkPaint>>;
+  paint?: SkPaint;
 }
 
 export type ImageProps = DrawingNodeProps &

package/src/mock/index.ts

@@ -53,7 +53,6 @@ export const Mock: typeof SkiaExports &
   useTypeface: Noop,
   useImage: Noop,
   useSVG: Noop,
-  usePicture: Noop,
   createPicture: Noop,
   // 3. Point/Rect/Transform utilities
   vec,

package/src/renderer/Canvas.tsx

@@ -20,7 +20,8 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
-import type { SkiaValue } from "../values";
+import type { SkiaValue, SkiaMutableValue } from "../values";
+import type { SkSize } from "../skia/types";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -49,10 +50,11 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
   ref?: RefObject<SkiaView>;
   children: ReactNode;
   onTouch?: TouchHandler;
+  onSize?: SkiaMutableValue<SkSize>;
 }
 
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
-  ({ children, style, debug, mode, onTouch }, forwardedRef) => {
+  ({ children, style, debug, mode, onTouch, onSize }, forwardedRef) => {
     const size = useValue({ width: 0, height: 0 });
     const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
     const innerRef = useCanvasRef();
@@ -77,7 +79,17 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     }, [redraw, registerValues]);
 
     const root = useMemo(
-      () => skiaReconciler.createContainer(container, 0, false, null),
+      () =>
+        skiaReconciler.createContainer(
+          container,
+          0,
+          null,
+          true,
+          null,
+          "",
+          console.error,
+          null
+        ),
       [container]
     );
     // Render effect
@@ -104,6 +116,9 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           height !== canvasCtx.size.current.height
         ) {
           canvasCtx.size.current = { width, height };
+          if (onSize) {
+            onSize.current = { width, height };
+          }
         }
         paint.reset();
         const ctx = {

package/src/renderer/HostComponents.ts

@@ -1,5 +1,3 @@
-import type { ForwardedRef } from "react";
-
 import { NodeType } from "../dom/types";
 import type {
   CircleProps,
@@ -55,7 +53,6 @@ import type {
   BlendProps,
   MorphologyImageFilterProps,
 } from "../dom/types/ImageFilters";
-import type { PaintNode } from "../dom/nodes/PaintNode";
 
 import type { Container } from "./Container";
 import { exhaustiveCheck } from "./typeddash";
@@ -67,7 +64,7 @@ declare global {
     interface IntrinsicElements {
       skGroup: SkiaProps<GroupProps>;
       skLayer: SkiaProps<ChildrenProps>;
-      skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };
+      skPaint: SkiaProps<PaintProps>;
 
       // Drawings
       skFill: SkiaProps<DrawingNodeProps>;

package/src/renderer/HostConfig.ts

@@ -1,5 +1,6 @@
 /*global NodeJS*/
 import type { HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
 
 import type { NodeType, Node } from "../dom/types";
 import type { SkiaValue } from "../values";
@@ -67,7 +68,6 @@ export const skHostConfig: SkiaHostConfig = {
    * This function is used by the reconciler in order to calculate current time for prioritising work.
    */
   now: Date.now,
-
   supportsMutation: true,
   isPrimaryRenderer: false,
   supportsPersistence: false,
@@ -232,6 +232,13 @@ export const skHostConfig: SkiaHostConfig = {
   insertBefore: (parent, child, before) => {
     insertBefore(parent, child, before);
   },
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
 };
 
 const materialize = <P>(props: AnimatedProps<P>) => {

package/src/renderer/components/Mask.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
 import { BlendMode } from "../../skia/types";
-import { useCanvas } from "../useCanvas";
+import { useSkiaPrivate } from "../useCanvas";
 
 import { Group } from "./Group";
 
@@ -14,7 +14,7 @@ interface MaskProps {
 }
 
 export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
-  const { Skia } = useCanvas();
+  const Skia = useSkiaPrivate();
   const maskPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.Src);

package/src/renderer/components/Paint.tsx

@@ -1,19 +1,8 @@
-/* eslint-disable max-len */
-import React, { useRef, forwardRef } from "react";
+import React from "react";
 
 import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
-import type { PaintNode } from "../../dom/nodes/PaintNode";
 
-export const usePaintRef = () => {
-  console.log(`usePaintRef() is now deprecated.
-If you are using the layer property, simply pass the component directly: https://shopify.github.io/react-native-skia/docs/group#layer-effects.
-If you are using the paint property, please the following paint properties directly: https://shopify.github.io/react-native-skia/docs/paint/overview`);
-  return useRef<PaintNode>(null);
+export const Paint = (props: SkiaProps<DrawingNodeProps>) => {
+  return <skPaint {...props} />;
 };
-
-export const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(
-  (props, ref) => {
-    return <skPaint ref={ref} {...props} />;
-  }
-);

package/src/renderer/useCanvas.ts

@@ -14,8 +14,22 @@ export const CanvasProvider = CanvasContext.Provider;
 
 export const useCanvas = () => {
   const ctx = useContext(CanvasContext);
+  console.warn(
+    // eslint-disable-next-line max-len
+    "useCanvas is deprecated. use the onSize property instead: https://shopify.github.io/react-native-skia/docs/canvas/overview"
+  );
   if (!ctx) {
     throw new Error("Canvas context is not available");
   }
   return ctx;
 };
+
+// This private function will be removed once we remove the useCanvas hook and
+// implement the Mask component as a node (will be faster too)
+export const useSkiaPrivate = () => {
+  const ctx = useContext(CanvasContext);
+  if (!ctx) {
+    throw new Error("Canvas context is not available");
+  }
+  return ctx.Skia;
+};