react-native-skia-gesture 0.3.1 → 0.3.2

package/README.md

@@ -11,6 +11,12 @@ Therefore direct interactions with individual Skia components can only be achiev
 
 This package, simply provides a set of APIs to be able to interact directly with individual components.
 
+
+<a href="https://github.com/enzomanuelmangano/react-native-skia-gesture"> 
+  <img src="https://raw.githubusercontent.com/enzomanuelmangano/react-native-skia-gesture/main/.assets/demo.gif" title="react-native-skia-gesture">
+</a>
+
+
 ## Installation
 
 **You need to have already installed [@shopify/react-native-skia (>= 0.1.221)](https://shopify.github.io/react-native-skia/docs/getting-started/installation)**

package/lib/commonjs/canvas/canvas.js

@@ -11,10 +11,12 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _context = require("./context");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const AnimatedSkiaCanvas = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSkia.Canvas);
 const Canvas = _ref => {
   let {
     children,
     panGesture = _reactNativeGestureHandler.Gesture.Pan(),
+    timeoutBeforeCollectingRefs = 100,
     ...props
   } = _ref;
   // Instead of value, provide a subscribe method and reload the refs
@@ -24,10 +26,19 @@ const Canvas = _ref => {
     };
   }, []);
   const activeKey = (0, _reactNativeReanimated.useSharedValue)([]);
+
+  // This must be improved, it's a hack to wait for the refs to be loaded
   const [loadedRefs, prepareLoadedRefs] = (0, _react.useState)({});
-  setTimeout(() => {
-    prepareLoadedRefs(touchableRefs.value);
-  }, 1000);
+  const ref = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    ref.current = setTimeout(() => {
+      prepareLoadedRefs(touchableRefs.value);
+    }, timeoutBeforeCollectingRefs);
+    return () => {
+      clearTimeout(ref.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeoutBeforeCollectingRefs]);
   const mainGesture = panGesture.onBegin(event => {
     const keys = Object.keys(loadedRefs);
     for (let i = 0; i < keys.length; i++) {
@@ -73,9 +84,9 @@ const Canvas = _ref => {
   }, [touchableRefs]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
     gesture: mainGesture
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, null, /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, props, /*#__PURE__*/_react.default.createElement(_context.TouchHandlerContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(AnimatedSkiaCanvas, props, /*#__PURE__*/_react.default.createElement(_context.TouchHandlerContext.Provider, {
     value: touchableRefs
-  }, children))));
+  }, children)));
 };
 exports.Canvas = Canvas;
 //# sourceMappingURL=canvas.js.map

