react-native-skia-gesture 0.1.6 → 0.1.7

package/README.md

@@ -10,7 +10,7 @@ _A detection system for React Native Skia components._
 
 ### 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). Therefore, they do not contain any information about location.
+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).
 Therefore direct interactions with individual Skia components can only be achieved indirectly from the Canvas (trying to figure out if the point on the screen that was clicked is within the element we want to interact with).
 
 This package, simply provides a set of APIs to be able to interact directly with individual components.
@@ -35,18 +35,13 @@ npm install react-native-skia-gesture
 
 ```jsx
 import {
-  Circle,
   useValue,
 } from '@shopify/react-native-skia';
 
-import {
-  withTouchableHandler,
-  Canvas,
+import Touchable, {
   useGestureHandler,
 } from 'react-native-skia-gesture';
 
-const TouchableCircle = withTouchableHandler(Circle);
-
 export default function App() {
   const cx = useValue(100);
   const cy = useValue(100);
@@ -63,14 +58,14 @@ export default function App() {
   });
 
   return (
-    <Canvas style={styles.fill}>
-      <TouchableCircle cx={cx} cy={cy} r={50} color="red" {...circleGesture} />
-    </Canvas>
+    <Touchable.Canvas style={styles.fill}>
+      <Touchable.Circle cx={cx} cy={cy} r={50} color="red" {...circleGesture} />
+    </Touchable.Canvas>
   );
 }
 ```
 
-If the element is a **Circle**, **Rect** or **RoundedRect**, the package will automatically derive its **touchablePath**. Alternatively it will have to be passed as a parameter to the TouchableComponent.
+If the element is a **Circle**, **Rect**, **RoundedRect**, or a **Path** the package will automatically derive its **touchablePath**. Alternatively it will have to be passed as a parameter to the TouchableComponent.
 
 ```jsx
 ...
@@ -81,9 +76,9 @@ const touchablePath = useComputedValue(() => {
 }, [cx, cy]);
 
 return (
-  <Canvas style={styles.fill}>
-    <TouchableCircle cx={cx} cy={cy} r={50} color="red" touchablePath={touchablePath} {...circleGesture} />
-  </Canvas>
+  <Touchable.Canvas style={styles.fill}>
+    <Touchable.Circle cx={cx} cy={cy} r={50} color="red" touchablePath={touchablePath} {...circleGesture} />
+  </Touchable.Canvas>
 );
 ...
 ```
@@ -100,6 +95,13 @@ It's simply a Wrapper of Skia's Canvas.
 
 It's a HOC with which to wrap all Skia components with which you want to interact directly.
 
+```jsx
+import { Image } from '@shopify/react-native-skia';
+import { withTouchableHandler } from 'react-native-skia-gesture';
+
+const TouchableImage = withTouchableHandler(Image);
+```
+
 ---
 
 ### `useGestureHandler`

package/lib/commonjs/canvas/canvas.js

@@ -17,8 +17,8 @@ const Canvas = _ref => {
     ...props
   } = _ref;
   const touchableRefs = (0, _reactNativeSkia.useValue)({});
