react-native-gesture-handler 3.0.0-beta.2 → 3.0.0-beta.4

package/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -1,53 +1,74 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import HostGestureDetector from '../HostGestureDetector';
-import {
-  VirtualChild,
-  GestureHandlerEventWithHandlerData,
+import { Platform } from 'react-native';
+
+import type {
+  TouchAction,
+  UserSelect,
+} from '../../../handlers/gestureHandlerCommon';
+import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
+import { tagMessage } from '../../../utils';
+import { isComposedGesture } from '../../hooks/utils/relationUtils';
+import type {
   DetectorCallbacks,
+  GestureHandlerEventWithHandlerData,
+  VirtualChild,
 } from '../../types';
+import type { InterceptingGestureDetectorProps } from '../common';
+import { AnimatedNativeDetector, nativeDetectorStyles } from '../common';
+import HostGestureDetector from '../HostGestureDetector';
+import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
+import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
+import { configureRelations, ensureNativeDetectorComponent } from '../utils';
+import type { InterceptingDetectorContextValue } from './useInterceptingDetectorContext';
 import {
   InterceptingDetectorContext,
-  InterceptingDetectorContextValue,
   InterceptingDetectorMode,
 } from './useInterceptingDetectorContext';
-import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
-import { configureRelations, ensureNativeDetectorComponent } from '../utils';
-import { isComposedGesture } from '../../hooks/utils/relationUtils';
-import {
-  AnimatedNativeDetector,
-  InterceptingGestureDetectorProps,
-  nativeDetectorStyles,
-} from '../common';
-import { tagMessage } from '../../../utils';
-import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
-import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
-import { Platform } from 'react-native';
 
-interface VirtualChildrenForNative {
+interface StrippedVirtualChildren {
   viewTag: number;
   handlerTags: number[];
-  viewRef: unknown;
+  viewRef?: unknown;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
 }
 
-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>>(
     () => new Set()
   );
-  const virtualChildrenForNativeComponent: VirtualChildrenForNative[] = useMemo(
+  const strippedVirtualChildren: StrippedVirtualChildren[] = useMemo(
     () =>
-      Array.from(virtualChildren).map((child) => ({
-        viewTag: child.viewTag,
-        handlerTags: child.handlerTags,
-        viewRef: child.viewRef,
-      })),
+      Platform.OS === 'web'
+        ? Array.from(virtualChildren).map((child) => ({
+            viewTag: child.viewTag,
+            handlerTags: child.handlerTags,
+            viewRef: child.viewRef,
+            userSelect: child.userSelect,
+            touchAction: child.touchAction,
+            enableContextMenu: child.enableContextMenu,
+          }))
+        : Array.from(virtualChildren).map((child) => ({
+            viewTag: child.viewTag,
+            handlerTags: child.handlerTags,
+          })),
     [virtualChildren]
   );
   const [mode, setMode] = useState<InterceptingDetectorMode>(
@@ -131,8 +152,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 +177,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 +198,10 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         if (handler) {
           handlers.push(
             handler as (
-              e: GestureHandlerEventWithHandlerData<THandlerData>
+              e: GestureHandlerEventWithHandlerData<
+                THandlerData,
+                TExtendedHandlerData
+              >
             ) => void
           );
         }
@@ -261,7 +293,7 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         }
         handlerTags={handlerTags}
         style={nativeDetectorStyles.detector}
-        virtualChildren={virtualChildrenForNativeComponent}
+        virtualChildren={strippedVirtualChildren}
         moduleId={globalThis._RNGH_MODULE_ID}>
         {children}
       </NativeDetectorComponent>

package/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -1,15 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Wrap } from '../../../handlers/gestures/GestureDetector/Wrap';
 import { findNodeHandle, Platform } from 'react-native';
+
+import { Wrap } from '../../../handlers/gestures/GestureDetector/Wrap';
+import { tagMessage } from '../../../utils';
+import { isComposedGesture } from '../../hooks/utils/relationUtils';
+import type { DetectorCallbacks, VirtualChild } from '../../types';
+import type { VirtualDetectorProps } from '../common';
+import { useNativeGestureRole } from '../useNativeGestureRole';
+import { configureRelations } from '../utils';
 import {
   InterceptingDetectorMode,
   useInterceptingDetectorContext,
 } from './useInterceptingDetectorContext';
-import { isComposedGesture } from '../../hooks/utils/relationUtils';
-import { VirtualDetectorProps } from '../common';
-import { configureRelations } from '../utils';
-import { tagMessage } from '../../../utils';
-import { DetectorCallbacks, VirtualChild } from '../../types';
 
 function useRequiredInterceptingDetectorContext() {
   const context = useInterceptingDetectorContext();
@@ -23,9 +25,11 @@ function useRequiredInterceptingDetectorContext() {
   return context;
 }
 
-export function VirtualDetector<THandlerData, TConfig>(
-  props: VirtualDetectorProps<THandlerData, TConfig>
-) {
+export function VirtualDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(props: VirtualDetectorProps<TConfig, THandlerData, TExtendedHandlerData>) {
   // 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
   'use no memo';
@@ -51,6 +55,8 @@ export function VirtualDetector<THandlerData, TConfig>(
     [props.children]
   );
 
+  useNativeGestureRole(viewRef, props.children);
+
   useEffect(() => {
     if (viewTag === -1) {
       return;
@@ -73,17 +79,30 @@ 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,
+      userSelect: props.userSelect,
+      touchAction: props.touchAction,
+      enableContextMenu: props.enableContextMenu,
     };
-
     register(virtualChild);
-
     return () => {
       unregister(virtualChild);
     };
-  }, [viewTag, props.gesture, register, unregister, setMode]);
+  }, [
+    viewTag,
+    props.gesture,
+    props.userSelect,
+    props.touchAction,
+    props.enableContextMenu,
+    register,
+    unregister,
+    setMode,
+  ]);
 
   configureRelations(props.gesture);
 

package/src/v3/detectors/VirtualDetector/useInterceptingDetectorContext.ts

@@ -1,5 +1,6 @@
 import { createContext, use } from 'react';
-import { VirtualChild } from '../../types';
+
+import type { VirtualChild } from '../../types';
 
 export enum InterceptingDetectorMode {
   DEFAULT,

package/src/v3/detectors/common.ts

@@ -1,9 +1,13 @@
-import React from 'react';
-import { Gesture } from '../types';
+import type React from 'react';
 import { Animated, StyleSheet } from 'react-native';
+
+import type {
+  TouchAction,
+  UserSelect,
+} from '../../handlers/gestureHandlerCommon';
+import type { GestureDetectorProps as LegacyDetectorProps } from '../../handlers/gestures/GestureDetector';
+import type { Gesture } from '../types';
 import HostGestureDetector from './HostGestureDetector';
-import { GestureDetectorProps as LegacyDetectorProps } from '../../handlers/gestures/GestureDetector';
-import { TouchAction, UserSelect } from '../../handlers/gestureHandlerCommon';
 
 export enum GestureDetectorType {
   Native,
@@ -13,30 +17,46 @@ export enum GestureDetectorType {
 
 interface CommonGestureDetectorProps {
   children?: React.ReactNode;
-  userSelect?: UserSelect;
-  touchAction?: TouchAction;
-  enableContextMenu?: boolean;
+  userSelect?: UserSelect | undefined;
+  touchAction?: TouchAction | undefined;
+  enableContextMenu?: boolean | undefined;
 }
 
-export interface NativeDetectorProps<THandlerData, TConfig>
-  extends CommonGestureDetectorProps {
-  gesture: Gesture<THandlerData, TConfig>;
+export interface NativeDetectorProps<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+> extends CommonGestureDetectorProps {
+  gesture: Gesture<TConfig, THandlerData, TExtendedHandlerData>;
 }
 
-export interface InterceptingGestureDetectorProps<THandlerData, TConfig>
-  extends CommonGestureDetectorProps {
-  gesture?: Gesture<THandlerData, TConfig>;
+export interface InterceptingGestureDetectorProps<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+> extends CommonGestureDetectorProps {
+  gesture?: Gesture<TConfig, THandlerData, TExtendedHandlerData>;
 }
 
-// TODO: Handle CommonGestureDetectorProps inside VirtualGestureDetector
-export interface VirtualDetectorProps<THandlerData, TConfig> {
-  children?: React.ReactNode;
-  gesture: Gesture<THandlerData, TConfig>;
+export interface VirtualDetectorProps<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+> extends CommonGestureDetectorProps {
+  gesture: Gesture<TConfig, THandlerData, TExtendedHandlerData>;
 }
 
-export type GestureDetectorProps<THandlerData, TConfig> =
-  | NativeDetectorProps<THandlerData, TConfig>
-  | InterceptingGestureDetectorProps<THandlerData, TConfig>
+export type GestureDetectorProps<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+> =
+  | NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
+  | InterceptingGestureDetectorProps<
+      TConfig,
+      THandlerData,
+      TExtendedHandlerData
+    >
   | LegacyDetectorProps;
 
 export const AnimatedNativeDetector =

package/src/v3/detectors/index.ts

@@ -1,5 +1,5 @@
 export type { GestureDetectorProps } from './common';
 export { GestureDetectorType } from './common';
 export { GestureDetector } from './GestureDetector';
-export { VirtualDetector as VirtualGestureDetector } from './VirtualDetector/VirtualDetector';
 export { InterceptingGestureDetector } from './VirtualDetector/InterceptingGestureDetector';
+export { VirtualDetector as VirtualGestureDetector } from './VirtualDetector/VirtualDetector';

package/src/v3/detectors/useEnsureGestureHandlerRootView.ts

@@ -1,5 +1,6 @@
 import { use } from 'react';
 import { Platform } from 'react-native';
+
 import GestureHandlerRootViewContext from '../../GestureHandlerRootViewContext';
 
 export function useEnsureGestureHandlerRootView() {

package/src/v3/detectors/useNativeGestureRole.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, RefObject } from 'react';
+
+export function useNativeGestureRole(
+  _viewRef: RefObject<unknown>,
+  _children: ReactNode
+): void {
+  // No-op on native; the web implementation lives in `useNativeGestureRole.web.ts`.
+}

package/src/v3/detectors/useNativeGestureRole.web.ts

@@ -0,0 +1,42 @@
+import type { ReactNode, RefObject } from 'react';
+import { useEffect } from 'react';
+
+import { NATIVE_GESTURE_ROLE_ATTRIBUTE } from '../../web/constants';
+import { NativeGestureRole } from '../../web/interfaces';
+
+export function useNativeGestureRole(
+  viewRef: RefObject<Element | null>,
+  children: ReactNode
+): void {
+  useEffect(() => {
+    const child = viewRef.current?.firstChild;
+
+    if (!(child instanceof HTMLElement)) {
+      return;
+    }
+
+    // @ts-ignore This exists on React.ReactNode
+    const displayName = children?.type?.displayName as string;
+
+    if (displayName === NativeGestureRole.ScrollView) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.ScrollView
+      );
+    } else if (displayName === NativeGestureRole.Switch) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.Switch
+      );
+    } else if (displayName === NativeGestureRole.Button) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.Button
+      );
+    }
+
+    return () => {
+      child.removeAttribute(NATIVE_GESTURE_ROLE_ATTRIBUTE);
+    };
+  }, [children, viewRef]);
+}

package/src/v3/detectors/utils.ts

@@ -10,7 +10,8 @@ import {
   prepareRelations,
 } from '../hooks/utils/relationUtils';
 import { NativeProxy } from '../NativeProxy';
-import { ComposedGestureName, Gesture } from '../types';
+import type { Gesture } from '../types';
+import { ComposedGestureName } from '../types';
 
 // The tree consists of ComposedGestures and NativeGestures. NativeGestures are always leaf nodes.
 export const traverseAndConfigureRelations = (
@@ -135,8 +136,8 @@ export const traverseAndConfigureRelations = (
   });
 };
 
-export function configureRelations<THandlerData, TConfig>(
-  gesture: Gesture<THandlerData, TConfig>
+export function configureRelations<TConfig, THandlerData>(
+  gesture: Gesture<TConfig, THandlerData>
 ) {
   if (isComposedGesture(gesture)) {
     const simultaneousHandlers = new Set<number>(

package/src/v3/gestureStateManager.ts

@@ -2,7 +2,6 @@ import { State } from '../State';
 import { tagMessage } from '../utils';
 
 export type GestureStateManagerType = {
-  begin(handlerTag: number): void;
   activate(handlerTag: number): void;
   fail(handlerTag: number): void;
   deactivate(handlerTag: number): void;
@@ -21,11 +20,6 @@ const setGestureState = (handlerTag: number, state: State) => {
 };
 
 export const GestureStateManager: GestureStateManagerType = {
-  begin(handlerTag: number) {
-    'worklet';
-    setGestureState(handlerTag, State.BEGAN);
-  },
-
   activate(handlerTag: number) {
     'worklet';
     setGestureState(handlerTag, State.ACTIVE);

package/src/v3/gestureStateManager.web.ts

@@ -1,9 +1,8 @@
-import { State } from '../State';
 import { tagMessage } from '../utils';
-import IGestureHandler from '../web/handlers/IGestureHandler';
+import type IGestureHandler from '../web/handlers/IGestureHandler';
 import GestureHandlerOrchestrator from '../web/tools/GestureHandlerOrchestrator';
 import NodeManager from '../web/tools/NodeManager';
-import { GestureStateManagerType } from './gestureStateManager';
+import type { GestureStateManagerType } from './gestureStateManager';
 
 function ensureHandlerAttached(handler: IGestureHandler) {
   if (!handler.attached) {
@@ -16,24 +15,10 @@ function ensureHandlerAttached(handler: IGestureHandler) {
 }
 
 export const GestureStateManager: GestureStateManagerType = {
-  begin(handlerTag: number): void {
-    'worklet';
-    const handler = NodeManager.getHandler(handlerTag);
-    ensureHandlerAttached(handler);
-
-    GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(handler);
-    handler.begin();
-  },
-
   activate(handlerTag: number): void {
     'worklet';
     const handler = NodeManager.getHandler(handlerTag);
     ensureHandlerAttached(handler);
-    // Force going from UNDETERMINED to ACTIVE through BEGAN to preserve
-    // the correct state transition flow.
-    if (handler.state === State.UNDETERMINED) {
-      handler.begin();
-    }
 
     GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(handler);
     handler.activate(true);

package/src/v3/hooks/callbacks/eventHandler.ts

@@ -1,28 +1,37 @@
-import {
-  flattenAndFilterEvent,
-  isEventForHandlerWithTag,
-  maybeExtractNativeEvent,
-  runCallback,
-  touchEventTypeToCallbackType,
-} from '../utils';
+import type { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
+import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
+import type { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper';
+import { State } from '../../../State';
+import { TouchEventType } from '../../../TouchEventType';
 import { tagMessage } from '../../../utils';
-import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper';
-import {
+import type {
   ChangeCalculatorType,
   GestureCallbacks,
+  GestureEndEvent,
+  GestureEvent,
   GestureHandlerEventWithHandlerData,
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
 } from '../../types';
-import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
-import { State } from '../../../State';
-import { TouchEventType } from '../../../TouchEventType';
-import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
+import {
+  flattenAndFilterEvent,
+  isEventForHandlerWithTag,
+  maybeExtractNativeEvent,
+  runCallback,
+  touchEventTypeToCallbackType,
+} from '../utils';
+import { isStateChangeEvent, isTouchEvent } from '../utils/eventUtils';
 
-function handleStateChangeEvent<THandlerData>(
-  eventWithData: GestureStateChangeEventWithHandlerData<THandlerData>,
-  callbacks: GestureCallbacks<THandlerData>,
-  context: ReanimatedContext<THandlerData>
+function handleStateChangeEvent<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  eventWithData: GestureStateChangeEventWithHandlerData<
+    THandlerData | TExtendedHandlerData
+  >,
+  callbacks: GestureCallbacks<THandlerData, TExtendedHandlerData>,
+  context: ReanimatedContext<TExtendedHandlerData>,
+  fillInDefaultValues?: (event: GestureEvent<TExtendedHandlerData>) => void
 ) {
   'worklet';
   const { oldState, state } = eventWithData;
@@ -34,24 +43,31 @@ function handleStateChangeEvent<THandlerData>(
     (oldState === State.BEGAN || oldState === State.UNDETERMINED) &&
     state === State.ACTIVE
   ) {
+    fillInDefaultValues?.(event as GestureEvent<TExtendedHandlerData>);
     runCallback(CALLBACK_TYPE.START, callbacks, event);
-  } else if (oldState !== state && state === State.END) {
-    if (oldState === State.ACTIVE) {
-      runCallback(CALLBACK_TYPE.END, callbacks, event, true);
-    }
-    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
-
-    if (context) {
-      context.lastUpdateEvent = undefined;
-    }
   } else if (
-    (state === State.FAILED || state === State.CANCELLED) &&
-    state !== oldState
+    oldState !== state &&
+    (state === State.END || state === State.FAILED || state === State.CANCELLED)
   ) {
+    const canceled = state === State.FAILED || state === State.CANCELLED;
+    const endEvent: GestureEndEvent<THandlerData> = {
+      ...event,
+      canceled,
+    };
+
     if (oldState === State.ACTIVE) {
-      runCallback(CALLBACK_TYPE.END, callbacks, event, false);
+      fillInDefaultValues?.(endEvent as GestureEndEvent<TExtendedHandlerData>);
+      runCallback<THandlerData, TExtendedHandlerData>(
+        CALLBACK_TYPE.END,
+        callbacks,
+        endEvent
+      );
     }
-    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);
+    runCallback<THandlerData, TExtendedHandlerData>(
+      CALLBACK_TYPE.FINALIZE,
+      callbacks,
+      endEvent
+    );
 
     if (context) {
       context.lastUpdateEvent = undefined;
@@ -59,11 +75,14 @@ function handleStateChangeEvent<THandlerData>(
   }
 }
 
-export function handleUpdateEvent<THandlerData>(
-  eventWithData: GestureUpdateEventWithHandlerData<THandlerData>,
-  handlers: GestureCallbacks<THandlerData>,
-  changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined,
-  context: ReanimatedContext<THandlerData>
+export function handleUpdateEvent<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  eventWithData: GestureUpdateEventWithHandlerData<TExtendedHandlerData>,
+  handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>,
+  changeEventCalculator: ChangeCalculatorType<TExtendedHandlerData> | undefined,
+  context: ReanimatedContext<TExtendedHandlerData>
 ) {
   'worklet';
   const eventWithChanges = changeEventCalculator
@@ -86,9 +105,12 @@ export function handleUpdateEvent<THandlerData>(
   context.lastUpdateEvent = eventWithData;
 }
 
-export function handleTouchEvent<THandlerData>(
+export function handleTouchEvent<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   event: GestureTouchEvent,
-  handlers: GestureCallbacks<THandlerData>
+  handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>
 ) {
   'worklet';
 
@@ -97,13 +119,20 @@ export function handleTouchEvent<THandlerData>(
   }
 }
 
-export function eventHandler<THandlerData>(
+export function eventHandler<
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
   handlerTag: number,
-  sourceEvent: GestureHandlerEventWithHandlerData<THandlerData>,
-  handlers: GestureCallbacks<THandlerData>,
-  changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined,
-  jsContext: ReanimatedContext<THandlerData>,
-  dispatchesAnimatedEvents: boolean
+  sourceEvent: GestureHandlerEventWithHandlerData<
+    THandlerData,
+    TExtendedHandlerData
+  >,
+  handlers: GestureCallbacks<THandlerData, TExtendedHandlerData>,
+  changeEventCalculator: ChangeCalculatorType<TExtendedHandlerData> | undefined,
+  jsContext: ReanimatedContext<TExtendedHandlerData>,
+  dispatchesAnimatedEvents: boolean,
+  fillInDefaultValues?: (event: GestureEvent<TExtendedHandlerData>) => void
 ) {
   'worklet';
   const eventWithData = maybeExtractNativeEvent(sourceEvent);
@@ -112,11 +141,22 @@ export function eventHandler<THandlerData>(
     return;
   }
 
-  if ('oldState' in eventWithData && eventWithData.oldState !== undefined) {
-    handleStateChangeEvent(eventWithData, handlers, jsContext);
-  } else if ('allTouches' in eventWithData) {
+  if (isStateChangeEvent(eventWithData)) {
+    handleStateChangeEvent(
+      eventWithData,
+      handlers,
+      jsContext,
+      fillInDefaultValues
+    );
+    return;
+  }
+
+  if (isTouchEvent(eventWithData)) {
     handleTouchEvent(eventWithData, handlers);
-  } else if (!dispatchesAnimatedEvents) {
+    return;
+  }
+
+  if (!dispatchesAnimatedEvents) {
     handleUpdateEvent(
       eventWithData,
       handlers,