Split HandlerData

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

@@ -9,10 +9,10 @@ import { configureRelations } from '../v3/detectors/utils';
 import { SingleGesture, SingleGestureName } from '../v3/types';
 import { renderHook } from '@testing-library/react-native';
 
+type AnySingleGesture = SingleGesture<unknown, unknown, unknown>;
+
 describe('Ensure only one leaf node', () => {
-  let pan1: SingleGesture<unknown, unknown>,
-    pan2: SingleGesture<unknown, unknown>,
-    pan3: SingleGesture<unknown, unknown>;
+  let pan1: AnySingleGesture, pan2: AnySingleGesture, pan3: AnySingleGesture;
 
   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,8 @@ 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: AnySingleGesture, pan2: AnySingleGesture, pan3: AnySingleGesture;
+  let tap1: AnySingleGesture, tap2: AnySingleGesture, tap3: AnySingleGesture;
 
   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 { HoverGestureActiveEvent } from '../../v3/hooks';
 
 const numberAsInset = (value: number): Insets => ({
   left: value,
@@ -51,6 +52,7 @@ const gestureToPressEvent = (
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
     | HoverGestureEvent
+    | HoverGestureActiveEvent
     | LongPressGestureEvent,
   timestamp: number,
   targetId: number
@@ -82,6 +84,7 @@ const gestureToPressableEvent = (
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
     | HoverGestureEvent
+    | HoverGestureActiveEvent
     | LongPressGestureEvent
 ): PressableEvent => {
   const timestamp = Date.now();

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

@@ -53,9 +53,9 @@ let Reanimated:
         ): ComponentClass<P>;
       };
       NativeEventsManager: NativeEventsManager;
-      useHandler: <THandlerData>(
-        handlers: GestureCallbacks<THandlerData>
-      ) => ReanimatedHandler<THandlerData>;
+      useHandler: <THandlerData, TExtendedHandlerData extends THandlerData>(
+        handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>
+      ) => ReanimatedHandler<TExtendedHandlerData>;
       useEvent: <T>(
         callback: (event: T) => void,
         events: string[],

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

@@ -8,14 +8,18 @@ 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<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  gesture: SingleGesture<THandlerData, TConfig>
+  gesture: SingleGesture<TConfig, THandlerData, TExtendedHandlerData>
 ) {
   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,13 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     scheduleOperationToBeFlushed(() => {
       RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
@@ -33,9 +37,13 @@ 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: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     'worklet';
     updateGestureHandlerConfig(handlerTag, newConfig);

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

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

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx

@@ -9,9 +9,9 @@ import type {
 } from './GestureButtonsProps';
 
 import type { GestureEvent } from '../types';
-import type { NativeViewHandlerData } from '../hooks/gestures/native/useNativeGesture';
+import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
 
-type CallbackEventType = GestureEvent<NativeViewHandlerData>;
+type CallbackEventType = GestureEvent<NativeHandlerData>;
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,

packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx

@@ -21,7 +21,7 @@ import createNativeWrapper from '../createNativeWrapper';
 import { NativeWrapperProperties } from '../types/NativeWrapperType';
 import { NativeWrapperProps } from '../hooks/utils';
 import { GestureDetectorType } from '../detectors';
-import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
+import { NativeGesture } from '../hooks/gestures/native/NativeTypes';
 import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 
 export const RefreshControl = createNativeWrapper(

packages/react-native-gesture-handler/src/v3/createNativeWrapper.tsx

@@ -4,7 +4,7 @@ import { NativeWrapperProps } from './hooks/utils';
 import { useNativeGesture } from './hooks/gestures';
 import { NativeDetector } from './detectors/NativeDetector';
 import type { NativeWrapperProperties } from './types/NativeWrapperType';
-import { NativeGesture } from './hooks/gestures/native/useNativeGesture';
+import { NativeGesture } from './hooks/gestures/native/NativeTypes';
 import { GestureDetectorType, InterceptingGestureDetector } from './detectors';
 import { VirtualDetector } from './detectors/VirtualDetector/VirtualDetector';
 

packages/react-native-gesture-handler/src/v3/detectors/GestureDetector.tsx

@@ -8,8 +8,14 @@ import {
 } from '../../handlers/gestures/GestureDetector';
 import { useEnsureGestureHandlerRootView } from './useEnsureGestureHandlerRootView';
 
-export function GestureDetector<THandlerData, TConfig>(
-  props: NativeDetectorProps<THandlerData, TConfig> | LegacyGestureDetectorProps
+export function GestureDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  props:
+    | NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
+    | LegacyGestureDetectorProps
 ) {
   useEnsureGestureHandlerRootView();
 
@@ -22,7 +28,11 @@ export function GestureDetector<THandlerData, TConfig>(
 
   return (
     <NativeDetector
-      {...(props as NativeDetectorProps<THandlerData, TConfig>)}
+      {...(props as NativeDetectorProps<
+        TConfig,
+        THandlerData,
+        TExtendedHandlerData
+      >)}
     />
   );
 }

packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx

@@ -10,13 +10,17 @@ import {
 import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
 import { Platform } from 'react-native';
 
-export function NativeDetector<THandlerData, TConfig>({
+export function NativeDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>({
   gesture,
   children,
   touchAction,
   userSelect,
   enableContextMenu,
-}: NativeDetectorProps<THandlerData, TConfig>) {
+}: NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>) {
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
     : gesture.config.shouldUseReanimatedDetector

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -29,13 +29,21 @@ interface VirtualChildrenForNative {
   viewRef: unknown;
 }
 
-export function InterceptingGestureDetector<THandlerData, TConfig>({
+export function InterceptingGestureDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>({
   gesture,
   children,
   touchAction,
   userSelect,
   enableContextMenu,
-}: InterceptingGestureDetectorProps<THandlerData, TConfig>) {
+}: InterceptingGestureDetectorProps<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData
+>) {
   useEnsureGestureHandlerRootView();
 
   const [virtualChildren, setVirtualChildren] = useState<Set<VirtualChild>>(
@@ -131,8 +139,13 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
   }
 
   const createGestureEventHandler = useCallback(
-    (key: keyof DetectorCallbacks<THandlerData>) => {
-      return (e: GestureHandlerEventWithHandlerData<THandlerData>) => {
+    (key: keyof DetectorCallbacks<THandlerData, TExtendedHandlerData>) => {
+      return (
+        e: GestureHandlerEventWithHandlerData<
+          THandlerData,
+          TExtendedHandlerData
+        >
+      ) => {
         if (typeof gesture?.detectorCallbacks[key] === 'function') {
           // @ts-expect-error passing event to a union of functions where only one is typed as such
           gesture.detectorCallbacks[key](e);
@@ -151,15 +164,18 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
   );
 
   const getHandlers = useCallback(
-    (key: keyof DetectorCallbacks<unknown>) => {
+    (key: keyof DetectorCallbacks<unknown, unknown>) => {
       const handlers: ((
-        e: GestureHandlerEventWithHandlerData<THandlerData>
+        e: GestureHandlerEventWithHandlerData<
+          THandlerData,
+          TExtendedHandlerData
+        >
       ) => void)[] = [];
 
       if (gesture?.detectorCallbacks[key]) {
         handlers.push(
           gesture.detectorCallbacks[key] as (
-            e: GestureHandlerEventWithHandlerData<unknown>
+            e: GestureHandlerEventWithHandlerData<unknown, unknown>
           ) => void
         );
       }
@@ -169,7 +185,10 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         if (handler) {
           handlers.push(
             handler as (
-              e: GestureHandlerEventWithHandlerData<THandlerData>
+              e: GestureHandlerEventWithHandlerData<
+                THandlerData,
+                TExtendedHandlerData
+              >
             ) => void
           );
         }

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -23,8 +23,8 @@ function useRequiredInterceptingDetectorContext() {
   return context;
 }
 
-export function VirtualDetector<THandlerData, TConfig>(
-  props: VirtualDetectorProps<THandlerData, TConfig>
+export function VirtualDetector<TConfig, THandlerData>(
+  props: VirtualDetectorProps<TConfig, THandlerData>
 ) {
   // Don't memoize virtual detectors to be able to listen to changes in children
   // TODO: replace with MutationObserver when it rolls out in React Native
@@ -73,7 +73,10 @@ export function VirtualDetector<THandlerData, TConfig>(
     const virtualChild: VirtualChild = {
       viewTag,
       handlerTags,
-      methods: props.gesture.detectorCallbacks as DetectorCallbacks<unknown>,
+      methods: props.gesture.detectorCallbacks as DetectorCallbacks<
+        unknown,
+        unknown
+      >,
       // used by HostGestureDetector on web
       viewRef: Platform.OS === 'web' ? viewRef : undefined,
     };