Split HandlerData

packages/react-native-gesture-handler/src/__tests__/RelationsTraversal.test.tsx

@@ -10,9 +10,9 @@ import { SingleGesture, SingleGestureName } from '../v3/types';
 import { renderHook } from '@testing-library/react-native';
 
 describe('Ensure only one leaf node', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>,
-    pan3: SingleGesture<unknown, unknown>;
+  let pan1: SingleGesture<unknown, unknown, unknown>,
+    pan2: SingleGesture<unknown, unknown, unknown>,
+    pan3: SingleGesture<unknown, unknown, unknown>;
 
   beforeEach(() => {
     pan1 = renderHook(() =>
@@ -55,8 +55,8 @@ describe('Ensure only one leaf node', () => {
 });
 
 describe('Simple relations', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>;
+  let pan1: SingleGesture<unknown, unknown, unknown>,
+    pan2: SingleGesture<unknown, unknown, unknown>;
 
   beforeEach(() => {
     pan1 = renderHook(() =>
@@ -203,12 +203,12 @@ describe('External relations', () => {
 });
 
 describe('Complex relations', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>,
-    pan3: SingleGesture<unknown, unknown>;
-  let tap1: SingleGesture<unknown, unknown>,
-    tap2: SingleGesture<unknown, unknown>,
-    tap3: SingleGesture<unknown, unknown>;
+  let pan1: SingleGesture<unknown, unknown, unknown>,
+    pan2: SingleGesture<unknown, unknown, unknown>,
+    pan3: SingleGesture<unknown, unknown, unknown>;
+  let tap1: SingleGesture<unknown, unknown, unknown>,
+    tap2: SingleGesture<unknown, unknown, unknown>,
+    tap3: SingleGesture<unknown, unknown, unknown>;
 
   beforeEach(() => {
     tap1 = renderHook(() =>

packages/react-native-gesture-handler/src/components/Pressable/utils.ts

@@ -14,6 +14,7 @@ import {
   PressableEvent,
 } from './PressableProps';
 import { HoverGestureEvent, LongPressGestureEvent } from '../../v3';
+import { OptionalProps } from '../../v3/types/UtilityTypes';
 
 const numberAsInset = (value: number): Insets => ({
   left: value,
@@ -50,7 +51,7 @@ const gestureToPressEvent = (
     | GestureStateChangeEvent<
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
-    | HoverGestureEvent
+    | OptionalProps<HoverGestureEvent, 'changeX' | 'changeY'>
     | LongPressGestureEvent,
   timestamp: number,
   targetId: number
@@ -81,7 +82,7 @@ const gestureToPressableEvent = (
     | GestureStateChangeEvent<
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
-    | HoverGestureEvent
+    | OptionalProps<HoverGestureEvent, 'changeX' | 'changeY'>
     | LongPressGestureEvent
 ): PressableEvent => {
   const timestamp = Date.now();

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -53,8 +53,8 @@ let Reanimated:
         ): ComponentClass<P>;
       };
       NativeEventsManager: NativeEventsManager;
-      useHandler: <THandlerData>(
-        handlers: GestureCallbacks<THandlerData>
+      useHandler: <TBaseHandlerData, THandlerData>(
+        handlers: GestureCallbacks<TBaseHandlerData, THandlerData>
       ) => ReanimatedHandler<THandlerData>;
       useEvent: <T>(
         callback: (event: T) => void,

packages/react-native-gesture-handler/src/handlers/handlersRegistry.ts

@@ -8,14 +8,14 @@ export const handlerIDToTag: Record<string, number> = {};
 // There were attempts to create types that merge possible HandlerData and Config,
 // but ts was not able to infer them properly in many cases, so we use any here.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const hookGestures = new Map<number, SingleGesture<any, any>>();
+const hookGestures = new Map<number, SingleGesture<any, any, any>>();
 const gestures = new Map<number, GestureType>();
 const oldHandlers = new Map<number, GestureHandlerCallbacks>();
 const testIDs = new Map<string, number>();
 
-export function registerGesture<THandlerData, TConfig>(
+export function registerGesture<TBaseHandlerData, THandlerData, TConfig>(
   handlerTag: number,
-  gesture: SingleGesture<THandlerData, TConfig>
+  gesture: SingleGesture<TBaseHandlerData, THandlerData, TConfig>
 ) {
   if (isTestEnv() && gesture.config.testID) {
     hookGestures.set(handlerTag, gesture);

packages/react-native-gesture-handler/src/jestUtils/jestUtils.ts

@@ -166,14 +166,17 @@ const handlersDefaultEvents: DefaultEventsMapping = {
 };
 
 function isGesture(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>
 ): componentOrGesture is GestureType {
   return componentOrGesture instanceof BaseGesture;
 }
 
 function isHookGesture(
-  componentOrGesture: ReactTestInstance | SingleGesture<any, any>
-): componentOrGesture is SingleGesture<any, any> {
+  componentOrGesture: ReactTestInstance | SingleGesture<any, any, any>
+): componentOrGesture is SingleGesture<any, any, any> {
   return 'detectorCallbacks' in componentOrGesture;
 }
 
@@ -416,7 +419,10 @@ interface HandlerData {
   enabled: boolean | undefined;
 }
 function getHandlerData(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>
 ): HandlerData {
   if (isGesture(componentOrGesture)) {
     const gesture = componentOrGesture;
@@ -500,7 +506,10 @@ type ExtractConfig<T> =
       : Record<string, unknown>;
 
 export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>,
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
   const { emitEvent, handlerType, handlerTag, enabled } =

packages/react-native-gesture-handler/src/v3/NativeProxy.ts

@@ -22,9 +22,9 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <TBaseHandlerData, THandlerData, TConfig>(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TBaseHandlerData, THandlerData, TConfig>
   ) => {
     scheduleOperationToBeFlushed(() => {
       RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
@@ -33,9 +33,9 @@ export const NativeProxy = {
   // updateGestureHandlerConfig can be called on the UI thread when using
   // SharedValue binding. Therefore, it needs to be a worklet and we flush
   // immediately since we're likely already on the UI thread.
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <TBaseHandlerData, THandlerData, TConfig>(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TBaseHandlerData, THandlerData, TConfig>
   ) => {
     'worklet';
     updateGestureHandlerConfig(handlerTag, newConfig);

packages/react-native-gesture-handler/src/v3/NativeProxy.web.ts

@@ -17,15 +17,15 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <TBaseHandlerData, THandlerData, TConfig>(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TBaseHandlerData, THandlerData, TConfig>
   ) => {
     RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
   },
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <TBaseHandlerData, THandlerData, TConfig>(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TBaseHandlerData, THandlerData, TConfig>
   ) => {
     RNGestureHandlerModule.updateGestureHandlerConfig(handlerTag, newConfig);
   },

packages/react-native-gesture-handler/src/v3/hooks/callbacks/eventHandler.ts

@@ -19,9 +19,9 @@ import { State } from '../../../State';
 import { TouchEventType } from '../../../TouchEventType';
 import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 
-function handleStateChangeEvent<THandlerData>(
+function handleStateChangeEvent<TBaseHandlerData, THandlerData>(
   eventWithData: GestureStateChangeEventWithHandlerData<THandlerData>,
-  callbacks: GestureCallbacks<THandlerData>,
+  callbacks: GestureCallbacks<TBaseHandlerData, THandlerData>,
   context: ReanimatedContext<THandlerData>
 ) {
   'worklet';
@@ -59,9 +59,9 @@ function handleStateChangeEvent<THandlerData>(
   }
 }
 
-export function handleUpdateEvent<THandlerData>(
+export function handleUpdateEvent<TBaseHandlerData, THandlerData>(
   eventWithData: GestureUpdateEventWithHandlerData<THandlerData>,
-  handlers: GestureCallbacks<THandlerData>,
+  handlers: GestureCallbacks<TBaseHandlerData, THandlerData>,
   changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined,
   context: ReanimatedContext<THandlerData>
 ) {
@@ -86,9 +86,9 @@ export function handleUpdateEvent<THandlerData>(
   context.lastUpdateEvent = eventWithData;
 }
 
-export function handleTouchEvent<THandlerData>(
+export function handleTouchEvent<TBaseHandlerData, THandlerData>(
   event: GestureTouchEvent,
-  handlers: GestureCallbacks<THandlerData>
+  handlers: GestureCallbacks<TBaseHandlerData, THandlerData>
 ) {
   'worklet';
 
@@ -97,10 +97,10 @@ export function handleTouchEvent<THandlerData>(
   }
 }
 
-export function eventHandler<THandlerData>(
+export function eventHandler<TBaseHandlerData, THandlerData>(
   handlerTag: number,
   sourceEvent: GestureHandlerEventWithHandlerData<THandlerData>,
-  handlers: GestureCallbacks<THandlerData>,
+  handlers: GestureCallbacks<TBaseHandlerData, THandlerData>,
   changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined,
   jsContext: ReanimatedContext<THandlerData>,
   dispatchesAnimatedEvents: boolean

packages/react-native-gesture-handler/src/v3/hooks/callbacks/stateChangeHandler.ts

@@ -13,9 +13,9 @@ import {
   runCallback,
 } from '../utils';
 
-export function getStateChangeHandler<THandlerData>(
+export function getStateChangeHandler<TBaseHandlerData, THandlerData>(
   handlerTag: number,
-  callbacks: GestureCallbacks<THandlerData>,
+  callbacks: GestureCallbacks<TBaseHandlerData, THandlerData>,
   context?: ReanimatedContext<THandlerData>
 ) {
   return (sourceEvent: StateChangeEventWithHandlerData<THandlerData>) => {

packages/react-native-gesture-handler/src/v3/hooks/callbacks/touchEventHandler.ts

@@ -8,9 +8,9 @@ import {
 import { TouchEventType } from '../../../TouchEventType';
 import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 
-export function getTouchEventHandler<THandlerData>(
+export function getTouchEventHandler<TBaseHandlerData, THandlerData>(
   handlerTag: number,
-  callbacks: GestureCallbacks<THandlerData>
+  callbacks: GestureCallbacks<TBaseHandlerData, THandlerData>
 ) {
   return (sourceEvent: TouchEvent) => {
     'worklet';

packages/react-native-gesture-handler/src/v3/hooks/callbacks/updateHandler.ts

@@ -14,9 +14,9 @@ import {
   runCallback,
 } from '../utils';
 
-export function getUpdateHandler<THandlerData>(
+export function getUpdateHandler<TBaseHandlerData, THandlerData>(
   handlerTag: number,
-  callbacks: GestureCallbacks<THandlerData>,
+  callbacks: GestureCallbacks<TBaseHandlerData, THandlerData>,
   context: ReanimatedContext<THandlerData> | undefined,
   changeEventCalculator?: ChangeCalculatorType<THandlerData>
 ) {

packages/react-native-gesture-handler/src/v3/hooks/callbacks/useGestureEventHandler.ts

@@ -7,10 +7,10 @@ import {
 import { useMemo } from 'react';
 import { eventHandler } from './eventHandler';
 
-export function useGestureEventHandler<THandlerData, TConfig>(
+export function useGestureEventHandler<TBaseHandlerData, THandlerData, TConfig>(
   handlerTag: number,
-  handlers: GestureCallbacks<THandlerData>,
-  config: BaseGestureConfig<THandlerData, TConfig>
+  handlers: GestureCallbacks<TBaseHandlerData, THandlerData>,
+  config: BaseGestureConfig<TBaseHandlerData, THandlerData, TConfig>
 ) {
   const jsContext: ReanimatedContext<THandlerData> = useMemo(() => {
     return {

packages/react-native-gesture-handler/src/v3/hooks/callbacks/useReanimatedEventHandler.ts

@@ -15,9 +15,9 @@ const workletNOOP = () => {
   // no-op
 };
 
-export function useReanimatedEventHandler<THandlerData>(
+export function useReanimatedEventHandler<TBaseHandlerData, THandlerData>(
   handlerTag: number,
-  handlers: GestureCallbacks<THandlerData>,
+  handlers: GestureCallbacks<TBaseHandlerData, THandlerData>,
   reanimatedHandler: ReanimatedHandler<THandlerData> | undefined,
   changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined
 ) {

packages/react-native-gesture-handler/src/v3/hooks/gestures/fling/useFlingGesture.ts

@@ -20,6 +20,7 @@ type FlingHandlerData = {
 type FlingGestureProperties = WithSharedValue<FlingGestureNativeProperties>;
 
 type FlingGestureInternalConfig = BaseDiscreteGestureConfig<
+  FlingHandlerData,
   FlingHandlerData,
   FlingGestureProperties
 >;
@@ -30,12 +31,14 @@ export type FlingGestureConfig =
 export type FlingGestureEvent = GestureEvent<FlingHandlerData>;
 
 export type FlingGesture = SingleGesture<
+  FlingHandlerData,
   FlingHandlerData,
   FlingGestureProperties
 >;
 
 export function useFlingGesture(config: FlingGestureConfig): FlingGesture {
   const flingConfig = useClonedAndRemappedConfig<
+    FlingHandlerData,
     FlingHandlerData,
     FlingGestureProperties,
     FlingGestureProperties

packages/react-native-gesture-handler/src/v3/hooks/gestures/hover/useHoverGesture.ts

@@ -19,12 +19,15 @@ import {
   HoverGestureNativeProperties,
 } from './HoverProperties';
 
-type HoverHandlerData = {
+type HoverBaseHandlerData = {
   x: number;
   y: number;
   absoluteX: number;
   absoluteY: number;
   stylusData: StylusData;
+};
+
+type HoverHandlerData = HoverBaseHandlerData & {
   changeX: number;
   changeY: number;
 };
@@ -40,17 +43,23 @@ type HoverGestureInternalProperties = WithSharedValue<
 >;
 
 export type HoverGestureConfig = ExcludeInternalConfigProps<
-  BaseGestureConfig<HoverHandlerData, HoverGestureProperties>
+  BaseGestureConfig<
+    HoverBaseHandlerData,
+    HoverHandlerData,
+    HoverGestureProperties
+  >
 >;
 
 type HoverGestureInternalConfig = BaseGestureConfig<
+  HoverBaseHandlerData,
   HoverHandlerData,
   HoverGestureInternalProperties
 >;
 
 export type HoverGestureEvent = GestureEvent<HoverHandlerData>;
 
 export type HoverGesture = SingleGesture<
+  HoverBaseHandlerData,
   HoverHandlerData,
   HoverGestureInternalProperties
 >;
@@ -78,6 +87,7 @@ const HoverPropsMapping = new Map<string, string>([['effect', 'hoverEffect']]);
 
 export function useHoverGesture(config: HoverGestureConfig): HoverGesture {
   const hoverConfig = useClonedAndRemappedConfig<
+    HoverBaseHandlerData,
     HoverHandlerData,
     HoverGestureProperties,
     HoverGestureInternalProperties