react-native-skia-gesture 0.2.0 → 0.3.1

package/lib/typescript/hoc/with-touchable-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-touchable-handler.d.ts","sourceRoot":"","sources":["../../../src/hoc/with-touchable-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,SAAS,EAGf,MAAM,4BAA4B,CAAC;AAUpC,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,eAAe,KAAK,IAAI,CAAC;IACnE,KAAK,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,eAAe,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAmBvE,QAAA,MAAM,oBAAoB,0DAC4B,WAAW,+IA2EhE,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"with-touchable-handler.d.ts","sourceRoot":"","sources":["../../../src/hoc/with-touchable-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,MAAM,EAEZ,MAAM,4BAA4B,CAAC;AAWpC,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAClB,6BAA6B,EAC9B,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,CACP,SAAS,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,KAC9D,IAAI,CAAC;IACV,QAAQ,EAAE,CACR,SAAS,EAAE,kBAAkB,CAAC,6BAA6B,CAAC,KACzD,IAAI,CAAC;IACV,KAAK,EAAE,CACL,SAAS,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,KAC9D,IAAI,CAAC;IACV,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW,QAAS,MAAM,SAAS,GAAG,QAgBlD,CAAC;AAEF,QAAA,MAAM,oBAAoB,0DAC4B,WAAW,kBAC/C,MAAM,+IAyEvB,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/typescript/hooks/use-gesture-handler.d.ts

@@ -1,14 +1,13 @@
-import { type ExtendedTouchInfo, type TouchInfo } from '@shopify/react-native-skia';
-import type { TranslationInfo } from '../hoc';
+import type { GestureStateChangeEvent, GestureUpdateEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
 type UseGestureHandlerParams<ContextType> = {
-    onStart?: (touchInfo: TouchInfo, context: ContextType) => void;
-    onActive?: (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo, context: ContextType) => void;
-    onEnd?: (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo, context: ContextType) => void;
+    onStart?: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>, context: ContextType) => void;
+    onActive?: (touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>, context: ContextType) => void;
+    onEnd?: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>, context: ContextType) => void;
 };
 declare const useGestureHandler: <ContextType>(gestureHandlers: UseGestureHandlerParams<ContextType>) => {
-    onStart: (touchInfo: TouchInfo) => void;
-    onActive: (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => void;
-    onEnd: (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => void;
+    onStart: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+    onActive: (extendedTouchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+    onEnd: (extendedTouchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
 };
 export { useGestureHandler };
 //# sourceMappingURL=use-gesture-handler.d.ts.map

package/lib/typescript/hooks/use-gesture-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-gesture-handler.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-gesture-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAEf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,KAAK,uBAAuB,CAAC,WAAW,IAAI;IAC1C,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CACT,iBAAiB,EAAE,iBAAiB,GAAG,eAAe,EACtD,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,CACN,iBAAiB,EAAE,iBAAiB,GAAG,eAAe,EACtD,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;CACX,CAAC;AAEF,QAAA,MAAM,iBAAiB;yBAQP,SAAS;kCAQD,iBAAiB,GAAG,eAAe;+BAQnC,iBAAiB,GAAG,eAAe;CAY1D,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"use-gesture-handler.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-gesture-handler.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAClB,6BAA6B,EAC9B,MAAM,8BAA8B,CAAC;AAEtC,KAAK,uBAAuB,CAAC,WAAW,IAAI;IAC1C,OAAO,CAAC,EAAE,CACR,SAAS,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,EACjE,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,CACT,SAAS,EAAE,kBAAkB,CAAC,6BAA6B,CAAC,EAC5D,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,CACN,SAAS,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,EACjE,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;CACX,CAAC;AAEF,QAAA,MAAM,iBAAiB;yBAQP,wBAAwB,6BAA6B,CAAC;kCAS9C,mBAAmB,6BAA6B,CAAC;+BAUhD,wBAAwB,6BAA6B,CAAC;CAc9E,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,5 +1,5 @@
+import * as Touchable from './components';
 export * from './hoc';
 export * from './hooks/use-gesture-handler';
-import * as Touchable from './components';
 export default Touchable;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,6BAA6B,CAAC;AAC5C,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAE1C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,cAAc,OAAO,CAAC;AACtB,cAAc,6BAA6B,CAAC;AAE5C,eAAe,SAAS,CAAC"}

package/lib/typescript/utils/get-circle-path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-circle-path.d.ts","sourceRoot":"","sources":["../../../src/utils/get-circle-path.ts"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE,eAAO,MAAM,aAAa,kBAAmB,mBAAmB,gDAE/D,CAAC"}
+{"version":3,"file":"get-circle-path.d.ts","sourceRoot":"","sources":["../../../src/utils/get-circle-path.ts"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE,eAAO,MAAM,aAAa,kBAAmB,mBAAmB,gDAG/D,CAAC"}

package/lib/typescript/utils/get-rect-path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-rect-path.d.ts","sourceRoot":"","sources":["../../../src/utils/get-rect-path.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE5E,KAAK,iBAAiB,GAClB;IACE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,QAAA,MAAM,WAAW,WAAY,iBAAiB,gDAY7C,CAAC;AAEF,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAClD,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,QAAA,MAAM,kBAAkB,WAAY,wBAAwB,gDAa3D,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"get-rect-path.d.ts","sourceRoot":"","sources":["../../../src/utils/get-rect-path.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/D,KAAK,iBAAiB,GAClB;IACE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,QAAA,MAAM,WAAW,WAAY,iBAAiB,gDAc7C,CAAC;AAEF,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAClD,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,QAAA,MAAM,kBAAkB,WAAY,wBAAwB,gDAgB3D,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/typescript/utils/unwrap-animated-value.d.ts

@@ -1,9 +1,10 @@
 import type { SkiaValue } from '@shopify/react-native-skia';
+import type Animated from 'react-native-reanimated';
 type SkiaValueWithSelector<T> = {
     value: SkiaValue<T>;
     selector: (v: T) => T;
 };
-declare const unwrapAnimatedValue: <T>(value: T | SkiaValue<T> | SkiaValueWithSelector<T>) => T;
+declare const unwrapAnimatedValue: <T>(value: T | SkiaValue<T> | SkiaValueWithSelector<T> | Animated.SharedValue<T>) => T;
 declare const unwrapAnimatedValueObject: <T>(value: Record<any, T | SkiaValue<T>>) => Record<any, T>;
 export { unwrapAnimatedValue, unwrapAnimatedValueObject };
 //# sourceMappingURL=unwrap-animated-value.d.ts.map

package/lib/typescript/utils/unwrap-animated-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unwrap-animated-value.d.ts","sourceRoot":"","sources":["../../../src/utils/unwrap-animated-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,KAAK,qBAAqB,CAAC,CAAC,IAAI;IAC9B,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;CACvB,CAAC;AACF,QAAA,MAAM,mBAAmB,8DAaxB,CAAC;AAEF,QAAA,MAAM,yBAAyB,6DAM9B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"unwrap-animated-value.d.ts","sourceRoot":"","sources":["../../../src/utils/unwrap-animated-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEpD,KAAK,qBAAqB,CAAC,CAAC,IAAI;IAC9B,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;CACvB,CAAC;AACF,QAAA,MAAM,mBAAmB,wFAmBxB,CAAC;AAEF,QAAA,MAAM,yBAAyB,6DAO9B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-skia-gesture",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "A detection system for React Native Skia components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -55,7 +55,7 @@
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
-    "@shopify/react-native-skia": "0.1.172",
+    "@shopify/react-native-skia": "0.1.221",
     "@types/jest": "^28.1.2",
     "@types/react": "18.0.26",
     "@types/react-native": "0.70.0",
@@ -70,6 +70,8 @@
     "react": "18.1.0",
     "react-native": "0.70.5",
     "react-native-builder-bob": "^0.20.0",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.2",
     "release-it": "^15.0.0",
     "typescript": "^4.5.2"
   },
@@ -81,9 +83,9 @@
     "react-native": "*"
   },
   "engines": {
-    "node": ">= 16.0.0"
+    "node": ">= 18.0.0"
   },
-  "packageManager": "^yarn@1.22.15",
+  "packageManager": "yarn@1.22.21",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [

package/src/canvas/canvas.tsx

@@ -1,92 +1,108 @@
+import { Canvas as SkiaCanvas } from '@shopify/react-native-skia';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
-  Canvas as SkiaCanvas,
-  type CanvasProps,
-  useMultiTouchHandler,
-  useValue,
-  SkiaDomView,
-} from '@shopify/react-native-skia';
-import React, { useEffect } from 'react';
+  Gesture,
+  GestureDetector,
+  PanGesture,
+} from 'react-native-gesture-handler';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+
 import {
   TouchHandlerContext,
   type TouchableHandlerContextType,
 } from './context';
 
-const Canvas = React.forwardRef<SkiaDomView, CanvasProps>(
-  ({ children, onTouch, ...props }, ref) => {
-    const touchableRefs = useValue<TouchableHandlerContextType['current']>({});
+import type { CanvasProps } from '@shopify/react-native-skia';
+
+type TouchableCanvasProps = CanvasProps & {
+  panGesture?: PanGesture;
+};
+
+const Canvas: React.FC<TouchableCanvasProps> = ({
+  children,
+  panGesture = Gesture.Pan(),
+  ...props
+}) => {
+  // Instead of value, provide a subscribe method and reload the refs
+  const touchableRefs: TouchableHandlerContextType = useMemo(() => {
+    return { value: {} };
+  }, []);
+
+  const activeKey = useSharedValue<string[]>([]);
+
+  const [loadedRefs, prepareLoadedRefs] = useState<
+    TouchableHandlerContextType['value']
+  >({});
+
+  setTimeout(() => {
+    prepareLoadedRefs(touchableRefs.value);
+  }, 1000);
+
+  const mainGesture = panGesture
+    .onBegin((event) => {
+      const keys = Object.keys(loadedRefs);
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i] as string;
+        const touchableItem = loadedRefs[key];
+        const isPointInPath = touchableItem?.isPointInPath(event);
+        if (isPointInPath && touchableItem?.onStart) {
+          activeKey.value.push(`${key}__${event.handlerTag}`);
+          touchableItem.onStart?.(event);
+        }
+      }
+    })
+    .onUpdate((event) => {
+      const activatedKey = activeKey.value.find((key) =>
+        key.includes(event.handlerTag.toString())
+      );
+
+      if (!activatedKey) {
+        return;
+      }
+      const indexedKey = activatedKey.split('__')?.[0];
 
-    const activeKey = useValue<string[]>([]);
+      if (!indexedKey) {
+        return;
+      }
+      const touchableItem = loadedRefs[indexedKey];
 
-    const touchHandler = useMultiTouchHandler(
-      {
-        onStart: (event) => {
-          const keys = Object.keys(touchableRefs.current);
-          for (let i = 0; i < keys.length; i++) {
-            const key = keys[i] as string;
-            const touchableItem = touchableRefs.current[key];
-            if (touchableItem?.isPointInPath(event)) {
-              activeKey.current.push(`${key}__${event.id}`);
-              touchableItem.onStart?.(event);
-              return;
-            }
-          }
-        },
-        onActive: (event) => {
-          const activatedKey = activeKey.current.find((key) =>
-            key.includes(event.id.toString())
-          );
-          if (!activatedKey) {
-            return;
-          }
-          const indexedKey = activatedKey.split('__')?.[0];
-          if (!indexedKey) {
-            return;
-          }
-          const touchableItem = touchableRefs.current[indexedKey];
-          return touchableItem?.onActive?.(event);
-        },
-        onEnd: (event) => {
-          const activatedKey = activeKey.current.find((key) =>
-            key.includes(event.id.toString())
-          );
-          if (!activatedKey) {
-            return;
-          }
-          const indexedKey = activatedKey.split('__')?.[0];
-          if (!indexedKey) {
-            return;
-          }
-          const touchableItem = touchableRefs.current[indexedKey];
-          activeKey.current = activeKey.current.filter(
-            (key) => !key.includes(event.id.toString())
-          );
-          return touchableItem?.onEnd?.(event);
-        },
-      },
-      [touchableRefs, activeKey]
-    );
+      return touchableItem?.onActive?.(event);
+    })
+    .onFinalize((event) => {
+      const activatedKey = activeKey.value.find((key) =>
+        key.includes(event.handlerTag.toString())
+      );
+      if (!activatedKey) {
+        return;
+      }
+      const indexedKey = activatedKey.split('__')?.[0];
+      if (!indexedKey) {
+        return;
+      }
+      const touchableItem = loadedRefs[indexedKey];
+      activeKey.value = activeKey.value.filter(
+        (key) => !key.includes(event.handlerTag.toString())
+      );
+      return touchableItem?.onEnd?.(event as any);
+    });
 
-    useEffect(() => {
-      return () => {
-        touchableRefs.current = {};
-      };
-    }, [touchableRefs]);
+  useEffect(() => {
+    return () => {
+      touchableRefs.value = {};
+    };
+  }, [touchableRefs]);
 
-    return (
-      <SkiaCanvas
-        ref={ref as React.RefObject<SkiaDomView> & React.Ref<SkiaDomView>}
-        {...props}
-        onTouch={(touchInfo) => {
-          touchHandler(touchInfo);
-          return onTouch?.(touchInfo);
-        }}
-      >
-        <TouchHandlerContext.Provider value={touchableRefs}>
-          {children}
-        </TouchHandlerContext.Provider>
-      </SkiaCanvas>
-    );
-  }
-);
+  return (
+    <GestureDetector gesture={mainGesture}>
+      <Animated.View>
+        <SkiaCanvas {...props}>
+          <TouchHandlerContext.Provider value={touchableRefs}>
+            {children}
+          </TouchHandlerContext.Provider>
+        </SkiaCanvas>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
 
 export { Canvas };

package/src/canvas/context.tsx

@@ -1,23 +1,32 @@
-import type {
-  ExtendedTouchInfo,
-  TouchInfo,
-  Vector,
-} from '@shopify/react-native-skia';
 import React, { useContext } from 'react';
 
+import type { Vector } from '@shopify/react-native-skia';
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
+
 export type TouchableHandlerContextType = {
-  current: Record<
+  value: Record<
     string,
     {
-      onStart: (touchInfo: TouchInfo) => void;
-      onActive: (touchInfo: ExtendedTouchInfo) => void;
-      onEnd: (touchInfo: ExtendedTouchInfo) => void;
+      onStart: (
+        touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+      ) => void;
+      onActive: (
+        touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>
+      ) => void;
+      onEnd: (
+        touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+      ) => void;
       isPointInPath: (point: Vector) => boolean;
     }
   >;
 };
+
 const TouchHandlerContext = React.createContext<TouchableHandlerContextType>({
-  current: {},
+  value: {},
 });
 
 const useTouchHandlerContext = () => {

package/src/components/index.ts

@@ -4,11 +4,12 @@ import {
   Rect as SkiaRect,
   Path as SkiaPath,
 } from '@shopify/react-native-skia';
+
 import { withTouchableHandler } from '../hoc';
 
 export { Canvas } from '../canvas';
 
-export const Circle = withTouchableHandler(SkiaCircle);
-export const RoundedRect = withTouchableHandler(SkiaRoundedRect);
-export const Rect = withTouchableHandler(SkiaRect);
-export const Path = withTouchableHandler(SkiaPath);
+export const Circle = withTouchableHandler(SkiaCircle, 'Circle');
+export const RoundedRect = withTouchableHandler(SkiaRoundedRect, 'RoundedRect');
+export const Rect = withTouchableHandler(SkiaRect, 'Rect');
+export const Path = withTouchableHandler(SkiaPath, 'Path');

package/src/hoc/with-touchable-handler.tsx

@@ -1,37 +1,43 @@
 import {
-  type ExtendedTouchInfo,
   type SkiaValue,
   type SkPath,
-  type TouchInfo,
   type Vector,
-  useValue,
 } from '@shopify/react-native-skia';
 import { useCallback, useEffect, useId } from 'react';
+
+import { useTouchHandlerContext } from '../canvas/context';
 import { getCirclePath } from '../utils/get-circle-path';
 import { getRectPath, getRoundedRectPath } from '../utils/get-rect-path';
 import {
   unwrapAnimatedValue,
   unwrapAnimatedValueObject,
 } from '../utils/unwrap-animated-value';
-import { useTouchHandlerContext } from '../canvas/context';
 
-export type TranslationInfo = {
-  translationX: number;
-  translationY: number;
-};
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
 
 export type TouchableHandlerProps = {
-  onStart: (touchInfo: TouchInfo) => void;
-  onActive: (touchInfo: ExtendedTouchInfo & TranslationInfo) => void;
-  onEnd: (touchInfo: ExtendedTouchInfo & TranslationInfo) => void;
+  onStart: (
+    touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  onActive: (
+    touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>
+  ) => void;
+  onEnd: (
+    touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  ) => void;
   touchablePath: SkPath | SkiaValue<SkPath>;
 };
 
 type WithTouchableHandlerProps<T> = T & Partial<TouchableHandlerProps>;
 
-const getSkiaPath = (key: string, props: any) => {
-  const unwrappedProps = unwrapAnimatedValueObject(props) as any;
+export const getSkiaPath = (key: string, props: any) => {
+  'worklet';
 
+  const unwrappedProps = unwrapAnimatedValueObject(props) as any;
   switch (key) {
     case 'Circle':
       return getCirclePath(unwrappedProps);
@@ -47,7 +53,8 @@ const getSkiaPath = (key: string, props: any) => {
 };
 
 const withTouchableHandler = <T,>(
-  Component: (props: WithTouchableHandlerProps<T>) => JSX.Element
+  Component: (props: WithTouchableHandlerProps<T>) => JSX.Element,
+  componentName?: string
 ) => {
   return ({
     onStart: onStartProp,
@@ -59,42 +66,37 @@ const withTouchableHandler = <T,>(
     const id = useId();
     const ref = useTouchHandlerContext();
 
-    const startingPoint = useValue<Vector | null>(null);
-
     const onStart: TouchableHandlerProps['onStart'] = useCallback(
       (event) => {
-        startingPoint.current = { x: event.x, y: event.y };
+        'worklet';
         return onStartProp?.(event);
       },
-      [onStartProp, startingPoint]
+      [onStartProp]
     );
     const onActive: TouchableHandlerProps['onActive'] = useCallback(
       (event) => {
-        const translationX = event.x - (startingPoint.current?.x ?? 0);
-        const translationY = event.y - (startingPoint.current?.y ?? 0);
-        return onActiveProp?.({
-          ...event,
-          translationX,
-          translationY,
-        });
+        'worklet';
+        return onActiveProp?.(event);
       },
-      [onActiveProp, startingPoint]
+      [onActiveProp]
     );
     const onEnd: TouchableHandlerProps['onEnd'] = useCallback(
       (event) => {
-        const translationX = event.x - (startingPoint.current?.x ?? 0);
-        const translationY = event.y - (startingPoint.current?.y ?? 0);
-        return onEndProp?.({ ...event, translationX, translationY });
+        'worklet';
+        return onEndProp?.(event);
       },
-      [onEndProp, startingPoint]
+      [onEndProp]
     );
 
     const isPointInPath = useCallback(
       (point: Vector) => {
+        'worklet';
         if (touchablePath) {
           return 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');
@@ -105,20 +107,23 @@ const withTouchableHandler = <T,>(
     );
 
     useEffect(() => {
-      ref.current = {
+      ref.value = {
         [`id:${id}`]: {
           isPointInPath,
           onStart,
           onActive,
           onEnd,
         },
-        ...ref.current,
+        ...ref.value,
       } as any;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, isPointInPath, onActive, onEnd, onStart]);
 
+    useEffect(() => {
       return () => {
-        delete ref.current?.[id];
+        delete ref.value?.[`id:${id}`];
       };
-    }, [id, isPointInPath, onActive, onEnd, onStart, ref, touchablePath]);
+    }, [id, props, ref, touchablePath]);
 
     return Component(props as any);
   };

package/src/hooks/use-gesture-handler.ts

@@ -1,19 +1,23 @@
-import {
-  type ExtendedTouchInfo,
-  type TouchInfo,
-  useValue,
-} from '@shopify/react-native-skia';
 import { useCallback } from 'react';
-import type { TranslationInfo } from '../hoc';
+import { useSharedValue } from 'react-native-reanimated';
+
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
 
 type UseGestureHandlerParams<ContextType> = {
-  onStart?: (touchInfo: TouchInfo, context: ContextType) => void;
+  onStart?: (
+    touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
+    context: ContextType
+  ) => void;
   onActive?: (
-    extendedTouchInfo: ExtendedTouchInfo & TranslationInfo,
+    touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>,
     context: ContextType
   ) => void;
   onEnd?: (
-    extendedTouchInfo: ExtendedTouchInfo & TranslationInfo,
+    touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
     context: ContextType
   ) => void;
 };
@@ -23,28 +27,33 @@ const useGestureHandler = <ContextType>(
 ) => {
   const { onStart, onActive, onEnd } = gestureHandlers;
 
-  const context = useValue<ContextType>({} as any);
+  const context = useSharedValue<ContextType>({} as any);
 
   const handleStart = useCallback(
-    (touchInfo: TouchInfo) => {
+    (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       if (!onStart) return;
-      return onStart(touchInfo, context.current);
+      return onStart(touchInfo, context.value);
     },
     [context, onStart]
   );
 
   const handleActive = useCallback(
-    (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => {
+    (extendedTouchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       if (!onActive) return;
-      return onActive(extendedTouchInfo, context.current);
+      return onActive(extendedTouchInfo, context.value);
     },
     [context, onActive]
   );
 
   const handleEnd = useCallback(
-    (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => {
+    (
+      extendedTouchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+    ) => {
+      'worklet';
       if (!onEnd) return;
-      return onEnd(extendedTouchInfo, context.current);
+      return onEnd(extendedTouchInfo, context.value);
     },
     [context, onEnd]
   );

package/src/index.ts

@@ -1,5 +1,5 @@
+import * as Touchable from './components';
 export * from './hoc';
 export * from './hooks/use-gesture-handler';
-import * as Touchable from './components';
 
 export default Touchable;

package/src/utils/get-circle-path.ts

@@ -3,5 +3,6 @@ import { Skia } from '@shopify/react-native-skia';
 type GetCirclePathParams = { cx: number; cy: number; r: number };
 
 export const getCirclePath = ({ cx, cy, r }: GetCirclePathParams) => {
+  'worklet';
   return Skia.Path.Make().addCircle(cx, cy, r);
 };

package/src/utils/get-rect-path.ts

@@ -1,4 +1,4 @@
-import { rect, rrect, Skia, type SkRect } from '@shopify/react-native-skia';
+import { Skia, type SkRect } from '@shopify/react-native-skia';
 
 type GetRectPathParams =
   | {
@@ -10,16 +10,18 @@ type GetRectPathParams =
   | { rect: SkRect };
 
 const getRectPath = (params: GetRectPathParams) => {
+  'worklet';
+
   const skPath = Skia.Path.Make();
   if ('rect' in params) {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     const { rect } = params;
 
     skPath.addRect(rect);
     return skPath;
   }
   const { x, y, width, height } = params;
-  skPath.addRect(rect(x, y, width, height));
+
+  skPath.addRect(Skia.XYWHRect(x, y, width, height));
   return skPath;
 };
 
@@ -28,17 +30,20 @@ type GetRoundedRectPathParams = GetRectPathParams & {
 };
 
 const getRoundedRectPath = (params: GetRoundedRectPathParams) => {
+  'worklet';
+
   const { r } = params;
   const skPath = Skia.Path.Make();
   if ('rect' in params) {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     const { rect } = params;
-    skPath.addRRect(rrect(rect, r, r));
+
+    skPath.addRRect(Skia.RRectXY(rect, r, r));
     return skPath;
   }
   const { x, y, width, height } = params;
 
-  skPath.addRRect(rrect(rect(x, y, width, height), r, r));
+  const roundedRect = Skia.RRectXY(Skia.XYWHRect(x, y, width, height), r, r);
+  skPath.addRRect(roundedRect);
   return skPath;
 };