package/lib/commonjs/canvas/canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["Canvas","children","panGesture","Gesture","Pan","props","touchableRefs","useMemo","value","activeKey","useSharedValue","loadedRefs","prepareLoadedRefs","useState","setTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","push","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd","useEffect"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAKA;AAEA;AAGmB;AAAA;AAQnB,MAAMA,MAAsC,GAAG,QAIzC;EAAA,IAJ0C;IAC9CC,QAAQ;IACRC,UAAU,GAAGC,kCAAO,CAACC,GAAG,EAAE;IAC1B,GAAGC;EACL,CAAC;EACC;EACA,MAAMC,aAA0C,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC/D,OAAO;MAAEC,KAAK,EAAE,CAAC;IAAE,CAAC;EACtB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,SAAS,GAAG,IAAAC,qCAAc,EAAW,EAAE,CAAC;EAE9C,MAAM,CAACC,UAAU,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAE9C,CAAC,CAAC,CAAC;EAELC,UAAU,CAAC,MAAM;IACfF,iBAAiB,CAACN,aAAa,CAACE,KAAK,CAAC;EACxC,CAAC,EAAE,IAAI,CAAC;EAER,MAAMO,WAAW,GAAGb,UAAU,CAC3Bc,OAAO,CAAEC,KAAK,IAAK;IAClB,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACP,UAAU,CAAC;IACpC,KAAK,IAAIS,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,IAAI,CAACG,MAAM,EAAED,CAAC,EAAE,EAAE;MACpC,MAAME,GAAG,GAAGJ,IAAI,CAACE,CAAC,CAAW;MAC7B,MAAMG,aAAa,GAAGZ,UAAU,CAACW,GAAG,CAAC;MACrC,MAAME,aAAa,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEC,aAAa,CAACP,KAAK,CAAC;MACzD,IAAIO,aAAa,IAAID,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEE,OAAO,EAAE;QAAA;QAC3ChB,SAAS,CAACD,KAAK,CAACkB,IAAI,CAAE,GAAEJ,GAAI,KAAIL,KAAK,CAACU,UAAW,EAAC,CAAC;QACnD,yBAAAJ,aAAa,CAACE,OAAO,0DAArB,2BAAAF,aAAa,EAAWN,KAAK,CAAC;MAChC;IACF;EACF,CAAC,CAAC,CACDW,QAAQ,CAAEX,KAAK,IAAK;IAAA;IACnB,MAAMY,YAAY,GAAGpB,SAAS,CAACD,KAAK,CAACsB,IAAI,CAAER,GAAG,IAC5CA,GAAG,CAACS,QAAQ,CAACd,KAAK,CAACU,UAAU,CAACK,QAAQ,EAAE,CAAC,CAC1C;IAED,IAAI,CAACH,YAAY,EAAE;MACjB;IACF;IACA,MAAMI,UAAU,0BAAGJ,YAAY,CAACK,KAAK,CAAC,IAAI,CAAC,wDAAxB,oBAA2B,CAAC,CAAC;IAEhD,IAAI,CAACD,UAAU,EAAE;MACf;IACF;IACA,MAAMV,aAAa,GAAGZ,UAAU,CAACsB,UAAU,CAAC;IAE5C,OAAOV,aAAa,aAAbA,aAAa,gDAAbA,aAAa,CAAEY,QAAQ,0DAAvB,2BAAAZ,aAAa,EAAaN,KAAK,CAAC;EACzC,CAAC,CAAC,CACDmB,UAAU,CAAEnB,KAAK,IAAK;IAAA;IACrB,MAAMY,YAAY,GAAGpB,SAAS,CAACD,KAAK,CAACsB,IAAI,CAAER,GAAG,IAC5CA,GAAG,CAACS,QAAQ,CAACd,KAAK,CAACU,UAAU,CAACK,QAAQ,EAAE,CAAC,CAC1C;IACD,IAAI,CAACH,YAAY,EAAE;MACjB;IACF;IACA,MAAMI,UAAU,2BAAGJ,YAAY,CAACK,KAAK,CAAC,IAAI,CAAC,yDAAxB,qBAA2B,CAAC,CAAC;IAChD,IAAI,CAACD,UAAU,EAAE;MACf;IACF;IACA,MAAMV,aAAa,GAAGZ,UAAU,CAACsB,UAAU,CAAC;IAC5CxB,SAAS,CAACD,KAAK,GAAGC,SAAS,CAACD,KAAK,CAAC6B,MAAM,CACrCf,GAAG,IAAK,CAACA,GAAG,CAACS,QAAQ,CAACd,KAAK,CAACU,UAAU,CAACK,QAAQ,EAAE,CAAC,CACpD;IACD,OAAOT,aAAa,aAAbA,aAAa,+CAAbA,aAAa,CAAEe,KAAK,yDAApB,0BAAAf,aAAa,EAAUN,KAAK,CAAQ;EAC7C,CAAC,CAAC;EAEJ,IAAAsB,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACXjC,aAAa,CAACE,KAAK,GAAG,CAAC,CAAC;IAC1B,CAAC;EACH,CAAC,EAAE,CAACF,aAAa,CAAC,CAAC;EAEnB,oBACE,6BAAC,0CAAe;IAAC,OAAO,EAAES;EAAY,gBACpC,6BAAC,8BAAQ,CAAC,IAAI,qBACZ,6BAAC,uBAAU,EAAKV,KAAK,eACnB,6BAAC,4BAAmB,CAAC,QAAQ;IAAC,KAAK,EAAEC;EAAc,GAChDL,QAAQ,CACoB,CACpB,CACC,CACA;AAEtB,CAAC;AAAC"}
+{"version":3,"names":["AnimatedSkiaCanvas","Animated","createAnimatedComponent","SkiaCanvas","Canvas","children","panGesture","Gesture","Pan","timeoutBeforeCollectingRefs","props","touchableRefs","useMemo","value","activeKey","useSharedValue","loadedRefs","prepareLoadedRefs","useState","ref","useRef","useEffect","current","setTimeout","clearTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","push","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}

package/lib/module/canvas/canvas.js

@@ -1,12 +1,14 @@
 import { Canvas as SkiaCanvas } from '@shopify/react-native-skia';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useSharedValue } from 'react-native-reanimated';
 import { TouchHandlerContext } from './context';
+const AnimatedSkiaCanvas = Animated.createAnimatedComponent(SkiaCanvas);
 const Canvas = _ref => {
   let {
     children,
     panGesture = Gesture.Pan(),
+    timeoutBeforeCollectingRefs = 100,
     ...props
   } = _ref;
   // Instead of value, provide a subscribe method and reload the refs
@@ -16,10 +18,19 @@ const Canvas = _ref => {
     };
   }, []);
   const activeKey = useSharedValue([]);
+
+  // This must be improved, it's a hack to wait for the refs to be loaded
   const [loadedRefs, prepareLoadedRefs] = useState({});
-  setTimeout(() => {
-    prepareLoadedRefs(touchableRefs.value);
-  }, 1000);
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = setTimeout(() => {
+      prepareLoadedRefs(touchableRefs.value);
+    }, timeoutBeforeCollectingRefs);
+    return () => {
+      clearTimeout(ref.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeoutBeforeCollectingRefs]);
   const mainGesture = panGesture.onBegin(event => {
     const keys = Object.keys(loadedRefs);
     for (let i = 0; i < keys.length; i++) {
@@ -65,9 +76,9 @@ const Canvas = _ref => {
   }, [touchableRefs]);
   return /*#__PURE__*/React.createElement(GestureDetector, {
     gesture: mainGesture
-  }, /*#__PURE__*/React.createElement(Animated.View, null, /*#__PURE__*/React.createElement(SkiaCanvas, props, /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
+  }, /*#__PURE__*/React.createElement(AnimatedSkiaCanvas, props, /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
     value: touchableRefs
-  }, children))));
+  }, children)));
 };
 export { Canvas };
 //# sourceMappingURL=canvas.js.map

