react-native-skia-gesture 0.2.0 → 0.3.2

package/README.md

@@ -4,10 +4,6 @@ React Native Skia Gesture 🤌🏽
 
 _A detection system for React Native Skia components._
 
-<div align="center">
-    <img src="https://github.com/enzomanuelmangano/react-native-skia-gesture/blob/main/.assets/example.gif" title="react-native-skia-gesture">
-</div>
-
 ### Motivation
 
 React Native Skia, provides many declarative APIs for building screens using React Components. However, [Skia components are not real components, but abstract representations of a part of a drawing](https://github.com/Shopify/react-native-skia/issues/513#issuecomment-1290126304).
@@ -15,45 +11,57 @@ 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.157)](https://shopify.github.io/react-native-skia/docs/getting-started/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)**
 
-Open a Terminal in your project's folder and install the library using `yarn`:
+### Since v0.3.0
+
+You need to install Reanimated (v3.0.0+) and Gesture Handler (v2.0.0+)
 
 ```sh
-yarn add react-native-skia-gesture
+yarn add react-native-reanimated react-native-gesture-handler
 ```
 
-or with `npm`:
+### Install Skia Gesture
+
+Open a Terminal in your project's folder and then install the library using `yarn`:
 
 ```sh
-npm install react-native-skia-gesture
+yarn add react-native-skia-gesture
 ```
 
 ## Usage
 
 ```jsx
 import {
-  useValue,
-} from '@shopify/react-native-skia';
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import Touchable, {
   useGestureHandler,
 } from 'react-native-skia-gesture';
 
 export default function App() {
-  const cx = useValue(100);
-  const cy = useValue(100);
+  const cx = useSharedValue(100);
+  const cy = useSharedValue(100);
 
   const circleGesture = useGestureHandler<{ x: number; y: number }>({
     onStart: (_, context) => {
-      context.x = cx.current;
-      context.y = cy.current;
+      'worklet'; // Remember the 'worklet' keyword
+      context.x = cx.value;
+      context.y = cy.value;
     },
     onActive: ({ translationX, translationY }, context) => {
-      cx.current = context.x + translationX;
-      cy.current = context.y + translationY;
+      'worklet';
+      cx.value = context.x + translationX;
+      cy.value = context.y + translationY;
     },
   });
 
@@ -69,9 +77,9 @@ If the element is a **Circle**, **Rect**, **RoundedRect**, or a **Path** the pac
 
 ```jsx
 ...
-const touchablePath = useComputedValue(() => {
+const touchablePath = useDerivedValue(() => {
   const path = new Path();
-  path.addCircle(cx.current, cy.current, 50);
+  path.addCircle(cx.value, cy.value, 50);
   return path;
 }, [cx, cy]);
 
@@ -83,6 +91,40 @@ return (
 ...
 ```
 
+### Run the Gestures on JS thread
+
+You might want to run the gestures on the JS thread (but it's not recommended).
+However it could be useful if you want to slowly migrate from the v0.2.0 to the v0.3.0.
+
+To handle that you need to define the panGesture and pass it to the Touchable.Canvas
+
+```jsx
+import { Gesture } from 'react-native-gesture-handler';
+
+...
+
+const panGesture = Gesture.Pan().runOnJS(true)
+
+const circleGesture = useGestureHandler<{ x: number; y: number }>({
+  // You can avoid the 'worklet' keyword if you are running the gesture on JS thread
+  onStart: (_, context) => {
+    context.x = cx.value;
+    context.y = cy.value;
+  },
+  onActive: ({ translationX, translationY }, context) => {
+    cx.value = context.x + translationX;
+    cy.value = context.y + translationY;
+  },
+});
+
+return (
+  <Touchable.Canvas style={styles.fill} panGesture={panGesture}>
+    <Touchable.Circle cx={cx} cy={cy} r={50} color="red" {...circleGesture} />
+  </Touchable.Canvas>
+);
+
+```
+
 ## Ingredients
 
 ### `Canvas`
@@ -93,13 +135,28 @@ It's simply a Wrapper of Skia's Canvas.
 
 ### `withTouchableHandler`
 
-It's a HOC with which to wrap all Skia components with which you want to interact directly.
+It's a HOC with which to wrap all Skia components with which you want to interact directly. You will need to pass a `touchablePath` to the component.
 
 ```jsx
 import { Image } from '@shopify/react-native-skia';
 import { withTouchableHandler } from 'react-native-skia-gesture';
 
 const TouchableImage = withTouchableHandler(Image);
+const touchablePath = Skia.Path.Make().addCircle(x, y, 50);
+
+return (
+  <Touchable.Canvas style={styles.fill}>
+    <TouchableImage
+      image={image}
+      x={x}
+      y={y}
+      width={50}
+      height={50}
+      touchablePath={touchablePath}
+      {...circleGesture}
+    />
+  </Touchable.Canvas>
+);
 ```
 
 ---

package/lib/commonjs/canvas/canvas.js

@@ -6,75 +6,87 @@ Object.defineProperty(exports, "__esModule", {
 exports.Canvas = void 0;
 var _reactNativeSkia = require("@shopify/react-native-skia");
 var _react = _interopRequireWildcard(require("react"));
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 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; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const AnimatedSkiaCanvas = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSkia.Canvas);
+const Canvas = _ref => {
   let {
     children,
-    onTouch,
+    panGesture = _reactNativeGestureHandler.Gesture.Pan(),
+    timeoutBeforeCollectingRefs = 100,
     ...props
   } = _ref;
-  const touchableRefs = (0, _reactNativeSkia.useValue)({});
-  const activeKey = (0, _reactNativeSkia.useValue)([]);
-  const touchHandler = (0, _reactNativeSkia.useMultiTouchHandler)({
-    onStart: event => {
-      const keys = Object.keys(touchableRefs.current);
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        const touchableItem = touchableRefs.current[key];
-        if (touchableItem !== null && touchableItem !== void 0 && touchableItem.isPointInPath(event)) {
-          var _touchableItem$onStar;
-          activeKey.current.push(`${key}__${event.id}`);
-          (_touchableItem$onStar = touchableItem.onStart) === null || _touchableItem$onStar === void 0 ? void 0 : _touchableItem$onStar.call(touchableItem, event);
-          return;
-        }
-      }
-    },
-    onActive: event => {
-      var _activatedKey$split, _touchableItem$onActi;
-      const activatedKey = activeKey.current.find(key => key.includes(event.id.toString()));
-      if (!activatedKey) {
-        return;
-      }
-      const indexedKey = (_activatedKey$split = activatedKey.split('__')) === null || _activatedKey$split === void 0 ? void 0 : _activatedKey$split[0];
-      if (!indexedKey) {
-        return;
-      }
-      const touchableItem = touchableRefs.current[indexedKey];
-      return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
-    },
-    onEnd: event => {
-      var _activatedKey$split2, _touchableItem$onEnd;
-      const activatedKey = activeKey.current.find(key => key.includes(event.id.toString()));
-      if (!activatedKey) {
-        return;
-      }
-      const indexedKey = (_activatedKey$split2 = activatedKey.split('__')) === null || _activatedKey$split2 === void 0 ? void 0 : _activatedKey$split2[0];
-      if (!indexedKey) {
-        return;
+  // Instead of value, provide a subscribe method and reload the refs
+  const touchableRefs = (0, _react.useMemo)(() => {
+    return {
+      value: {}
+    };
+  }, []);
+  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)({});
+  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++) {
+      const key = keys[i];
+      const touchableItem = loadedRefs[key];
+      const isPointInPath = touchableItem === null || touchableItem === void 0 ? void 0 : touchableItem.isPointInPath(event);
+      if (isPointInPath && touchableItem !== null && touchableItem !== void 0 && touchableItem.onStart) {
+        var _touchableItem$onStar;
+        activeKey.value.push(`${key}__${event.handlerTag}`);
+        (_touchableItem$onStar = touchableItem.onStart) === null || _touchableItem$onStar === void 0 ? void 0 : _touchableItem$onStar.call(touchableItem, event);
       }
-      const touchableItem = touchableRefs.current[indexedKey];
-      activeKey.current = activeKey.current.filter(key => !key.includes(event.id.toString()));
-      return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onEnd = touchableItem.onEnd) === null || _touchableItem$onEnd === void 0 ? void 0 : _touchableItem$onEnd.call(touchableItem, event);
     }
-  }, [touchableRefs, activeKey]);
+  }).onUpdate(event => {
+    var _activatedKey$split, _touchableItem$onActi;
+    const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
+    if (!activatedKey) {
+      return;
+    }
+    const indexedKey = (_activatedKey$split = activatedKey.split('__')) === null || _activatedKey$split === void 0 ? void 0 : _activatedKey$split[0];
+    if (!indexedKey) {
+      return;
+    }
+    const touchableItem = loadedRefs[indexedKey];
+    return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
+  }).onFinalize(event => {
+    var _activatedKey$split2, _touchableItem$onEnd;
+    const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
+    if (!activatedKey) {
+      return;
+    }
+    const indexedKey = (_activatedKey$split2 = activatedKey.split('__')) === null || _activatedKey$split2 === void 0 ? void 0 : _activatedKey$split2[0];
+    if (!indexedKey) {
+      return;
+    }
+    const touchableItem = loadedRefs[indexedKey];
+    activeKey.value = activeKey.value.filter(key => !key.includes(event.handlerTag.toString()));
+    return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onEnd = touchableItem.onEnd) === null || _touchableItem$onEnd === void 0 ? void 0 : _touchableItem$onEnd.call(touchableItem, event);
+  });
   (0, _react.useEffect)(() => {
     return () => {
-      touchableRefs.current = {};
+      touchableRefs.value = {};
     };
   }, [touchableRefs]);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, _extends({
-    ref: ref
-  }, props, {
-    onTouch: touchInfo => {
-      touchHandler(touchInfo);
-      return onTouch === null || onTouch === void 0 ? void 0 : onTouch(touchInfo);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_context.TouchHandlerContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
+    gesture: mainGesture
+  }, /*#__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","React","forwardRef","ref","children","onTouch","props","touchableRefs","useValue","activeKey","touchHandler","useMultiTouchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","push","id","onActive","activatedKey","find","includes","toString","indexedKey","split","onEnd","filter","useEffect","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
+{"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/commonjs/canvas/context.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 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 TouchHandlerContext = /*#__PURE__*/_react.default.createContext({
-  current: {}
+  value: {}
 });
 exports.TouchHandlerContext = TouchHandlerContext;
 const useTouchHandlerContext = () => {

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

@@ -1 +1 @@
-{"version":3,"names":["TouchHandlerContext","React","createContext","current","useTouchHandlerContext","useContext"],"sourceRoot":"../../src","sources":["context.tsx"],"mappings":";;;;;;AAKA;AAA0C;AAAA;AAa1C,MAAMA,mBAAmB,gBAAGC,cAAK,CAACC,aAAa,CAA8B;EAC3EC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAAC;AAEH,MAAMC,sBAAsB,GAAG,MAAM;EACnC,OAAO,IAAAC,iBAAU,EAACL,mBAAmB,CAAC;AACxC,CAAC;AAAC"}
+{"version":3,"names":["TouchHandlerContext","React","createContext","value","useTouchHandlerContext","useContext"],"sourceRoot":"../../src","sources":["context.tsx"],"mappings":";;;;;;AAAA;AAA0C;AAAA;AA2B1C,MAAMA,mBAAmB,gBAAGC,cAAK,CAACC,aAAa,CAA8B;EAC3EC,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AAAC;AAEH,MAAMC,sBAAsB,GAAG,MAAM;EACnC,OAAO,IAAAC,iBAAU,EAACL,mBAAmB,CAAC;AACxC,CAAC;AAAC"}

package/lib/commonjs/components/index.js

@@ -13,12 +13,12 @@ exports.RoundedRect = exports.Rect = exports.Path = exports.Circle = void 0;
 var _reactNativeSkia = require("@shopify/react-native-skia");
 var _hoc = require("../hoc");
 var _canvas = require("../canvas");
-const Circle = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Circle);
+const Circle = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Circle, 'Circle');
 exports.Circle = Circle;
-const RoundedRect = (0, _hoc.withTouchableHandler)(_reactNativeSkia.RoundedRect);
+const RoundedRect = (0, _hoc.withTouchableHandler)(_reactNativeSkia.RoundedRect, 'RoundedRect');
 exports.RoundedRect = RoundedRect;
-const Rect = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Rect);
+const Rect = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Rect, 'Rect');
 exports.Rect = Rect;
-const Path = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Path);
+const Path = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Path, 'Path');
 exports.Path = Path;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Circle","withTouchableHandler","SkiaCircle","RoundedRect","SkiaRoundedRect","Rect","SkiaRect","Path","SkiaPath"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;AAAA;AAMA;AAEA;AAEO,MAAMA,MAAM,GAAG,IAAAC,yBAAoB,EAACC,uBAAU,CAAC;AAAC;AAChD,MAAMC,WAAW,GAAG,IAAAF,yBAAoB,EAACG,4BAAe,CAAC;AAAC;AAC1D,MAAMC,IAAI,GAAG,IAAAJ,yBAAoB,EAACK,qBAAQ,CAAC;AAAC;AAC5C,MAAMC,IAAI,GAAG,IAAAN,yBAAoB,EAACO,qBAAQ,CAAC;AAAC"}
+{"version":3,"names":["Circle","withTouchableHandler","SkiaCircle","RoundedRect","SkiaRoundedRect","Rect","SkiaRect","Path","SkiaPath"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;AAAA;AAOA;AAEA;AAEO,MAAMA,MAAM,GAAG,IAAAC,yBAAoB,EAACC,uBAAU,EAAE,QAAQ,CAAC;AAAC;AAC1D,MAAMC,WAAW,GAAG,IAAAF,yBAAoB,EAACG,4BAAe,EAAE,aAAa,CAAC;AAAC;AACzE,MAAMC,IAAI,GAAG,IAAAJ,yBAAoB,EAACK,qBAAQ,EAAE,MAAM,CAAC;AAAC;AACpD,MAAMC,IAAI,GAAG,IAAAN,yBAAoB,EAACO,qBAAQ,EAAE,MAAM,CAAC;AAAC"}

package/lib/commonjs/hoc/with-touchable-handler.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withTouchableHandler = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
+exports.withTouchableHandler = exports.getSkiaPath = void 0;
 var _react = require("react");
+var _context = require("../canvas/context");
 var _getCirclePath = require("../utils/get-circle-path");
 var _getRectPath = require("../utils/get-rect-path");
 var _unwrapAnimatedValue = require("../utils/unwrap-animated-value");
-var _context = require("../canvas/context");
 const getSkiaPath = (key, props) => {
+  'worklet';
+
   const unwrappedProps = (0, _unwrapAnimatedValue.unwrapAnimatedValueObject)(props);
   switch (key) {
     case 'Circle':
@@ -25,7 +26,8 @@ const getSkiaPath = (key, props) => {
       return null;
   }
 };
-const withTouchableHandler = Component => {
+exports.getSkiaPath = getSkiaPath;
+const withTouchableHandler = (Component, componentName) => {
   return _ref => {
     let {
       onStart: onStartProp,
@@ -36,59 +38,52 @@ const withTouchableHandler = Component => {
     } = _ref;
     const id = (0, _react.useId)();
     const ref = (0, _context.useTouchHandlerContext)();
-    const startingPoint = (0, _reactNativeSkia.useValue)(null);
     const onStart = (0, _react.useCallback)(event => {
-      startingPoint.current = {
-        x: event.x,
-        y: event.y
-      };
+      'worklet';
+
       return onStartProp === null || onStartProp === void 0 ? void 0 : onStartProp(event);
-    }, [onStartProp, startingPoint]);
+    }, [onStartProp]);
     const onActive = (0, _react.useCallback)(event => {
-      var _startingPoint$curren, _startingPoint$curren2;
-      const translationX = event.x - (((_startingPoint$curren = startingPoint.current) === null || _startingPoint$curren === void 0 ? void 0 : _startingPoint$curren.x) ?? 0);
-      const translationY = event.y - (((_startingPoint$curren2 = startingPoint.current) === null || _startingPoint$curren2 === void 0 ? void 0 : _startingPoint$curren2.y) ?? 0);
-      return onActiveProp === null || onActiveProp === void 0 ? void 0 : onActiveProp({
-        ...event,
-        translationX,
-        translationY
-      });
-    }, [onActiveProp, startingPoint]);
+      'worklet';
+
+      return onActiveProp === null || onActiveProp === void 0 ? void 0 : onActiveProp(event);
+    }, [onActiveProp]);
     const onEnd = (0, _react.useCallback)(event => {
-      var _startingPoint$curren3, _startingPoint$curren4;
-      const translationX = event.x - (((_startingPoint$curren3 = startingPoint.current) === null || _startingPoint$curren3 === void 0 ? void 0 : _startingPoint$curren3.x) ?? 0);
-      const translationY = event.y - (((_startingPoint$curren4 = startingPoint.current) === null || _startingPoint$curren4 === void 0 ? void 0 : _startingPoint$curren4.y) ?? 0);
-      return onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp({
-        ...event,
-        translationX,
-        translationY
-      });
-    }, [onEndProp, startingPoint]);
+      'worklet';
+
+      return onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp(event);
+    }, [onEndProp]);
     const isPointInPath = (0, _react.useCallback)(point => {
+      'worklet';
+
       if (touchablePath) {
         return (0, _unwrapAnimatedValue.unwrapAnimatedValue)(touchablePath).contains(point.x, point.y);
       }
-      const path = getSkiaPath(Component.name, props);
+      if (!componentName) return false;
+      const path = getSkiaPath(componentName, props);
       if (!path) {
         throw Error('No touchablePath provided');
       }
       return path.contains(point.x, point.y);
     }, [props, touchablePath]);
     (0, _react.useEffect)(() => {
-      ref.current = {
+      ref.value = {
         [`id:${id}`]: {
           isPointInPath,
           onStart,
           onActive,
           onEnd
         },
-        ...ref.current
+        ...ref.value
       };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, isPointInPath, onActive, onEnd, onStart]);
+    (0, _react.useEffect)(() => {
       return () => {
-        var _ref$current;
-        (_ref$current = ref.current) === null || _ref$current === void 0 ? true : delete _ref$current[id];
+        var _ref$value;
+        (_ref$value = ref.value) === null || _ref$value === void 0 ? true : delete _ref$value[`id:${id}`];
       };
-    }, [id, isPointInPath, onActive, onEnd, onStart, ref, touchablePath]);
+    }, [id, props, ref, touchablePath]);
     return Component(props);
   };
 };

package/lib/commonjs/hoc/with-touchable-handler.js.map

@@ -1 +1 @@
-{"version":3,"names":["getSkiaPath","key","props","unwrappedProps","unwrapAnimatedValueObject","getCirclePath","getRectPath","getRoundedRectPath","path","withTouchableHandler","Component","onStart","onStartProp","onActive","onActiveProp","onEnd","onEndProp","touchablePath","id","useId","ref","useTouchHandlerContext","startingPoint","useValue","useCallback","event","current","x","y","translationX","translationY","isPointInPath","point","unwrapAnimatedValue","contains","name","Error","useEffect"],"sourceRoot":"../../src","sources":["with-touchable-handler.tsx"],"mappings":"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"}
+{"version":3,"names":["getSkiaPath","key","props","unwrappedProps","unwrapAnimatedValueObject","getCirclePath","getRectPath","getRoundedRectPath","path","withTouchableHandler","Component","componentName","onStart","onStartProp","onActive","onActiveProp","onEnd","onEndProp","touchablePath","id","useId","ref","useTouchHandlerContext","useCallback","event","isPointInPath","point","unwrapAnimatedValue","contains","x","y","Error","useEffect","value"],"sourceRoot":"../../src","sources":["with-touchable-handler.tsx"],"mappings":"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"}

package/lib/commonjs/hooks/use-gesture-handler.js

@@ -4,26 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGestureHandler = void 0;
-var _reactNativeSkia = require("@shopify/react-native-skia");
 var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
 const useGestureHandler = gestureHandlers => {
   const {
     onStart,
     onActive,
     onEnd
   } = gestureHandlers;
-  const context = (0, _reactNativeSkia.useValue)({});
+  const context = (0, _reactNativeReanimated.useSharedValue)({});
   const handleStart = (0, _react.useCallback)(touchInfo => {
+    'worklet';
+
     if (!onStart) return;
-    return onStart(touchInfo, context.current);
+    return onStart(touchInfo, context.value);
   }, [context, onStart]);
   const handleActive = (0, _react.useCallback)(extendedTouchInfo => {
+    'worklet';
+
     if (!onActive) return;
-    return onActive(extendedTouchInfo, context.current);
+    return onActive(extendedTouchInfo, context.value);
   }, [context, onActive]);
   const handleEnd = (0, _react.useCallback)(extendedTouchInfo => {
+    'worklet';
+
     if (!onEnd) return;
-    return onEnd(extendedTouchInfo, context.current);
+    return onEnd(extendedTouchInfo, context.value);
   }, [context, onEnd]);
   return {
     onStart: handleStart,

package/lib/commonjs/hooks/use-gesture-handler.js.map

@@ -1 +1 @@
-{"version":3,"names":["useGestureHandler","gestureHandlers","onStart","onActive","onEnd","context","useValue","handleStart","useCallback","touchInfo","current","handleActive","extendedTouchInfo","handleEnd"],"sourceRoot":"../../src","sources":["use-gesture-handler.ts"],"mappings":";;;;;;AAAA;AAKA;AAeA,MAAMA,iBAAiB,GACrBC,eAAqD,IAClD;EACH,MAAM;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,eAAe;EAEpD,MAAMI,OAAO,GAAG,IAAAC,yBAAQ,EAAc,CAAC,CAAC,CAAQ;EAEhD,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC5BC,SAAoB,IAAK;IACxB,IAAI,CAACP,OAAO,EAAE;IACd,OAAOA,OAAO,CAACO,SAAS,EAAEJ,OAAO,CAACK,OAAO,CAAC;EAC5C,CAAC,EACD,CAACL,OAAO,EAAEH,OAAO,CAAC,CACnB;EAED,MAAMS,YAAY,GAAG,IAAAH,kBAAW,EAC7BI,iBAAsD,IAAK;IAC1D,IAAI,CAACT,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAACS,iBAAiB,EAAEP,OAAO,CAACK,OAAO,CAAC;EACrD,CAAC,EACD,CAACL,OAAO,EAAEF,QAAQ,CAAC,CACpB;EAED,MAAMU,SAAS,GAAG,IAAAL,kBAAW,EAC1BI,iBAAsD,IAAK;IAC1D,IAAI,CAACR,KAAK,EAAE;IACZ,OAAOA,KAAK,CAACQ,iBAAiB,EAAEP,OAAO,CAACK,OAAO,CAAC;EAClD,CAAC,EACD,CAACL,OAAO,EAAED,KAAK,CAAC,CACjB;EAED,OAAO;IACLF,OAAO,EAAEK,WAAW;IACpBJ,QAAQ,EAAEQ,YAAY;IACtBP,KAAK,EAAES;EACT,CAAC;AACH,CAAC;AAAC"}
+{"version":3,"names":["useGestureHandler","gestureHandlers","onStart","onActive","onEnd","context","useSharedValue","handleStart","useCallback","touchInfo","value","handleActive","extendedTouchInfo","handleEnd"],"sourceRoot":"../../src","sources":["use-gesture-handler.ts"],"mappings":";;;;;;AAAA;AACA;AAuBA,MAAMA,iBAAiB,GACrBC,eAAqD,IAClD;EACH,MAAM;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,eAAe;EAEpD,MAAMI,OAAO,GAAG,IAAAC,qCAAc,EAAc,CAAC,CAAC,CAAQ;EAEtD,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC5BC,SAAiE,IAAK;IACrE,SAAS;;IACT,IAAI,CAACP,OAAO,EAAE;IACd,OAAOA,OAAO,CAACO,SAAS,EAAEJ,OAAO,CAACK,KAAK,CAAC;EAC1C,CAAC,EACD,CAACL,OAAO,EAAEH,OAAO,CAAC,CACnB;EAED,MAAMS,YAAY,GAAG,IAAAH,kBAAW,EAC7BI,iBAAoE,IAAK;IACxE,SAAS;;IACT,IAAI,CAACT,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAACS,iBAAiB,EAAEP,OAAO,CAACK,KAAK,CAAC;EACnD,CAAC,EACD,CAACL,OAAO,EAAEF,QAAQ,CAAC,CACpB;EAED,MAAMU,SAAS,GAAG,IAAAL,kBAAW,EAEzBI,iBAAyE,IACtE;IACH,SAAS;;IACT,IAAI,CAACR,KAAK,EAAE;IACZ,OAAOA,KAAK,CAACQ,iBAAiB,EAAEP,OAAO,CAACK,KAAK,CAAC;EAChD,CAAC,EACD,CAACL,OAAO,EAAED,KAAK,CAAC,CACjB;EAED,OAAO;IACLF,OAAO,EAAEK,WAAW;IACpBJ,QAAQ,EAAEQ,YAAY;IACtBP,KAAK,EAAES;EACT,CAAC;AACH,CAAC;AAAC"}

package/lib/commonjs/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {};
 exports.default = void 0;
+var Touchable = _interopRequireWildcard(require("./components"));
 var _hoc = require("./hoc");
 Object.keys(_hoc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -29,7 +30,6 @@ Object.keys(_useGestureHandler).forEach(function (key) {
     }
   });
 });
-var Touchable = _interopRequireWildcard(require("./components"));
 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; }
 var _default = Touchable;

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Touchable"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAA0C;AAAA;AAAA,eAE3BA,SAAS;AAAA"}
+{"version":3,"names":["Touchable"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAA4C;AAAA;AAAA,eAE7BA,SAAS;AAAA"}

package/lib/commonjs/utils/get-circle-path.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getCirclePath = void 0;
 var _reactNativeSkia = require("@shopify/react-native-skia");
 const getCirclePath = _ref => {
+  'worklet';
+
   let {
     cx,
     cy,

package/lib/commonjs/utils/get-circle-path.js.map

@@ -1 +1 @@
-{"version":3,"names":["getCirclePath","cx","cy","r","Skia","Path","Make","addCircle"],"sourceRoot":"../../src","sources":["get-circle-path.ts"],"mappings":";;;;;;AAAA;AAIO,MAAMA,aAAa,GAAG,QAAwC;EAAA,IAAvC;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAuB,CAAC;EAC9D,OAAOC,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE,CAACC,SAAS,CAACN,EAAE,EAAEC,EAAE,EAAEC,CAAC,CAAC;AAC9C,CAAC;AAAC"}
+{"version":3,"names":["getCirclePath","cx","cy","r","Skia","Path","Make","addCircle"],"sourceRoot":"../../src","sources":["get-circle-path.ts"],"mappings":";;;;;;AAAA;AAIO,MAAMA,aAAa,GAAG,QAAwC;EACnE,SAAS;;EAAC,IADkB;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAuB,CAAC;EAE9D,OAAOC,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE,CAACC,SAAS,CAACN,EAAE,EAAEC,EAAE,EAAEC,CAAC,CAAC;AAC9C,CAAC;AAAC"}