-  const activeKey = (0, _reactNativeSkia.useValue)(null);
-  const touchHandler = (0, _reactNativeSkia.useTouchHandler)({
+  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++) {
@@ -26,23 +26,37 @@ const Canvas = _ref => {
         const touchableItem = touchableRefs.current[key];
         if (touchableItem !== null && touchableItem !== void 0 && touchableItem.isPointInPath(event)) {
           var _touchableItem$onStar;
-          activeKey.current = key;
+          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 _touchableItem$onActi;
-      if (!activeKey.current) return;
-      const touchableItem = touchableRefs.current[activeKey.current];
+      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 _touchableItem$onEnd;
-      if (!activeKey.current) return;
-      const touchableItem = touchableRefs.current[activeKey.current];
-      activeKey.current = null;
+      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;
+      }
+      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]);

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

@@ -1 +1 @@
-{"version":3,"names":["Canvas","children","onTouch","props","touchableRefs","useValue","activeKey","touchHandler","useTouchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","onActive","onEnd","useEffect","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";;;;;;AAAA;AAMA;AACA;AAA6E;AAAA;AAAA;AAE7E,MAAMA,MAA6B,GAAG,QAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC;EACpE,MAAMC,aAAa,GAAG,IAAAC,yBAAQ,EAAyC,CAAC,CAAC,CAAC;EAE1E,MAAMC,SAAS,GAAG,IAAAD,yBAAQ,EAAgB,IAAI,CAAC;EAE/C,MAAME,YAAY,GAAG,IAAAC,gCAAe,EAClC;IACEC,OAAO,EAAGC,KAAK,IAAK;MAClB,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACP,aAAa,CAACS,OAAO,CAAC;MAC/C,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,IAAI,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;QACpC,MAAME,GAAG,GAAGL,IAAI,CAACG,CAAC,CAAW;QAC7B,MAAMG,aAAa,GAAGb,aAAa,CAACS,OAAO,CAACG,GAAG,CAAC;QAEhD,IAAIC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEC,aAAa,CAACR,KAAK,CAAC,EAAE;UAAA;UACvCJ,SAAS,CAACO,OAAO,GAAGG,GAAG;UACvB,yBAAAC,aAAa,CAACR,OAAO,0DAArB,2BAAAQ,aAAa,EAAWP,KAAK,CAAC;UAC9B;QACF;MACF;IACF,CAAC;IACDS,QAAQ,EAAGT,KAAK,IAAK;MAAA;MACnB,IAAI,CAACJ,SAAS,CAACO,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGb,aAAa,CAACS,OAAO,CAACP,SAAS,CAACO,OAAO,CAAC;MAC9D,OAAOI,aAAa,aAAbA,aAAa,gDAAbA,aAAa,CAAEE,QAAQ,0DAAvB,2BAAAF,aAAa,EAAaP,KAAK,CAAC;IACzC,CAAC;IACDU,KAAK,EAAGV,KAAK,IAAK;MAAA;MAChB,IAAI,CAACJ,SAAS,CAACO,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGb,aAAa,CAACS,OAAO,CAACP,SAAS,CAACO,OAAO,CAAC;MAC9DP,SAAS,CAACO,OAAO,GAAG,IAAI;MACxB,OAAOI,aAAa,aAAbA,aAAa,+CAAbA,aAAa,CAAEG,KAAK,yDAApB,0BAAAH,aAAa,EAAUP,KAAK,CAAC;IACtC;EACF,CAAC,EACD,CAACN,aAAa,EAAEE,SAAS,CAAC,CAC3B;EAED,IAAAe,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACXjB,aAAa,CAACS,OAAO,GAAG,CAAC,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAEnB,oBACE,6BAAC,uBAAU,eACLD,KAAK;IACT,OAAO,EAAGmB,SAAS,IAAK;MACtBf,YAAY,CAACe,SAAS,CAAC;MACvB,OAAOpB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGoB,SAAS,CAAC;IAC7B;EAAE,iBAEF,6BAAC,4BAAmB,CAAC,QAAQ;IAAC,KAAK,EAAElB;EAAc,GAChDH,QAAQ,CACoB,CACpB;AAEjB,CAAC;AAAC"}
+{"version":3,"names":["Canvas","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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"}

package/lib/commonjs/components/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Canvas", {
+  enumerable: true,
+  get: function () {
+    return _canvas.Canvas;
+  }
+});
+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);
+exports.Circle = Circle;
+const RoundedRect = (0, _hoc.withTouchableHandler)(_reactNativeSkia.RoundedRect);
+exports.RoundedRect = RoundedRect;
+const Rect = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Rect);
+exports.Rect = Rect;
+const Path = (0, _hoc.withTouchableHandler)(_reactNativeSkia.Path);
+exports.Path = Path;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Circle","withTouchableHandler","SkiaCircle","RoundedRect","SkiaRoundedRect","Rect","SkiaRect","Path","SkiaPath"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;AAAA;AAMA;AAEA;AACO,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"}

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

@@ -19,6 +19,8 @@ const getSkiaPath = (key, props) => {
       return (0, _getRectPath.getRectPath)(unwrappedProps);
     case 'RoundedRect':
       return (0, _getRectPath.getRoundedRectPath)(unwrappedProps);
+    case 'Path':
+      return unwrappedProps.path;
     default:
       return null;
   }

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

