react-native-gesture-handler 2.1.0 → 2.1.1

package/lib/module/handlers/gestures/pinchGesture.js

@@ -1,9 +1,36 @@
 import { ContinousBaseGesture } from './gesture';
+
+function changeEventCalculator(current, previous) {
+  'worklet';
+
+  let changePayload;
+
+  if (previous === undefined) {
+    changePayload = {
+      scaleChange: current.scale
+    };
+  } else {
+    changePayload = {
+      scaleChange: current.scale / previous.scale
+    };
+  }
+
+  return { ...current,
+    ...changePayload
+  };
+}
+
 export class PinchGesture extends ContinousBaseGesture {
   constructor() {
     super();
     this.handlerName = 'PinchGestureHandler';
   }
 
+  onChange(callback) {
+    // @ts-ignore TS being overprotective, PinchGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+
 }
 //# sourceMappingURL=pinchGesture.js.map

package/lib/module/handlers/gestures/pinchGesture.js.map

@@ -1 +1 @@
-{"version":3,"sources":["pinchGesture.ts"],"names":["ContinousBaseGesture","PinchGesture","constructor","handlerName"],"mappings":"AAAA,SAASA,oBAAT,QAAqC,WAArC;AAGA,OAAO,MAAMC,YAAN,SAA2BD,oBAA3B,CAAiF;AACtFE,EAAAA,WAAW,GAAG;AACZ;AAEA,SAAKC,WAAL,GAAmB,qBAAnB;AACD;;AALqF","sourcesContent":["import { ContinousBaseGesture } from './gesture';\nimport { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';\n\nexport class PinchGesture extends ContinousBaseGesture<PinchGestureHandlerEventPayload> {\n  constructor() {\n    super();\n\n    this.handlerName = 'PinchGestureHandler';\n  }\n}\n\nexport type PinchGestureType = InstanceType<typeof PinchGesture>;\n"]}
+{"version":3,"sources":["pinchGesture.ts"],"names":["ContinousBaseGesture","changeEventCalculator","current","previous","changePayload","undefined","scaleChange","scale","PinchGesture","constructor","handlerName","onChange","callback","handlers"],"mappings":"AAAA,SAASA,oBAAT,QAAqC,WAArC;;AAQA,SAASC,qBAAT,CACEC,OADF,EAEEC,QAFF,EAGE;AACA;;AACA,MAAIC,aAAJ;;AACA,MAAID,QAAQ,KAAKE,SAAjB,EAA4B;AAC1BD,IAAAA,aAAa,GAAG;AACdE,MAAAA,WAAW,EAAEJ,OAAO,CAACK;AADP,KAAhB;AAGD,GAJD,MAIO;AACLH,IAAAA,aAAa,GAAG;AACdE,MAAAA,WAAW,EAAEJ,OAAO,CAACK,KAAR,GAAgBJ,QAAQ,CAACI;AADxB,KAAhB;AAGD;;AAED,SAAO,EAAE,GAAGL,OAAL;AAAc,OAAGE;AAAjB,GAAP;AACD;;AAED,OAAO,MAAMI,YAAN,SAA2BR,oBAA3B,CAGL;AACAS,EAAAA,WAAW,GAAG;AACZ;AAEA,SAAKC,WAAL,GAAmB,qBAAnB;AACD;;AAEDC,EAAAA,QAAQ,CACNC,QADM,EAMN;AACA;AACA,SAAKC,QAAL,CAAcZ,qBAAd,GAAsCA,qBAAtC;AACA,WAAO,MAAMU,QAAN,CAAeC,QAAf,CAAP;AACD;;AAjBD","sourcesContent":["import { ContinousBaseGesture } from './gesture';\nimport { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';\nimport { GestureUpdateEvent } from '../gestureHandlerCommon';\n\ntype PinchGestureChangeEventPayload = {\n  scaleChange: number;\n};\n\nfunction changeEventCalculator(\n  current: GestureUpdateEvent<PinchGestureHandlerEventPayload>,\n  previous?: GestureUpdateEvent<PinchGestureHandlerEventPayload>\n) {\n  'worklet';\n  let changePayload: PinchGestureChangeEventPayload;\n  if (previous === undefined) {\n    changePayload = {\n      scaleChange: current.scale,\n    };\n  } else {\n    changePayload = {\n      scaleChange: current.scale / previous.scale,\n    };\n  }\n\n  return { ...current, ...changePayload };\n}\n\nexport class PinchGesture extends ContinousBaseGesture<\n  PinchGestureHandlerEventPayload,\n  PinchGestureChangeEventPayload\n> {\n  constructor() {\n    super();\n\n    this.handlerName = 'PinchGestureHandler';\n  }\n\n  onChange(\n    callback: (\n      event: GestureUpdateEvent<\n        PinchGestureHandlerEventPayload & PinchGestureChangeEventPayload\n      >\n    ) => void\n  ) {\n    // @ts-ignore TS being overprotective, PinchGestureHandlerEventPayload is Record\n    this.handlers.changeEventCalculator = changeEventCalculator;\n    return super.onChange(callback);\n  }\n}\n\nexport type PinchGestureType = InstanceType<typeof PinchGesture>;\n"]}

package/lib/module/handlers/gestures/rotationGesture.js

@@ -1,9 +1,36 @@
 import { ContinousBaseGesture } from './gesture';
+
+function changeEventCalculator(current, previous) {
+  'worklet';
+
+  let changePayload;
+
+  if (previous === undefined) {
+    changePayload = {
+      rotationChange: current.rotation
+    };
+  } else {
+    changePayload = {
+      rotationChange: current.rotation - previous.rotation
+    };
+  }
+
+  return { ...current,
+    ...changePayload
+  };
+}
+
 export class RotationGesture extends ContinousBaseGesture {
   constructor() {
     super();
     this.handlerName = 'RotationGestureHandler';
   }
 
+  onChange(callback) {
+    // @ts-ignore TS being overprotective, RotationGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+
 }
 //# sourceMappingURL=rotationGesture.js.map

package/lib/module/handlers/gestures/rotationGesture.js.map

@@ -1 +1 @@
-{"version":3,"sources":["rotationGesture.ts"],"names":["ContinousBaseGesture","RotationGesture","constructor","handlerName"],"mappings":"AAAA,SAASA,oBAAT,QAAqC,WAArC;AAGA,OAAO,MAAMC,eAAN,SAA8BD,oBAA9B,CAAuF;AAC5FE,EAAAA,WAAW,GAAG;AACZ;AAEA,SAAKC,WAAL,GAAmB,wBAAnB;AACD;;AAL2F","sourcesContent":["import { ContinousBaseGesture } from './gesture';\nimport { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';\n\nexport class RotationGesture extends ContinousBaseGesture<RotationGestureHandlerEventPayload> {\n  constructor() {\n    super();\n\n    this.handlerName = 'RotationGestureHandler';\n  }\n}\n\nexport type RotationGestureType = InstanceType<typeof RotationGesture>;\n"]}
+{"version":3,"sources":["rotationGesture.ts"],"names":["ContinousBaseGesture","changeEventCalculator","current","previous","changePayload","undefined","rotationChange","rotation","RotationGesture","constructor","handlerName","onChange","callback","handlers"],"mappings":"AAAA,SAASA,oBAAT,QAAqC,WAArC;;AAQA,SAASC,qBAAT,CACEC,OADF,EAEEC,QAFF,EAGE;AACA;;AACA,MAAIC,aAAJ;;AACA,MAAID,QAAQ,KAAKE,SAAjB,EAA4B;AAC1BD,IAAAA,aAAa,GAAG;AACdE,MAAAA,cAAc,EAAEJ,OAAO,CAACK;AADV,KAAhB;AAGD,GAJD,MAIO;AACLH,IAAAA,aAAa,GAAG;AACdE,MAAAA,cAAc,EAAEJ,OAAO,CAACK,QAAR,GAAmBJ,QAAQ,CAACI;AAD9B,KAAhB;AAGD;;AAED,SAAO,EAAE,GAAGL,OAAL;AAAc,OAAGE;AAAjB,GAAP;AACD;;AAED,OAAO,MAAMI,eAAN,SAA8BR,oBAA9B,CAGL;AACAS,EAAAA,WAAW,GAAG;AACZ;AAEA,SAAKC,WAAL,GAAmB,wBAAnB;AACD;;AAEDC,EAAAA,QAAQ,CACNC,QADM,EAMN;AACA;AACA,SAAKC,QAAL,CAAcZ,qBAAd,GAAsCA,qBAAtC;AACA,WAAO,MAAMU,QAAN,CAAeC,QAAf,CAAP;AACD;;AAjBD","sourcesContent":["import { ContinousBaseGesture } from './gesture';\nimport { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';\nimport { GestureUpdateEvent } from '../gestureHandlerCommon';\n\ntype RotationGestureChangeEventPayload = {\n  rotationChange: number;\n};\n\nfunction changeEventCalculator(\n  current: GestureUpdateEvent<RotationGestureHandlerEventPayload>,\n  previous?: GestureUpdateEvent<RotationGestureHandlerEventPayload>\n) {\n  'worklet';\n  let changePayload: RotationGestureChangeEventPayload;\n  if (previous === undefined) {\n    changePayload = {\n      rotationChange: current.rotation,\n    };\n  } else {\n    changePayload = {\n      rotationChange: current.rotation - previous.rotation,\n    };\n  }\n\n  return { ...current, ...changePayload };\n}\n\nexport class RotationGesture extends ContinousBaseGesture<\n  RotationGestureHandlerEventPayload,\n  RotationGestureChangeEventPayload\n> {\n  constructor() {\n    super();\n\n    this.handlerName = 'RotationGestureHandler';\n  }\n\n  onChange(\n    callback: (\n      event: GestureUpdateEvent<\n        RotationGestureHandlerEventPayload & RotationGestureChangeEventPayload\n      >\n    ) => void\n  ) {\n    // @ts-ignore TS being overprotective, RotationGestureHandlerEventPayload is Record\n    this.handlers.changeEventCalculator = changeEventCalculator;\n    return super.onChange(callback);\n  }\n}\n\nexport type RotationGestureType = InstanceType<typeof RotationGesture>;\n"]}

package/lib/typescript/handlers/gestures/forceTouchGesture.d.ts

@@ -1,10 +1,16 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
 import { ForceTouchGestureConfig, ForceTouchGestureHandlerEventPayload } from '../ForceTouchGestureHandler';
-export declare class ForceTouchGesture extends ContinousBaseGesture<ForceTouchGestureHandlerEventPayload> {
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+declare type ForceTouchGestureChangeEventPayload = {
+    forceChange: number;
+};
+export declare class ForceTouchGesture extends ContinousBaseGesture<ForceTouchGestureHandlerEventPayload, ForceTouchGestureChangeEventPayload> {
     config: BaseGestureConfig & ForceTouchGestureConfig;
     constructor();
     minForce(force: number): this;
     maxForce(force: number): this;
     feedbackOnActivation(value: boolean): this;
+    onChange(callback: (event: GestureUpdateEvent<GestureUpdateEvent<ForceTouchGestureHandlerEventPayload & ForceTouchGestureChangeEventPayload>>) => void): this;
 }
 export declare type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;
+export {};

package/lib/typescript/handlers/gestures/gesture.d.ts

@@ -25,10 +25,12 @@ export declare type HandlerCallbacks<EventPayloadT extends Record<string, unknow
     onEnd?: (event: GestureStateChangeEvent<EventPayloadT>, success: boolean) => void;
     onFinalize?: (event: GestureStateChangeEvent<EventPayloadT>, success: boolean) => void;
     onUpdate?: (event: GestureUpdateEvent<EventPayloadT>) => void;
+    onChange?: (event: any) => void;
     onTouchesDown?: TouchEventHandlerType;
     onTouchesMove?: TouchEventHandlerType;
     onTouchesUp?: TouchEventHandlerType;
     onTouchesCancelled?: TouchEventHandlerType;
+    changeEventCalculator?: (current: GestureUpdateEvent<Record<string, unknown>>, previous?: GestureUpdateEvent<Record<string, unknown>>) => GestureUpdateEvent<Record<string, unknown>>;
     isWorklet: boolean[];
 };
 export declare const CALLBACK_TYPE: {
@@ -36,12 +38,13 @@ export declare const CALLBACK_TYPE: {
     readonly BEGAN: 1;
     readonly START: 2;
     readonly UPDATE: 3;
-    readonly END: 4;
-    readonly FINALIZE: 5;
-    readonly TOUCHES_DOWN: 6;
-    readonly TOUCHES_MOVE: 7;
-    readonly TOUCHES_UP: 8;
-    readonly TOUCHES_CANCELLED: 9;
+    readonly CHANGE: 4;
+    readonly END: 5;
+    readonly FINALIZE: 6;
+    readonly TOUCHES_DOWN: 7;
+    readonly TOUCHES_MOVE: 8;
+    readonly TOUCHES_UP: 9;
+    readonly TOUCHES_CANCELLED: 10;
 };
 export declare type CALLBACK_TYPE = typeof CALLBACK_TYPE[keyof typeof CALLBACK_TYPE];
 export declare abstract class Gesture {
@@ -68,7 +71,7 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
     handlers: HandlerCallbacks<EventPayloadT>;
     private addDependency;
     withRef(ref: React.MutableRefObject<GestureType | undefined>): this;
-    protected isWorklet(callback: TouchEventHandlerType | ((event: GestureUpdateEvent<EventPayloadT>) => void) | ((event: GestureStateChangeEvent<EventPayloadT>) => void)): boolean;
+    protected isWorklet(callback: Function): boolean;
     onBegin(callback: (event: GestureStateChangeEvent<EventPayloadT>) => void): this;
     onStart(callback: (event: GestureStateChangeEvent<EventPayloadT>) => void): this;
     onEnd(callback: (event: GestureStateChangeEvent<EventPayloadT>, success: boolean) => void): this;
@@ -86,8 +89,9 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
     toGestureArray(): GestureType[];
     prepare(): void;
 }
-export declare abstract class ContinousBaseGesture<EventPayloadT extends Record<string, unknown>> extends BaseGesture<EventPayloadT> {
+export declare abstract class ContinousBaseGesture<EventPayloadT extends Record<string, unknown>, EventChangePayloadT extends Record<string, unknown>> extends BaseGesture<EventPayloadT> {
     onUpdate(callback: (event: GestureUpdateEvent<EventPayloadT>) => void): this;
+    onChange(callback: (event: GestureUpdateEvent<EventPayloadT & EventChangePayloadT>) => void): this;
     manualActivation(manualActivation: boolean): this;
 }
 export {};

package/lib/typescript/handlers/gestures/manualGesture.d.ts

@@ -1,5 +1,7 @@
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 import { ContinousBaseGesture } from './gesture';
-export declare class ManualGesture extends ContinousBaseGesture<Record<string, never>> {
+export declare class ManualGesture extends ContinousBaseGesture<Record<string, never>, Record<string, never>> {
     constructor();
+    onChange(callback: (event: GestureUpdateEvent<Record<string, never>>) => void): this;
 }
 export declare type ManualGestureType = InstanceType<typeof ManualGesture>;

package/lib/typescript/handlers/gestures/panGesture.d.ts

@@ -1,6 +1,11 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 import { PanGestureConfig, PanGestureHandlerEventPayload } from '../PanGestureHandler';
-export declare class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPayload> {
+declare type PanGestureChangeEventPayload = {
+    changeX: number;
+    changeY: number;
+};
+export declare class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPayload, PanGestureChangeEventPayload> {
     config: BaseGestureConfig & PanGestureConfig;
     constructor();
     activeOffsetY(offset: number | number[]): this;
@@ -15,5 +20,7 @@ export declare class PanGesture extends ContinousBaseGesture<PanGestureHandlerEv
     minVelocityY(velocity: number): this;
     averageTouches(value: boolean): this;
     enableTrackpadTwoFingerGesture(value: boolean): this;
+    onChange(callback: (event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => void): this;
 }
 export declare type PanGestureType = InstanceType<typeof PanGesture>;
+export {};

package/lib/typescript/handlers/gestures/pinchGesture.d.ts

@@ -1,6 +1,12 @@
 import { ContinousBaseGesture } from './gesture';
 import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
-export declare class PinchGesture extends ContinousBaseGesture<PinchGestureHandlerEventPayload> {
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+declare type PinchGestureChangeEventPayload = {
+    scaleChange: number;
+};
+export declare class PinchGesture extends ContinousBaseGesture<PinchGestureHandlerEventPayload, PinchGestureChangeEventPayload> {
     constructor();
+    onChange(callback: (event: GestureUpdateEvent<PinchGestureHandlerEventPayload & PinchGestureChangeEventPayload>) => void): this;
 }
 export declare type PinchGestureType = InstanceType<typeof PinchGesture>;
+export {};

package/lib/typescript/handlers/gestures/rotationGesture.d.ts

@@ -1,6 +1,12 @@
 import { ContinousBaseGesture } from './gesture';
 import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
-export declare class RotationGesture extends ContinousBaseGesture<RotationGestureHandlerEventPayload> {
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+declare type RotationGestureChangeEventPayload = {
+    rotationChange: number;
+};
+export declare class RotationGesture extends ContinousBaseGesture<RotationGestureHandlerEventPayload, RotationGestureChangeEventPayload> {
     constructor();
+    onChange(callback: (event: GestureUpdateEvent<RotationGestureHandlerEventPayload & RotationGestureChangeEventPayload>) => void): this;
 }
 export declare type RotationGestureType = InstanceType<typeof RotationGesture>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",

package/src/handlers/gestures/GestureDetector.tsx

@@ -256,6 +256,8 @@ function useAnimatedGesture(preparedGesture: GestureConfigReference) {
         return gesture.onStart;
       case CALLBACK_TYPE.UPDATE:
         return gesture.onUpdate;
+      case CALLBACK_TYPE.CHANGE:
+        return gesture.onChange;
       case CALLBACK_TYPE.END:
         return gesture.onEnd;
       case CALLBACK_TYPE.FINALIZE:
@@ -310,6 +312,11 @@ function useAnimatedGesture(preparedGesture: GestureConfigReference) {
     HandlerCallbacks<Record<string, unknown>>[] | null
   >(null);
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const lastUpdateEvent = Reanimated.useSharedValue<
+    (GestureUpdateEvent | undefined)[]
+  >([]);
+
   // not every gesture needs a state controller, init them lazily
   const stateControllers: GestureStateManagerType[] = [];
 
@@ -339,6 +346,7 @@ function useAnimatedGesture(preparedGesture: GestureConfigReference) {
             event.state === State.ACTIVE
           ) {
             runWorklet(CALLBACK_TYPE.START, gesture, event);
+            lastUpdateEvent.value[gesture.handlerTag] = undefined;
           } else if (
             event.oldState !== event.state &&
             event.state === State.END
@@ -371,6 +379,19 @@ function useAnimatedGesture(preparedGesture: GestureConfigReference) {
           }
         } else {
           runWorklet(CALLBACK_TYPE.UPDATE, gesture, event);
+
+          if (gesture.onChange && gesture.changeEventCalculator) {
+            runWorklet(
+              CALLBACK_TYPE.CHANGE,
+              gesture,
+              gesture.changeEventCalculator?.(
+                event,
+                lastUpdateEvent.value[gesture.handlerTag]
+              )
+            );
+
+            lastUpdateEvent.value[gesture.handlerTag] = event;
+          }
         }
       }
     }

package/src/handlers/gestures/eventReceiver.ts

@@ -36,6 +36,8 @@ const dummyStateManager: GestureStateManagerType = {
   },
 };
 
+const lastUpdateEvent: (GestureUpdateEvent | undefined)[] = [];
+
 function isStateChangeEvent(
   event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
 ): event is GestureStateChangeEvent {
@@ -69,11 +71,13 @@ function onGestureHandlerEvent(
         event.state === State.ACTIVE
       ) {
         handler.handlers.onStart?.(event);
+        lastUpdateEvent[handler.handlers.handlerTag] = event;
       } else if (event.oldState !== event.state && event.state === State.END) {
         if (event.oldState === State.ACTIVE) {
           handler.handlers.onEnd?.(event, true);
         }
         handler.handlers.onFinalize?.(event, true);
+        lastUpdateEvent[handler.handlers.handlerTag] = undefined;
       } else if (
         (event.state === State.FAILED || event.state === State.CANCELLED) &&
         event.oldState !== event.state
@@ -82,6 +86,7 @@ function onGestureHandlerEvent(
           handler.handlers.onEnd?.(event, false);
         }
         handler.handlers.onFinalize?.(event, false);
+        lastUpdateEvent[handler.handlers.handlerTag] = undefined;
       }
     } else if (isTouchEvent(event)) {
       switch (event.eventType) {
@@ -100,6 +105,17 @@ function onGestureHandlerEvent(
       }
     } else {
       handler.handlers.onUpdate?.(event);
+
+      if (handler.handlers.onChange && handler.handlers.changeEventCalculator) {
+        handler.handlers.onChange?.(
+          handler.handlers.changeEventCalculator?.(
+            event,
+            lastUpdateEvent[handler.handlers.handlerTag]
+          )
+        );
+
+        lastUpdateEvent[handler.handlers.handlerTag] = event;
+      }
     }
   }
 }

package/src/handlers/gestures/forceTouchGesture.ts

@@ -3,8 +3,35 @@ import {
   ForceTouchGestureConfig,
   ForceTouchGestureHandlerEventPayload,
 } from '../ForceTouchGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
-export class ForceTouchGesture extends ContinousBaseGesture<ForceTouchGestureHandlerEventPayload> {
+type ForceTouchGestureChangeEventPayload = {
+  forceChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<ForceTouchGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<ForceTouchGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: ForceTouchGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      forceChange: current.force,
+    };
+  } else {
+    changePayload = {
+      forceChange: current.force - previous.force,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class ForceTouchGesture extends ContinousBaseGesture<
+  ForceTouchGestureHandlerEventPayload,
+  ForceTouchGestureChangeEventPayload
+> {
   public config: BaseGestureConfig & ForceTouchGestureConfig = {};
 
   constructor() {
@@ -27,6 +54,21 @@ export class ForceTouchGesture extends ContinousBaseGesture<ForceTouchGestureHan
     this.config.feedbackOnActivation = value;
     return this;
   }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        GestureUpdateEvent<
+          ForceTouchGestureHandlerEventPayload &
+            ForceTouchGestureChangeEventPayload
+        >
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, ForceTouchGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
 }
 
 export type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;

package/src/handlers/gestures/gesture.ts

@@ -61,10 +61,15 @@ export type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
     success: boolean
   ) => void;
   onUpdate?: (event: GestureUpdateEvent<EventPayloadT>) => void;
+  onChange?: (event: any) => void;
   onTouchesDown?: TouchEventHandlerType;
   onTouchesMove?: TouchEventHandlerType;
   onTouchesUp?: TouchEventHandlerType;
   onTouchesCancelled?: TouchEventHandlerType;
+  changeEventCalculator?: (
+    current: GestureUpdateEvent<Record<string, unknown>>,
+    previous?: GestureUpdateEvent<Record<string, unknown>>
+  ) => GestureUpdateEvent<Record<string, unknown>>;
   isWorklet: boolean[];
 };
 
@@ -73,12 +78,13 @@ export const CALLBACK_TYPE = {
   BEGAN: 1,
   START: 2,
   UPDATE: 3,
-  END: 4,
-  FINALIZE: 5,
-  TOUCHES_DOWN: 6,
-  TOUCHES_MOVE: 7,
-  TOUCHES_UP: 8,
-  TOUCHES_CANCELLED: 9,
+  CHANGE: 4,
+  END: 5,
+  FINALIZE: 6,
+  TOUCHES_DOWN: 7,
+  TOUCHES_MOVE: 8,
+  TOUCHES_UP: 9,
+  TOUCHES_CANCELLED: 10,
 } as const;
 
 // Allow using CALLBACK_TYPE as object and type
@@ -131,12 +137,8 @@ export abstract class BaseGesture<
     return this;
   }
 
-  protected isWorklet(
-    callback:
-      | TouchEventHandlerType
-      | ((event: GestureUpdateEvent<EventPayloadT>) => void)
-      | ((event: GestureStateChangeEvent<EventPayloadT>) => void)
-  ) {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  protected isWorklet(callback: Function) {
     //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
     return callback.__workletHash !== undefined;
   }
@@ -264,7 +266,8 @@ export abstract class BaseGesture<
 }
 
 export abstract class ContinousBaseGesture<
-  EventPayloadT extends Record<string, unknown>
+  EventPayloadT extends Record<string, unknown>,
+  EventChangePayloadT extends Record<string, unknown>
 > extends BaseGesture<EventPayloadT> {
   onUpdate(callback: (event: GestureUpdateEvent<EventPayloadT>) => void) {
     this.handlers.onUpdate = callback;
@@ -272,6 +275,16 @@ export abstract class ContinousBaseGesture<
     return this;
   }
 
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<EventPayloadT & EventChangePayloadT>
+    ) => void
+  ) {
+    this.handlers.onChange = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.CHANGE] = this.isWorklet(callback);
+    return this;
+  }
+
   manualActivation(manualActivation: boolean) {
     this.config.manualActivation = manualActivation;
     return this;

package/src/handlers/gestures/manualGesture.ts

@@ -1,11 +1,31 @@
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 import { ContinousBaseGesture } from './gesture';
 
-export class ManualGesture extends ContinousBaseGesture<Record<string, never>> {
+function changeEventCalculator(
+  current: GestureUpdateEvent<Record<string, never>>,
+  _previous?: GestureUpdateEvent<Record<string, never>>
+) {
+  'worklet';
+  return current;
+}
+
+export class ManualGesture extends ContinousBaseGesture<
+  Record<string, never>,
+  Record<string, never>
+> {
   constructor() {
     super();
 
     this.handlerName = 'ManualGestureHandler';
   }
+
+  onChange(
+    callback: (event: GestureUpdateEvent<Record<string, never>>) => void
+  ) {
+    // @ts-ignore TS being overprotective, Record<string, never> is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
 }
 
 export type ManualGestureType = InstanceType<typeof ManualGesture>;

package/src/handlers/gestures/panGesture.ts

@@ -1,10 +1,40 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 import {
   PanGestureConfig,
   PanGestureHandlerEventPayload,
 } from '../PanGestureHandler';
 
-export class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPayload> {
+type PanGestureChangeEventPayload = {
+  changeX: number;
+  changeY: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<PanGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<PanGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: PanGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      changeX: current.translationX,
+      changeY: current.translationY,
+    };
+  } else {
+    changePayload = {
+      changeX: current.translationX - previous.translationX,
+      changeY: current.translationY - previous.translationY,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class PanGesture extends ContinousBaseGesture<
+  PanGestureHandlerEventPayload,
+  PanGestureChangeEventPayload
+> {
   public config: BaseGestureConfig & PanGestureConfig = {};
 
   constructor() {
@@ -100,6 +130,18 @@ export class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPaylo
     this.config.enableTrackpadTwoFingerGesture = value;
     return this;
   }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        PanGestureHandlerEventPayload & PanGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, PanGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
 }
 
 export type PanGestureType = InstanceType<typeof PanGesture>;

package/src/handlers/gestures/pinchGesture.ts

@@ -1,12 +1,51 @@
 import { ContinousBaseGesture } from './gesture';
 import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
-export class PinchGesture extends ContinousBaseGesture<PinchGestureHandlerEventPayload> {
+type PinchGestureChangeEventPayload = {
+  scaleChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<PinchGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<PinchGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: PinchGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      scaleChange: current.scale,
+    };
+  } else {
+    changePayload = {
+      scaleChange: current.scale / previous.scale,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class PinchGesture extends ContinousBaseGesture<
+  PinchGestureHandlerEventPayload,
+  PinchGestureChangeEventPayload
+> {
   constructor() {
     super();
 
     this.handlerName = 'PinchGestureHandler';
   }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        PinchGestureHandlerEventPayload & PinchGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, PinchGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
 }
 
 export type PinchGestureType = InstanceType<typeof PinchGesture>;

package/src/handlers/gestures/rotationGesture.ts

@@ -1,12 +1,51 @@
 import { ContinousBaseGesture } from './gesture';
 import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
-export class RotationGesture extends ContinousBaseGesture<RotationGestureHandlerEventPayload> {
+type RotationGestureChangeEventPayload = {
+  rotationChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<RotationGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<RotationGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: RotationGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      rotationChange: current.rotation,
+    };
+  } else {
+    changePayload = {
+      rotationChange: current.rotation - previous.rotation,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class RotationGesture extends ContinousBaseGesture<
+  RotationGestureHandlerEventPayload,
+  RotationGestureChangeEventPayload
+> {
   constructor() {
     super();
 
     this.handlerName = 'RotationGestureHandler';
   }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        RotationGestureHandlerEventPayload & RotationGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, RotationGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
 }
 
 export type RotationGestureType = InstanceType<typeof RotationGesture>;