react-native-gesture-handler 2.3.2 → 2.4.2

package/src/handlers/gestureHandlerCommon.ts

@@ -6,16 +6,18 @@ import * as React from 'react';
 import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native';
 
 import { State } from '../State';
-import { EventType } from '../EventType';
+import { TouchEventType } from '../TouchEventType';
 import { ValueOf } from '../typeUtils';
 import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
+import RNGestureHandlerModule from '../RNGestureHandlerModule';
 
 const commonProps = [
   'id',
   'enabled',
   'shouldCancelWhenOutside',
   'hitSlop',
+  'cancelsTouchesInView',
 ] as const;
 
 const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
@@ -83,7 +85,7 @@ export type GestureTouchEvent = {
   handlerTag: number;
   numberOfTouches: number;
   state: ValueOf<typeof State>;
-  eventType: EventType;
+  eventType: TouchEventType;
   allTouches: TouchData[];
   changedTouches: TouchData[];
 };
@@ -111,6 +113,7 @@ export type BaseGestureHandlerProps<
   waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
   simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
   testID?: string;
+  cancelsTouchesInView?: boolean;
   // TODO(TS) - fix event types
   onBegan?: (event: HandlerStateChangeEvent) => void;
   onFailed?: (event: HandlerStateChangeEvent) => void;