package/lib/module/canvas/canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["Canvas","SkiaCanvas","React","useEffect","useMemo","useState","Gesture","GestureDetector","Animated","useSharedValue","TouchHandlerContext","children","panGesture","Pan","props","touchableRefs","value","activeKey","loadedRefs","prepareLoadedRefs","setTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","push","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
+{"version":3,"names":["Canvas","SkiaCanvas","React","useEffect","useMemo","useRef","useState","Gesture","GestureDetector","Animated","useSharedValue","TouchHandlerContext","AnimatedSkiaCanvas","createAnimatedComponent","children","panGesture","Pan","timeoutBeforeCollectingRefs","props","touchableRefs","value","activeKey","loadedRefs","prepareLoadedRefs","ref","current","setTimeout","clearTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","push","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}

package/lib/typescript/canvas/canvas.d.ts

@@ -3,6 +3,7 @@ import { PanGesture } from 'react-native-gesture-handler';
 import type { CanvasProps } from '@shopify/react-native-skia';
 type TouchableCanvasProps = CanvasProps & {
     panGesture?: PanGesture;
+    timeoutBeforeCollectingRefs?: number;
 };
 declare const Canvas: React.FC<TouchableCanvasProps>;
 export { Canvas };

package/lib/typescript/canvas/canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAGL,UAAU,EACX,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqF1C,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAGL,UAAU,EACX,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8F1C,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -2,8 +2,8 @@ export { Canvas } from '../canvas';
 export declare const Circle: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").CircleProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
 export declare const RoundedRect: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").RoundedRectProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
 export declare const Rect: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").RectProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
-export declare const Path: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: Omit<import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").PathProps, never>, "start" | "end"> & {
-    start?: import("@shopify/react-native-skia").AnimatedProp<number, any> | undefined;
+export declare const Path: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: Omit<import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").PathProps, never>, "end" | "start"> & {
     end?: import("@shopify/react-native-skia").AnimatedProp<number, any> | undefined;
+    start?: import("@shopify/react-native-skia").AnimatedProp<number, any> | undefined;
 } & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-skia-gesture",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A detection system for React Native Skia components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/canvas/canvas.tsx

@@ -1,5 +1,5 @@
 import { Canvas as SkiaCanvas } from '@shopify/react-native-skia';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Gesture,
   GestureDetector,
@@ -16,11 +16,15 @@ import type { CanvasProps } from '@shopify/react-native-skia';
 
 type TouchableCanvasProps = CanvasProps & {
   panGesture?: PanGesture;
+  timeoutBeforeCollectingRefs?: number; // default 100
 };
 
+const AnimatedSkiaCanvas = Animated.createAnimatedComponent(SkiaCanvas);
+
 const Canvas: React.FC<TouchableCanvasProps> = ({
   children,
   panGesture = Gesture.Pan(),
+  timeoutBeforeCollectingRefs = 100,
   ...props
 }) => {
   // Instead of value, provide a subscribe method and reload the refs
@@ -30,13 +34,23 @@ const Canvas: React.FC<TouchableCanvasProps> = ({
 
   const activeKey = useSharedValue<string[]>([]);
 
+  // This must be improved, it's a hack to wait for the refs to be loaded
   const [loadedRefs, prepareLoadedRefs] = useState<
     TouchableHandlerContextType['value']
   >({});
 
-  setTimeout(() => {
-    prepareLoadedRefs(touchableRefs.value);
-  }, 1000);
+  const ref = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    ref.current = setTimeout(() => {
+      prepareLoadedRefs(touchableRefs.value);
+    }, timeoutBeforeCollectingRefs);
+
+    return () => {
+      clearTimeout(ref.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeoutBeforeCollectingRefs]);
 
   const mainGesture = panGesture
     .onBegin((event) => {
@@ -94,13 +108,11 @@ const Canvas: React.FC<TouchableCanvasProps> = ({
 
   return (
     <GestureDetector gesture={mainGesture}>
-      <Animated.View>
-        <SkiaCanvas {...props}>
-          <TouchHandlerContext.Provider value={touchableRefs}>
-            {children}
-          </TouchHandlerContext.Provider>
-        </SkiaCanvas>
-      </Animated.View>
+      <AnimatedSkiaCanvas {...props}>
+        <TouchHandlerContext.Provider value={touchableRefs}>
+          {children}
+        </TouchHandlerContext.Provider>
+      </AnimatedSkiaCanvas>
     </GestureDetector>
   );
 };