@@ -1 +1 @@
-{"version":3,"names":["getSkiaPath","key","props","unwrappedProps","unwrapAnimatedValueObject","getCirclePath","getRectPath","getRoundedRectPath","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","path","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","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":";;;;;;AAAA;AASA;AACA;AACA;AACA;AAIA;AAiBA,MAAMA,WAAW,GAAG,CAACC,GAAW,EAAEC,KAAU,KAAK;EAC/C,MAAMC,cAAc,GAAG,IAAAC,8CAAyB,EAACF,KAAK,CAAQ;EAE9D,QAAQD,GAAG;IACT,KAAK,QAAQ;MACX,OAAO,IAAAI,4BAAa,EAACF,cAAc,CAAC;IACtC,KAAK,MAAM;MACT,OAAO,IAAAG,wBAAW,EAACH,cAAc,CAAC;IACpC,KAAK,aAAa;MAChB,OAAO,IAAAI,+BAAkB,EAACJ,cAAc,CAAC;IAC3C,KAAK,MAAM;MACT,OAAOA,cAAc,CAACK,IAAI;IAC5B;MACE,OAAO,IAAI;EAAC;AAElB,CAAC;AAED,MAAMC,oBAAoB,GACxBC,SAA+D,IAC5D;EACH,OAAO,QAM6B;IAAA,IAN5B;MACNC,OAAO,EAAEC,WAAW;MACpBC,QAAQ,EAAEC,YAAY;MACtBC,KAAK,EAAEC,SAAS;MAChBC,aAAa;MACb,GAAGf;IACyB,CAAC;IAC7B,MAAMgB,EAAE,GAAG,IAAAC,YAAK,GAAE;IAClB,MAAMC,GAAG,GAAG,IAAAC,+BAAsB,GAAE;IAEpC,MAAMC,aAAa,GAAG,IAAAC,yBAAQ,EAAgB,IAAI,CAAC;IAEnD,MAAMZ,OAAyC,GAAG,IAAAa,kBAAW,EAC1DC,KAAK,IAAK;MACTH,aAAa,CAACI,OAAO,GAAG;QAAEC,CAAC,EAAEF,KAAK,CAACE,CAAC;QAAEC,CAAC,EAAEH,KAAK,CAACG;MAAE,CAAC;MAClD,OAAOhB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGa,KAAK,CAAC;IAC7B,CAAC,EACD,CAACb,WAAW,EAAEU,aAAa,CAAC,CAC7B;IACD,MAAMT,QAA2C,GAAG,IAAAW,kBAAW,EAC5DC,KAAK,IAAK;MAAA;MACT,MAAMI,YAAY,GAAGJ,KAAK,CAACE,CAAC,IAAI,0BAAAL,aAAa,CAACI,OAAO,0DAArB,sBAAuBC,CAAC,KAAI,CAAC,CAAC;MAC9D,MAAMG,YAAY,GAAGL,KAAK,CAACG,CAAC,IAAI,2BAAAN,aAAa,CAACI,OAAO,2DAArB,uBAAuBE,CAAC,KAAI,CAAC,CAAC;MAC9D,OAAOd,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG;QACpB,GAAGW,KAAK;QACRI,YAAY;QACZC;MACF,CAAC,CAAC;IACJ,CAAC,EACD,CAAChB,YAAY,EAAEQ,aAAa,CAAC,CAC9B;IACD,MAAMP,KAAqC,GAAG,IAAAS,kBAAW,EACtDC,KAAK,IAAK;MAAA;MACT,MAAMI,YAAY,GAAGJ,KAAK,CAACE,CAAC,IAAI,2BAAAL,aAAa,CAACI,OAAO,2DAArB,uBAAuBC,CAAC,KAAI,CAAC,CAAC;MAC9D,MAAMG,YAAY,GAAGL,KAAK,CAACG,CAAC,IAAI,2BAAAN,aAAa,CAACI,OAAO,2DAArB,uBAAuBE,CAAC,KAAI,CAAC,CAAC;MAC9D,OAAOZ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAG;QAAE,GAAGS,KAAK;QAAEI,YAAY;QAAEC;MAAa,CAAC,CAAC;IAC9D,CAAC,EACD,CAACd,SAAS,EAAEM,aAAa,CAAC,CAC3B;IAED,MAAMS,aAAa,GAAG,IAAAP,kBAAW,EAC9BQ,KAAa,IAAK;MACjB,IAAIf,aAAa,EAAE;QACjB,OAAO,IAAAgB,wCAAmB,EAAChB,aAAa,CAAC,CAACiB,QAAQ,CAACF,KAAK,CAACL,CAAC,EAAEK,KAAK,CAACJ,CAAC,CAAC;MACtE;MAEA,MAAMpB,IAAI,GAAGR,WAAW,CAACU,SAAS,CAACyB,IAAI,EAAEjC,KAAK,CAAC;MAC/C,IAAI,CAACM,IAAI,EAAE;QACT,MAAM4B,KAAK,CAAC,2BAA2B,CAAC;MAC1C;MACA,OAAO5B,IAAI,CAAC0B,QAAQ,CAACF,KAAK,CAACL,CAAC,EAAEK,KAAK,CAACJ,CAAC,CAAC;IACxC,CAAC,EACD,CAAC1B,KAAK,EAAEe,aAAa,CAAC,CACvB;IAED,IAAAoB,gBAAS,EAAC,MAAM;MACdjB,GAAG,CAACM,OAAO,GAAG;QACZ,CAAE,MAAKR,EAAG,EAAC,GAAG;UACZa,aAAa;UACbpB,OAAO;UACPE,QAAQ;UACRE;QACF,CAAC;QACD,GAAGK,GAAG,CAACM;MACT,CAAQ;MAER,OAAO,MAAM;QAAA;QACX,gBAAON,GAAG,CAACM,OAAO,+CAAlB,OAAO,aAAcR,EAAE,CAAC;MAC1B,CAAC;IACH,CAAC,EAAE,CAACA,EAAE,EAAEa,aAAa,EAAElB,QAAQ,EAAEE,KAAK,EAAEJ,OAAO,EAAES,GAAG,EAAEH,aAAa,CAAC,CAAC;IAErE,OAAOP,SAAS,CAACR,KAAK,CAAQ;EAChC,CAAC;AACH,CAAC;AAAC"}

package/lib/commonjs/index.js

@@ -3,20 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _canvas = require("./canvas");
-Object.keys(_canvas).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _canvas[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _canvas[key];
-    }
-  });
-});
+var _exportNames = {};
+exports.default = void 0;
 var _hoc = require("./hoc");
 Object.keys(_hoc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hoc[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +20,7 @@ Object.keys(_hoc).forEach(function (key) {
 var _useGestureHandler = require("./hooks/use-gesture-handler");
 Object.keys(_useGestureHandler).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useGestureHandler[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -36,4 +29,9 @@ 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;
+exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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"}

package/lib/module/canvas/canvas.js

@@ -1,5 +1,5 @@
 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); }
-import { Canvas as SkiaCanvas, useTouchHandler, useValue } from '@shopify/react-native-skia';
+import { Canvas as SkiaCanvas, useMultiTouchHandler, useValue } from '@shopify/react-native-skia';
 import React, { useEffect } from 'react';
 import { TouchHandlerContext } from './context';
 const Canvas = _ref => {
@@ -9,8 +9,8 @@ const Canvas = _ref => {
     ...props
   } = _ref;
   const touchableRefs = useValue({});
-  const activeKey = useValue(null);
-  const touchHandler = useTouchHandler({
+  const activeKey = useValue([]);
+  const touchHandler = useMultiTouchHandler({
     onStart: event => {
       const keys = Object.keys(touchableRefs.current);
       for (let i = 0; i < keys.length; i++) {
@@ -18,23 +18,37 @@ const Canvas = _ref => {
         const touchableItem = touchableRefs.current[key];
         if (touchableItem !== null && touchableItem !== void 0 && touchableItem.isPointInPath(event)) {
           var _touchableItem$onStar;
-          activeKey.current = key;
+          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 _touchableItem$onActi;
-      if (!activeKey.current) return;
-      const touchableItem = touchableRefs.current[activeKey.current];
+      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 _touchableItem$onEnd;
-      if (!activeKey.current) return;
-      const touchableItem = touchableRefs.current[activeKey.current];
-      activeKey.current = null;
+      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;
+      }
+      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]);

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

@@ -1 +1 @@
-{"version":3,"names":["Canvas","SkiaCanvas","useTouchHandler","useValue","React","useEffect","TouchHandlerContext","children","onTouch","props","touchableRefs","activeKey","touchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","onActive","onEnd","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";AAAA,SACEA,MAAM,IAAIC,UAAU,EAEpBC,eAAe,EACfC,QAAQ,QACH,4BAA4B;AACnC,OAAOC,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,mBAAmB,QAAqC,WAAW;AAE5E,MAAMN,MAA6B,GAAG,QAAqC;EAAA,IAApC;IAAEO,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC;EACpE,MAAMC,aAAa,GAAGP,QAAQ,CAAyC,CAAC,CAAC,CAAC;EAE1E,MAAMQ,SAAS,GAAGR,QAAQ,CAAgB,IAAI,CAAC;EAE/C,MAAMS,YAAY,GAAGV,eAAe,CAClC;IACEW,OAAO,EAAGC,KAAK,IAAK;MAClB,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACL,aAAa,CAACO,OAAO,CAAC;MAC/C,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,IAAI,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;QACpC,MAAME,GAAG,GAAGL,IAAI,CAACG,CAAC,CAAW;QAC7B,MAAMG,aAAa,GAAGX,aAAa,CAACO,OAAO,CAACG,GAAG,CAAC;QAEhD,IAAIC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEC,aAAa,CAACR,KAAK,CAAC,EAAE;UAAA;UACvCH,SAAS,CAACM,OAAO,GAAGG,GAAG;UACvB,yBAAAC,aAAa,CAACR,OAAO,0DAArB,2BAAAQ,aAAa,EAAWP,KAAK,CAAC;UAC9B;QACF;MACF;IACF,CAAC;IACDS,QAAQ,EAAGT,KAAK,IAAK;MAAA;MACnB,IAAI,CAACH,SAAS,CAACM,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGX,aAAa,CAACO,OAAO,CAACN,SAAS,CAACM,OAAO,CAAC;MAC9D,OAAOI,aAAa,aAAbA,aAAa,gDAAbA,aAAa,CAAEE,QAAQ,0DAAvB,2BAAAF,aAAa,EAAaP,KAAK,CAAC;IACzC,CAAC;IACDU,KAAK,EAAGV,KAAK,IAAK;MAAA;MAChB,IAAI,CAACH,SAAS,CAACM,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGX,aAAa,CAACO,OAAO,CAACN,SAAS,CAACM,OAAO,CAAC;MAC9DN,SAAS,CAACM,OAAO,GAAG,IAAI;MACxB,OAAOI,aAAa,aAAbA,aAAa,+CAAbA,aAAa,CAAEG,KAAK,yDAApB,0BAAAH,aAAa,EAAUP,KAAK,CAAC;IACtC;EACF,CAAC,EACD,CAACJ,aAAa,EAAEC,SAAS,CAAC,CAC3B;EAEDN,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXK,aAAa,CAACO,OAAO,GAAG,CAAC,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACP,aAAa,CAAC,CAAC;EAEnB,oBACE,oBAAC,UAAU,eACLD,KAAK;IACT,OAAO,EAAGgB,SAAS,IAAK;MACtBb,YAAY,CAACa,SAAS,CAAC;MACvB,OAAOjB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGiB,SAAS,CAAC;IAC7B;EAAE,iBAEF,oBAAC,mBAAmB,CAAC,QAAQ;IAAC,KAAK,EAAEf;EAAc,GAChDH,QAAQ,CACoB,CACpB;AAEjB,CAAC;AAED,SAASP,MAAM"}
+{"version":3,"names":["Canvas","SkiaCanvas","useMultiTouchHandler","useValue","React","useEffect","TouchHandlerContext","children","onTouch","props","touchableRefs","activeKey","touchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","push","id","onActive","activatedKey","find","includes","toString","indexedKey","split","onEnd","filter","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}

package/lib/module/components/index.js

@@ -0,0 +1,8 @@
+import { Circle as SkiaCircle, RoundedRect as SkiaRoundedRect, 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);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Circle","SkiaCircle","RoundedRect","SkiaRoundedRect","Rect","SkiaRect","Path","SkiaPath","withTouchableHandler","Canvas"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SACEA,MAAM,IAAIC,UAAU,EACpBC,WAAW,IAAIC,eAAe,EAC9BC,IAAI,IAAIC,QAAQ,EAChBC,IAAI,IAAIC,QAAQ,QACX,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,QAAQ;AAE7C,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAO,MAAMT,MAAM,GAAGQ,oBAAoB,CAACP,UAAU,CAAC;AACtD,OAAO,MAAMC,WAAW,GAAGM,oBAAoB,CAACL,eAAe,CAAC;AAChE,OAAO,MAAMC,IAAI,GAAGI,oBAAoB,CAACH,QAAQ,CAAC;AAClD,OAAO,MAAMC,IAAI,GAAGE,oBAAoB,CAACD,QAAQ,CAAC"}

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

@@ -13,6 +13,8 @@ const getSkiaPath = (key, props) => {
       return getRectPath(unwrappedProps);
     case 'RoundedRect':
       return getRoundedRectPath(unwrappedProps);
+    case 'Path':
+      return unwrappedProps.path;
     default:
       return null;
   }

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

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

package/lib/module/index.js

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

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,OAAO;AACrB,cAAc,6BAA6B"}
+{"version":3,"names":["Touchable"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,OAAO;AACrB,cAAc,6BAA6B;AAC3C,OAAO,KAAKA,SAAS,MAAM,cAAc;AAEzC,eAAeA,SAAS"}

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

@@ -1 +1 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAGZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDjC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAGZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0EjC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -0,0 +1,6 @@
+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 }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").PathProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,eAAO,MAAM,MAAM,6QAAmC,CAAC;AACvD,eAAO,MAAM,WAAW,kRAAwC,CAAC;AACjE,eAAO,MAAM,IAAI,2QAAiC,CAAC;AACnD,eAAO,MAAM,IAAI,2QAAiC,CAAC"}

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,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EAGV,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,SAAS,CAAC,CAAC,CAAC,GAC9C,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAiBjC,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,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EAGV,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,SAAS,CAAC,CAAC,CAAC,GAC9C,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAmBjC,QAAA,MAAM,oBAAoB,0DAC4B,WAAW,+IA2EhE,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,4 +1,5 @@
-export * from './canvas';
 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,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,6BAA6B,CAAC"}
+{"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"}

package/package.json

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

package/src/canvas/canvas.tsx

@@ -1,7 +1,7 @@
 import {
   Canvas as SkiaCanvas,
   CanvasProps,
-  useTouchHandler,
+  useMultiTouchHandler,
   useValue,
 } from '@shopify/react-native-skia';
 import React, { useEffect } from 'react';
@@ -10,9 +10,9 @@ import { TouchHandlerContext, TouchableHandlerContextType } from './context';
 const Canvas: React.FC<CanvasProps> = ({ children, onTouch, ...props }) => {
   const touchableRefs = useValue<TouchableHandlerContextType['current']>({});
 
-  const activeKey = useValue<string | null>(null);
+  const activeKey = useValue<string[]>([]);
 
-  const touchHandler = useTouchHandler(
+  const touchHandler = useMultiTouchHandler(
     {
       onStart: (event) => {
         const keys = Object.keys(touchableRefs.current);
@@ -21,21 +21,41 @@ const Canvas: React.FC<CanvasProps> = ({ children, onTouch, ...props }) => {
           const touchableItem = touchableRefs.current[key];
 
           if (touchableItem?.isPointInPath(event)) {
-            activeKey.current = key;
+            activeKey.current.push(`${key}__${event.id}`);
             touchableItem.onStart?.(event);
             return;
           }
         }
       },
       onActive: (event) => {
-        if (!activeKey.current) return;
-        const touchableItem = touchableRefs.current[activeKey.current];
+        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) => {
-        if (!activeKey.current) return;
-        const touchableItem = touchableRefs.current[activeKey.current];
-        activeKey.current = null;
+        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);
       },
     },

package/src/components/index.ts

@@ -0,0 +1,13 @@
+import {
+  Circle as SkiaCircle,
+  RoundedRect as SkiaRoundedRect,
+  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);

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

@@ -41,6 +41,8 @@ const getSkiaPath = (key: string, props: any) => {
       return getRectPath(unwrappedProps);
     case 'RoundedRect':
       return getRoundedRectPath(unwrappedProps);
+    case 'Path':
+      return unwrappedProps.path;
     default:
       return null;
   }

package/src/index.ts

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