@@ -123,6 +126,8 @@ export type BaseGestureHandlerProps<
   onHandlerStateChange?: (
     event: HandlerStateChangeEvent<ExtraEventPayloadT>
   ) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children?: React.ReactNode;
 };
 
 function isConfigParam(param: unknown, name: string) {
@@ -180,3 +185,17 @@ export function findNodeHandle(
   if (Platform.OS === 'web') return node;
   return findNodeHandleRN(node);
 }
+
+let scheduledFlushOperationsId: ReturnType<
+  typeof requestAnimationFrame
+> | null = null;
+
+export function scheduleFlushOperations() {
+  if (scheduledFlushOperationsId === null) {
+    scheduledFlushOperationsId = requestAnimationFrame(() => {
+      RNGestureHandlerModule.flushOperations();
+
+      scheduledFlushOperationsId = null;
+    });
+  }
+}

package/src/handlers/gestures/GestureDetector.tsx

@@ -16,6 +16,8 @@ import {
   GestureTouchEvent,
   GestureUpdateEvent,
   GestureStateChangeEvent,
+  HandlerStateChangeEvent,
+  scheduleFlushOperations,
 } from '../gestureHandlerCommon';
 import {
   GestureStateManager,
@@ -30,15 +32,18 @@ import {
 } from '../PanGestureHandler';
 import { tapGestureHandlerProps } from '../TapGestureHandler';
 import { State } from '../../State';
-import { EventType } from '../../EventType';
+import { TouchEventType } from '../../TouchEventType';
 import { ComposedGesture } from './gestureComposition';
 import { ActionType } from '../../ActionType';
 import { isFabric, tagMessage } from '../../utils';
 import { getShadowNodeFromRef } from '../../getShadowNodeFromRef';
+import { Platform } from 'react-native';
+import type RNGestureHandlerModuleWeb from '../../RNGestureHandlerModule.web';
+import { onGestureHandlerEvent } from './eventReceiver';
 
-declare global {
-  function isFormsStackingContext(node: unknown): boolean | null; // JSI function
-}
+declare const global: {
+  isFormsStackingContext: (node: unknown) => boolean | null; // JSI function
+};
 
 const ALLOWED_PROPS = [
   ...baseGestureHandlerWithMonitorProps,
@@ -84,6 +89,8 @@ function dropHandlers(preparedGesture: GestureConfigReference) {
 
     unregisterHandler(handler.handlerTag, handler.config.testId);
   }
+
+  scheduleFlushOperations();
 }
 
 function checkGestureCallbacksForWorklets(gesture: GestureType) {
@@ -107,11 +114,16 @@ function checkGestureCallbacksForWorklets(gesture: GestureType) {
   }
 }
 
+interface WebEventHandler {
+  onGestureHandlerEvent: (event: HandlerStateChangeEvent<unknown>) => void;
+}
+
 interface AttachHandlersConfig {
   preparedGesture: GestureConfigReference;
   gestureConfig: ComposedGesture | GestureType | undefined;
   gesture: GestureType[];
   viewTag: number;
+  webEventHandlersRef: React.RefObject<WebEventHandler>;
 }
 
 function attachHandlers({
@@ -119,6 +131,7 @@ function attachHandlers({
   gestureConfig,
   gesture,
   viewTag,
+  webEventHandlersRef,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
     gestureConfig?.initialize();
@@ -142,10 +155,12 @@ function attachHandlers({
     );
 
     registerHandler(handler.handlerTag, handler, handler.config.testId);
+  }
 
-    // use setImmediate to extract handlerTags, because all refs should be initialized
-    // when it's ran
-    setImmediate(() => {
+  // use setImmediate to extract handlerTags, because all refs should be initialized
+  // when it's ran
+  setImmediate(() => {
+    for (const handler of gesture) {
       let requireToFail: number[] = [];
       if (handler.config.requireToFail) {
         requireToFail = extractValidHandlerTags(handler.config.requireToFail);
@@ -165,8 +180,11 @@ function attachHandlers({
           waitFor: requireToFail,
         })
       );
-    });
-  }
+    }
+
+    scheduleFlushOperations();
+  });
+
   preparedGesture.config = gesture;
 
   for (const gesture of preparedGesture.config) {
@@ -174,11 +192,20 @@ function attachHandlers({
       ? ActionType.REANIMATED_WORKLET
       : ActionType.JS_FUNCTION_NEW_API;
 
-    RNGestureHandlerModule.attachGestureHandler(
-      gesture.handlerTag,
-      viewTag,
-      actionType
-    );
+    if (Platform.OS === 'web') {
+      (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
+        gesture.handlerTag,
+        viewTag,
+        ActionType.JS_FUNCTION_OLD_API, // ignored on web
+        webEventHandlersRef
+      );
+    } else {
+      RNGestureHandlerModule.attachGestureHandler(
+        gesture.handlerTag,
+        viewTag,
+        actionType
+      );
+    }
   }
 
   if (preparedGesture.animatedHandlers) {
@@ -241,12 +268,37 @@ function updateHandlers(
     }
 
     if (preparedGesture.animatedHandlers) {
-      preparedGesture.animatedHandlers.value = (preparedGesture.config
+      const previousHandlersValue =
+        preparedGesture.animatedHandlers.value ?? [];
+      const newHandlersValue = (preparedGesture.config
         .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
         .map((g) => g.handlers) as unknown) as HandlerCallbacks<
         Record<string, unknown>
       >[];
+
+      // if amount of gesture configs changes, we need to update the callbacks in shared value
+      let shouldUpdateSharedValue =
+        previousHandlersValue.length !== newHandlersValue.length;
+
+      if (!shouldUpdateSharedValue) {
+        // if the amount is the same, we need to check if any of the configs inside has changed
+        for (let i = 0; i < newHandlersValue.length; i++) {
+          if (
+            // we can use the `gestureId` prop as it's unique for every config instance
+            newHandlersValue[i].gestureId !== previousHandlersValue[i].gestureId
+          ) {
+            shouldUpdateSharedValue = true;
+            break;
+          }
+        }
+      }
+
+      if (shouldUpdateSharedValue) {
+        preparedGesture.animatedHandlers.value = newHandlersValue;
+      }
     }
+
+    scheduleFlushOperations();
   });
 }
 
@@ -270,88 +322,90 @@ function needsToReattach(
   return false;
 }
 
-function useAnimatedGesture(
-  preparedGesture: GestureConfigReference,
-  needsRebuild: boolean
-) {
-  if (!Reanimated) {
-    return;
-  }
+function isStateChangeEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureStateChangeEvent {
+  'worklet';
+  // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
+  return event.oldState != null;
+}
 
-  function isStateChangeEvent(
-    event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
-  ): event is GestureStateChangeEvent {
-    'worklet';
-    // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
-    return event.oldState != null;
-  }
+function isTouchEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureTouchEvent {
+  'worklet';
+  return event.eventType != null;
+}
 
-  function isTouchEvent(
-    event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
-  ): event is GestureTouchEvent {
-    'worklet';
-    return event.eventType != null;
+function getHandler(
+  type: CALLBACK_TYPE,
+  gesture: HandlerCallbacks<Record<string, unknown>>
+) {
+  'worklet';
+  switch (type) {
+    case CALLBACK_TYPE.BEGAN:
+      return gesture.onBegin;
+    case CALLBACK_TYPE.START:
+      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:
+      return gesture.onFinalize;
+    case CALLBACK_TYPE.TOUCHES_DOWN:
+      return gesture.onTouchesDown;
+    case CALLBACK_TYPE.TOUCHES_MOVE:
+      return gesture.onTouchesMove;
+    case CALLBACK_TYPE.TOUCHES_UP:
+      return gesture.onTouchesUp;
+    case CALLBACK_TYPE.TOUCHES_CANCELLED:
+      return gesture.onTouchesCancelled;
   }
+}
 
-  function getHandler(
-    type: CALLBACK_TYPE,
-    gesture: HandlerCallbacks<Record<string, unknown>>
-  ) {
-    'worklet';
-    switch (type) {
-      case CALLBACK_TYPE.BEGAN:
-        return gesture.onBegin;
-      case CALLBACK_TYPE.START:
-        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:
-        return gesture.onFinalize;
-      case CALLBACK_TYPE.TOUCHES_DOWN:
-        return gesture.onTouchesDown;
-      case CALLBACK_TYPE.TOUCHES_MOVE:
-        return gesture.onTouchesMove;
-      case CALLBACK_TYPE.TOUCHES_UP:
-        return gesture.onTouchesUp;
-      case CALLBACK_TYPE.TOUCHES_CANCELLED:
-        return gesture.onTouchesCancelled;
-    }
+function touchEventTypeToCallbackType(
+  eventType: TouchEventType
+): CALLBACK_TYPE {
+  'worklet';
+  switch (eventType) {
+    case TouchEventType.TOUCHES_DOWN:
+      return CALLBACK_TYPE.TOUCHES_DOWN;
+    case TouchEventType.TOUCHES_MOVE:
+      return CALLBACK_TYPE.TOUCHES_MOVE;
+    case TouchEventType.TOUCHES_UP:
+      return CALLBACK_TYPE.TOUCHES_UP;
+    case TouchEventType.TOUCHES_CANCELLED:
+      return CALLBACK_TYPE.TOUCHES_CANCELLED;
   }
+  return CALLBACK_TYPE.UNDEFINED;
+}
 
-  function touchEventTypeToCallbackType(eventType: EventType): CALLBACK_TYPE {
-    'worklet';
-    switch (eventType) {
-      case EventType.TOUCHES_DOWN:
-        return CALLBACK_TYPE.TOUCHES_DOWN;
-      case EventType.TOUCHES_MOVE:
-        return CALLBACK_TYPE.TOUCHES_MOVE;
-      case EventType.TOUCHES_UP:
-        return CALLBACK_TYPE.TOUCHES_UP;
-      case EventType.TOUCHES_CANCELLED:
-        return CALLBACK_TYPE.TOUCHES_CANCELLED;
-    }
-    return CALLBACK_TYPE.UNDEFINED;
+function runWorklet(
+  type: CALLBACK_TYPE,
+  gesture: HandlerCallbacks<Record<string, unknown>>,
+  event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
+  ...args: any[]
+) {
+  'worklet';
+  const handler = getHandler(type, gesture);
+  if (gesture.isWorklet[type]) {
+    // @ts-ignore Logic below makes sure the correct event is send to the
+    // correct handler.
+    handler?.(event, ...args);
+  } else if (handler) {
+    console.warn(tagMessage('Animated gesture callback must be a worklet'));
   }
+}
 
-  function runWorklet(
-    type: CALLBACK_TYPE,
-    gesture: HandlerCallbacks<Record<string, unknown>>,
-    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
-    ...args: any[]
-  ) {
-    'worklet';
-    const handler = getHandler(type, gesture);
-    if (gesture.isWorklet[type]) {
-      // @ts-ignore Logic below makes sure the correct event is send to the
-      // correct handler.
-      handler?.(event, ...args);
-    } else if (handler) {
-      console.warn(tagMessage('Animated gesture callback must be a worklet'));
-    }
+function useAnimatedGesture(
+  preparedGesture: GestureConfigReference,
+  needsRebuild: boolean
+) {
+  if (!Reanimated) {
+    return;
   }
 
   // Hooks are called conditionally, but the condition is whether the
@@ -418,7 +472,7 @@ function useAnimatedGesture(
             stateControllers[i] = GestureStateManager.create(event.handlerTag);
           }
 
-          if (event.eventType !== EventType.UNDETERMINED) {
+          if (event.eventType !== TouchEventType.UNDETERMINED) {
             runWorklet(
               touchEventTypeToCallbackType(event.eventType),
               gesture,
@@ -459,15 +513,19 @@ function useAnimatedGesture(
 
 interface GestureDetectorProps {
   gesture?: ComposedGesture | GestureType;
+  children?: React.ReactNode;
 }
-export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
-  props
-) => {
+export const GestureDetector = (props: GestureDetectorProps) => {
   const gestureConfig = props.gesture;
   const gesture = gestureConfig?.toGestureArray?.() ?? [];
   const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
   const viewRef = useRef(null);
   const firstRenderRef = useRef(true);
+  const webEventHandlersRef = useRef<WebEventHandler>({
+    onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
+      onGestureHandlerEvent(e.nativeEvent);
+    },
+  });
 
   const preparedGesture = React.useRef<GestureConfigReference>({
     config: gesture,
@@ -508,6 +566,7 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
       gestureConfig,
       gesture,
       viewTag,
+      webEventHandlersRef,
     });
 
     return () => {
@@ -526,6 +585,7 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
           gestureConfig,
           gesture,
           viewTag,
+          webEventHandlersRef,
         });
       } else {
         updateHandlers(preparedGesture, gestureConfig, gesture);
@@ -543,17 +603,12 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
       if (isFabric()) {
         const node = getShadowNodeFromRef(ref);
         if (global.isFormsStackingContext(node) === false) {
-          setImmediate(() => {
-            // For some weird reason, console.error on iOS delays
-            // the execution of RNGestureHandlerModule.attachGestureHandler,
-            // so that's why we use setImmediate here.
-            console.error(
-              tagMessage(
-                'GestureDetector has received a child that may get view-flattened. ' +
-                  '\nTo prevent it from misbehaving you need to wrap the child with a `<View collapsable={false}>`.'
-              )
-            );
-          });
+          console.error(
+            tagMessage(
+              'GestureDetector has received a child that may get view-flattened. ' +
+                '\nTo prevent it from misbehaving you need to wrap the child with a `<View collapsable={false}>`.'
+            )
+          );
         }
       }
     }
@@ -572,7 +627,11 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
   }
 };
 
-class Wrap extends React.Component<{ onGestureHandlerEvent?: unknown }> {
+class Wrap extends React.Component<{
+  onGestureHandlerEvent?: unknown;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children?: React.ReactNode;
+}> {
   render() {
     // I don't think that fighting with types over such a simple function is worth it
     // The only thing it does is add 'collapsable: false' to the child component

package/src/handlers/gestures/eventReceiver.ts

@@ -1,6 +1,6 @@
 import { DeviceEventEmitter, EmitterSubscription } from 'react-native';
 import { State } from '../../State';
-import { EventType } from '../../EventType';
+import { TouchEventType } from '../../TouchEventType';
 import {
   GestureTouchEvent,
   GestureUpdateEvent,
@@ -48,7 +48,7 @@ function isTouchEvent(
   return event.eventType != null;
 }
 
-function onGestureHandlerEvent(
+export function onGestureHandlerEvent(
   event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
 ) {
   const handler = findHandler(event.handlerTag) as BaseGesture<
@@ -87,16 +87,16 @@ function onGestureHandlerEvent(
       }
     } else if (isTouchEvent(event)) {
       switch (event.eventType) {
-        case EventType.TOUCHES_DOWN:
+        case TouchEventType.TOUCHES_DOWN:
           handler.handlers?.onTouchesDown?.(event, dummyStateManager);
           break;
-        case EventType.TOUCHES_MOVE:
+        case TouchEventType.TOUCHES_MOVE:
           handler.handlers?.onTouchesMove?.(event, dummyStateManager);
           break;
-        case EventType.TOUCHES_UP:
+        case TouchEventType.TOUCHES_UP:
           handler.handlers?.onTouchesUp?.(event, dummyStateManager);
           break;
-        case EventType.TOUCHES_CANCELLED:
+        case TouchEventType.TOUCHES_CANCELLED:
           handler.handlers?.onTouchesCancelled?.(event, dummyStateManager);
           break;
       }

package/src/handlers/gestures/gesture.ts

@@ -15,6 +15,7 @@ import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
 import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
 import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
 import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
+import { isRemoteDebuggingEnabled } from '../../utils';
 
 export type GestureType =
   | BaseGesture<Record<string, unknown>>
@@ -43,6 +44,7 @@ export interface BaseGestureConfig
   manualActivation?: boolean;
   runOnJS?: boolean;
   testId?: string;
+  cancelsTouchesInView?: boolean;
 }
 
 type TouchEventHandlerType = (
@@ -51,6 +53,7 @@ type TouchEventHandlerType = (
 ) => void;
 
 export type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
+  gestureId: number;
   handlerTag: number;
   onBegin?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
   onStart?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
@@ -113,17 +116,32 @@ export abstract class Gesture {
   abstract prepare(): void;
 }
 
+let nextGestureId = 0;
 export abstract class BaseGesture<
   EventPayloadT extends Record<string, unknown>
 > extends Gesture {
+  private gestureId = -1;
   public handlerTag = -1;
   public handlerName = '';
   public config: BaseGestureConfig = {};
   public handlers: HandlerCallbacks<EventPayloadT> = {
+    gestureId: -1,
     handlerTag: -1,
     isWorklet: [],
   };
 
+  constructor() {
+    super();
+
+    // Used to check whether the gesture config has been updated when wrapping it
+    // with `useMemo`. Since every config will have a unique id, when the dependencies
+    // don't change, the config won't be recreated and the id will stay the same.
+    // If the id is different, it means that the config has changed and the gesture
+    // needs to be updated.
+    this.gestureId = nextGestureId++;
+    this.handlers.gestureId = this.gestureId;
+  }
+
   private addDependency(
     key: 'simultaneousWith' | 'requireToFail',
     gesture: Exclude<GestureRef, number>
@@ -260,6 +278,11 @@ export abstract class BaseGesture<
     return this;
   }
 
+  cancelsTouchesInView(value: boolean) {
+    this.config.cancelsTouchesInView = value;
+    return this;
+  }
+
   initialize() {
     this.handlerTag = getNextHandlerTag();
 
@@ -278,9 +301,13 @@ export abstract class BaseGesture<
   prepare() {}
 
   get shouldUseReanimated(): boolean {
-    // use Reanimated when runOnJS isn't set explicitly and all defined callbacks are worklets
+    // use Reanimated when runOnJS isn't set explicitly,
+    // and all defined callbacks are worklets,
+    // and remote debugging is disabled
     return (
-      this.config.runOnJS !== true && !this.handlers.isWorklet.includes(false)
+      this.config.runOnJS !== true &&
+      !this.handlers.isWorklet.includes(false) &&
+      !isRemoteDebuggingEnabled()
     );
   }
 }

package/src/init.ts

@@ -2,10 +2,17 @@ import { startListening } from './handlers/gestures/eventReceiver';
 import RNGestureHandlerModule from './RNGestureHandlerModule';
 import { isFabric } from './utils';
 
+let fabricInitialized = false;
+
 export function initialize() {
   startListening();
+}
 
-  if (isFabric()) {
+// since isFabric() may give wrong results before the first render, we call this
+// method during render of GestureHandlerRootView
+export function maybeInitializeFabric() {
+  if (isFabric() && !fabricInitialized) {
     RNGestureHandlerModule.install();
+    fabricInitialized = true;
   }
 }

package/src/mocks.ts

@@ -21,6 +21,7 @@ const attachGestureHandler = NOOP;
 const createGestureHandler = NOOP;
 const dropGestureHandler = NOOP;
 const updateGestureHandler = NOOP;
+const flushOperations = NOOP;
 const NativeViewGestureHandler = View;
 const TapGestureHandler = View;
 const ForceTouchGestureHandler = View;
@@ -59,6 +60,7 @@ export default {
   createGestureHandler,
   dropGestureHandler,
   updateGestureHandler,
+  flushOperations,
   // probably can be removed
   Directions,
   State,

package/src/utils.ts

@@ -1,3 +1,5 @@
+import { version as rnVersion } from 'react-native/package.json';
+
 export function toArray<T>(object: T | T[]): T[] {
   if (!Array.isArray(object)) {
     return [object];
@@ -32,6 +34,7 @@ export function hasProperty(object: object, key: string) {
 }
 
 export function isJestEnv(): boolean {
+  // @ts-ignore Do not use `@types/node` because it will prioritise Node types over RN types which breaks the types (ex. setTimeout) in React Native projects.
   return hasProperty(global, 'process') && !!process.env.JEST_WORKER_ID;
 }
 
@@ -39,7 +42,24 @@ export function tagMessage(msg: string) {
   return `[react-native-gesture-handler] ${msg}`;
 }
 
+// helper method to check whether Fabric is enabled, however global.nativeFabricUIManager
+// may not be initialized before the first render
 export function isFabric(): boolean {
   // @ts-expect-error nativeFabricUIManager is not yet included in the RN types
   return !!global?.nativeFabricUIManager;
 }
+
+export function shouldUseCodegenNativeComponent(): boolean {
+  const [majorStr, minorStr] = rnVersion.split('.');
+  const major = Number.parseInt(majorStr);
+  const minor = Number.parseInt(minorStr);
+
+  // use codegenNativeComponent starting with RN 0.68
+  return minor >= 68 || major > 0;
+}
+
+export function isRemoteDebuggingEnabled(): boolean {
+  // react-native-reanimated checks if in remote debugging in the same way
+  // @ts-ignore global is available but node types are not included
+  return !(global as any).nativeCallSyncHook || (global as any).__REMOTEDEV__;
+}

package/src/web/GestureHandler.ts

@@ -182,7 +182,13 @@ abstract class GestureHandler {
         // onHandlerStateChange only
         handlerTag: this.handlerTag,
         target: this.ref,
-        oldState: this.oldState,
+        // send oldState only when the state was changed, or is different than ACTIVE
+        // GestureDetector relies on the presence of `oldState` to differentiate between
+        // update events and state change events
+        oldState:
+          state !== this.previousState || state != 4
+            ? this.oldState
+            : undefined,
       },
       timeStamp: Date.now(),
     };