Replace React Native type imports in EventTypes/eventUtils with structural equivalents (#4377)

## Description

`v3/types/EventTypes.ts` and `v3/hooks/utils/eventUtils.ts` imported two
types from react-native: `NativeSyntheticEvent` (events that may arrive
wrapped) and `Animated.Value` (the leaf type of `Animated.event`
argument mappings). This PR replaces both so the two files have zero
react-native imports, with no behavior change — type annotations only.

## Test plan

- `yarn ts-check` clean; `yarn test` 105/105; `yarn lint:js` 0 errors
- New `eventTypes.test.ts` as above; no device run needed — types-only
diff with zero runtime changes

Author: m-bert

packages/react-native-gesture-handler/src/__tests__/eventTypes.test.ts

@@ -0,0 +1,53 @@
+import type { NativeSyntheticEvent } from 'react-native';
+import { Animated } from 'react-native';
+
+import {
+  isNativeAnimatedEvent,
+  maybeExtractNativeEvent,
+} from '../v3/hooks/utils/eventUtils';
+import type { AnimatedEvent, NativeEventWrapper } from '../v3/types';
+
+// Compile-time assertions (verified by `yarn ts-check`, which covers test
+// files): the structural stand-ins in EventTypes must stay supersets of the
+// real react-native types they replaced.
+type Payload = { handlerTag: number };
+
+// A real NativeSyntheticEvent is assignable to the structural wrapper.
+const syntheticEvent = {} as NativeSyntheticEvent<Payload>;
+const _wrapped: NativeEventWrapper<Payload> = syntheticEvent;
+void _wrapped;
+
+// A real Animated.Value is assignable as an argument-mapping leaf.
+const _animatedEvent: AnimatedEvent = {
+  _argMapping: [{ nativeEvent: { handlerData: { x: new Animated.Value(0) } } }],
+};
+void _animatedEvent;
+
+describe('event type structural stand-ins', () => {
+  test('isNativeAnimatedEvent detects a real Animated.event object', () => {
+    // The native-driver form is the one v3's `useAnimated` path consumes —
+    // it returns an AnimatedEvent instance carrying `_argMapping`.
+    const animatedEvent = Animated.event(
+      [{ nativeEvent: { handlerData: { x: new Animated.Value(0) } } }],
+      { useNativeDriver: true }
+    );
+
+    expect(isNativeAnimatedEvent(animatedEvent as never)).toBe(true);
+    expect(isNativeAnimatedEvent(jest.fn())).toBe(false);
+    expect(isNativeAnimatedEvent(undefined)).toBe(false);
+  });
+
+  test('maybeExtractNativeEvent unwraps wrapped events and passes plain ones through', () => {
+    const plain = {
+      handlerTag: 1,
+      state: 4,
+      handlerData: { numberOfPointers: 1, pointerType: 0 },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+
+    expect(maybeExtractNativeEvent(plain)).toBe(plain);
+    expect(maybeExtractNativeEvent({ nativeEvent: plain } as never)).toBe(
+      plain
+    );
+  });
+});

packages/react-native-gesture-handler/src/v3/hooks/utils/eventUtils.ts

@@ -1,5 +1,3 @@
-import type { NativeSyntheticEvent } from 'react-native';
-
 import type { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
 import { tagMessage } from '../../../utils';
 import type {
@@ -11,16 +9,15 @@ import type {
   GestureHandlerEventWithHandlerData,
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
+  NativeEventWrapper,
 } from '../../types';
 
 function isNativeEvent<THandlerData, TExtendedHandlerData extends THandlerData>(
   event: GestureHandlerEventWithHandlerData<THandlerData, TExtendedHandlerData>
 ): event is
-  | NativeSyntheticEvent<
-      GestureUpdateEventWithHandlerData<TExtendedHandlerData>
-    >
-  | NativeSyntheticEvent<GestureStateChangeEventWithHandlerData<THandlerData>>
-  | NativeSyntheticEvent<GestureTouchEvent> {
+  | NativeEventWrapper<GestureUpdateEventWithHandlerData<TExtendedHandlerData>>
+  | NativeEventWrapper<GestureStateChangeEventWithHandlerData<THandlerData>>
+  | NativeEventWrapper<GestureTouchEvent> {
   'worklet';
 
   return 'nativeEvent' in event;

packages/react-native-gesture-handler/src/v3/types/EventTypes.ts

@@ -1,9 +1,11 @@
-import type { Animated, NativeSyntheticEvent } from 'react-native';
+import type { BaseSyntheticEvent } from 'react';
 
 import type { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
 import type { PointerType } from '../../PointerType';
 import type { State } from '../../State';
 
+export type NativeEventWrapper<T> = BaseSyntheticEvent<T, unknown, unknown>;
+
 type EventPayload = {
   handlerTag: number;
   state: State;
@@ -46,15 +48,15 @@ export type UnpackedGestureHandlerEventWithHandlerData<
 
 export type UpdateEventWithHandlerData<THandlerData> =
   | GestureUpdateEventWithHandlerData<THandlerData>
-  | NativeSyntheticEvent<GestureUpdateEventWithHandlerData<THandlerData>>;
+  | NativeEventWrapper<GestureUpdateEventWithHandlerData<THandlerData>>;
 
 export type StateChangeEventWithHandlerData<THandlerData> =
   | GestureStateChangeEventWithHandlerData<THandlerData>
-  | NativeSyntheticEvent<GestureStateChangeEventWithHandlerData<THandlerData>>;
+  | NativeEventWrapper<GestureStateChangeEventWithHandlerData<THandlerData>>;
 
 export type TouchEvent =
   | GestureTouchEvent
-  | NativeSyntheticEvent<GestureTouchEvent>;
+  | NativeEventWrapper<GestureTouchEvent>;
 
 export type GestureEvent<THandlerData> = {
   handlerTag: number;
@@ -68,10 +70,17 @@ export type UnpackedGestureHandlerEvent<THandlerData> =
   | GestureEvent<THandlerData>
   | GestureTouchEvent;
 
+// Structural stand-in for RN's `Animated.Value` as a mapping leaf: the
+// mapping checks only walk the object structure and never call into the
+// value, so any non-mapping shape with Animated.Value's core method works.
+type AnimatedValue = {
+  setValue: (value: number) => void;
+};
+
 // This is not how Animated.event is typed in React Native. We add _argMapping in order to
 // have access to the _argMapping property to check for usage of `change*` callbacks.
 // It's also not typed as a function, which is breaking Gesture Handler type definitions.
-type AnimatedMapping = { [key: string]: AnimatedMapping } | Animated.Value;
+type AnimatedMapping = { [key: string]: AnimatedMapping } | AnimatedValue;
 
 export type AnimatedEvent = {
   _argMapping: (AnimatedMapping | null)[];

packages/react-native-gesture-handler/src/v3/types/index.ts

@@ -19,6 +19,7 @@ export type {
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
   HandlerData,
+  NativeEventWrapper,
   StateChangeEventWithHandlerData,
   TouchEvent,
   UnpackedGestureHandlerEvent,