Add missing types (#3731)

## Description

While writing examples I noticed that some types would be useful. This
includes types for each gesture and their events. This PR adds those
types.

**Important**: The v3 gesture types take over the names of old v2 types,
the v2 types are getting a `Legacy` prefix. This change will have to be
added to the migration guide. Added this as a
[task](https://github.com/orgs/software-mansion/projects/31/views/1?pane=issue&itemId=132253302)
to roadmap.

## Test plan

`yarn lint-js`

Author: akwasniewski

apps/basic-example/src/NativeDetector.tsx

@@ -3,8 +3,7 @@ import { Animated, Button, useAnimatedValue } from 'react-native';
 import {
   GestureHandlerRootView,
   NativeDetector,
-  SingleGestureName,
-  useGesture,
+  usePan,
 } from 'react-native-gesture-handler';
 
 export default function App() {
@@ -18,7 +17,7 @@ export default function App() {
     }
   );
 
-  const gesture = useGesture(SingleGestureName.Pan, {
+  const gesture = usePan({
     onUpdate: event,
   });
 

apps/common-app/src/new_api/drag_n_drop/Draggable.tsx

@@ -4,8 +4,8 @@ import {
   PanGestureHandlerEventPayload,
   Gesture,
   GestureDetector,
-  PanGesture,
-  TapGesture,
+  LegacyPanGesture,
+  LegacyTapGesture,
 } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle } from 'react-native-reanimated';
 
@@ -22,8 +22,8 @@ interface DraggableProps {
   isActive: boolean;
   translation: AnimatedPostion;
   position: { x: number; y: number };
-  dragGesture: PanGesture;
-  tapEndGesture: TapGesture;
+  dragGesture: LegacyPanGesture;
+  tapEndGesture: LegacyTapGesture;
   tileSize: number;
   rowGap: number;
   columnGap: number;

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

@@ -13,8 +13,8 @@ import {
   Gesture,
   GestureDetector,
   State,
-  PanGesture,
-  TapGesture,
+  LegacyPanGesture,
+  LegacyTapGesture,
 } from '../index';
 import { useAnimatedGestureHandler } from 'react-native-reanimated';
 import { fireGestureHandler, getByGestureTestId } from '../jestUtils';
@@ -300,7 +300,7 @@ describe('Using RNGH v2 gesture API', () => {
       <RacingHandlers tapHandlers={tapHandlers} panHandlers={panHandlers} />
     );
 
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
       { state: State.BEGAN },
       { state: State.ACTIVE },
       { state: State.END },
@@ -315,7 +315,7 @@ describe('Using RNGH v2 gesture API', () => {
   test('sends events with additional data to handlers', () => {
     const panHandlers = mockedEventHandlers();
     render(<SingleHandler handlers={panHandlers} treatStartAsUpdate />);
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
       { state: State.BEGAN, translationX: 0 },
       { state: State.ACTIVE, translationX: 10 },
       { translationX: 20 },
@@ -358,7 +358,7 @@ describe('Event list validation', () => {
     const panHandlers = mockedEventHandlers();
     render(<SingleHandler handlers={panHandlers} />);
     expect(() => {
-      fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+      fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
         { oldState: State.UNDETERMINED, state: State.BEGAN, x: 0, y: 10 },
         { oldState: State.UNDETERMINED, state: State.ACTIVE, x: 1, y: 11 },
       ]);
@@ -372,7 +372,7 @@ describe('Event list validation', () => {
     (lastState) => {
       const panHandlers = mockedEventHandlers();
       render(<SingleHandler handlers={panHandlers} />);
-      fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+      fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
         { state: State.BEGAN },
         { state: State.ACTIVE },
         { state: lastState },
@@ -452,7 +452,7 @@ describe('Filling event list with defaults', () => {
   test('fills missing ACTIVE states', () => {
     const panHandlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={panHandlers} treatStartAsUpdate />);
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
       { state: State.BEGAN, x: 0, y: 10 },
       { state: State.ACTIVE, x: 1, y: 11 },
       { x: 2, y: 12 },
@@ -469,15 +469,15 @@ describe('Filling event list with defaults', () => {
   test('fills BEGIN and END events for discrete handlers', () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<TapGesture>(getByGestureTestId('tap'), [{ x: 5 }]);
+    fireGestureHandler<LegacyTapGesture>(getByGestureTestId('tap'), [{ x: 5 }]);
     expect(handlers.begin).toHaveBeenCalledTimes(1);
     expect(handlers.end).toHaveBeenCalledTimes(1);
   });
 
   test('with FAILED event, fills BEGIN event for discrete handlers', () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<TapGesture>(getByGestureTestId('tap'), [
+    fireGestureHandler<LegacyTapGesture>(getByGestureTestId('tap'), [
       { state: State.FAILED },
     ]);
     expect(handlers.begin).toHaveBeenCalledTimes(1);
@@ -488,7 +488,9 @@ describe('Filling event list with defaults', () => {
   test('uses event data from first event in filled BEGIN, ACTIVE events', () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [{ x: 120 }]);
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
+      { x: 120 },
+    ]);
     expect(handlers.begin).toHaveBeenCalledWith(
       expect.objectContaining({ x: 120 })
     );
@@ -501,7 +503,7 @@ describe('Filling event list with defaults', () => {
   test('uses event data from last event in filled END events', () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
       { x: 120, state: State.FAILED },
     ]);
     expect(handlers.begin).toHaveBeenCalledTimes(1);
@@ -515,7 +517,7 @@ describe('Filling event list with defaults', () => {
   test('uses event data filled events', () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'), [
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'), [
       { x: 5, y: 15 },
       { x: 6, y: 16 },
       { x: 7, y: 17 },
@@ -533,15 +535,15 @@ describe('Filling event list with defaults', () => {
   test("fills BEGIN and END events when they're not present, for discrete handlers", () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<TapGesture>(getByGestureTestId('tap'));
+    fireGestureHandler<LegacyTapGesture>(getByGestureTestId('tap'));
     expect(handlers.begin).toHaveBeenCalledTimes(1);
     expect(handlers.end).toHaveBeenCalledTimes(1);
   });
 
   test("fills BEGIN, ACTIVE and END events when they're not present, for continuous handlers", () => {
     const handlers = mockedEventHandlers();
     render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
-    fireGestureHandler<PanGesture>(getByGestureTestId('pan'));
+    fireGestureHandler<LegacyPanGesture>(getByGestureTestId('pan'));
     expect(handlers.begin).toHaveBeenCalledTimes(1);
     expect(handlers.active).toHaveBeenCalledTimes(1);
     expect(handlers.end).toHaveBeenCalledTimes(1);

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

@@ -54,20 +54,20 @@ export { default as createNativeWrapper } from './handlers/createNativeWrapper';
 export type { NativeViewGestureHandlerProps } from './handlers/NativeViewGestureHandler';
 export { GestureDetector } from './handlers/gestures/GestureDetector';
 export { GestureObjects as Gesture } from './handlers/gestures/gestureObjects';
-export type { TapGestureType as TapGesture } from './handlers/gestures/tapGesture';
-export type { PanGestureType as PanGesture } from './handlers/gestures/panGesture';
-export type { FlingGestureType as FlingGesture } from './handlers/gestures/flingGesture';
-export type { LongPressGestureType as LongPressGesture } from './handlers/gestures/longPressGesture';
-export type { PinchGestureType as PinchGesture } from './handlers/gestures/pinchGesture';
-export type { RotationGestureType as RotationGesture } from './handlers/gestures/rotationGesture';
-export type { ForceTouchGestureType as ForceTouchGesture } from './handlers/gestures/forceTouchGesture';
-export type { ManualGestureType as ManualGesture } from './handlers/gestures/manualGesture';
-export type { HoverGestureType as HoverGesture } from './handlers/gestures/hoverGesture';
+export type { TapGestureType as LegacyTapGesture } from './handlers/gestures/tapGesture';
+export type { PanGestureType as LegacyPanGesture } from './handlers/gestures/panGesture';
+export type { FlingGestureType as LegacyFlingGesture } from './handlers/gestures/flingGesture';
+export type { LongPressGestureType as LegacyLongPressGesture } from './handlers/gestures/longPressGesture';
+export type { PinchGestureType as LegacyPinchGesture } from './handlers/gestures/pinchGesture';
+export type { RotationGestureType as LegacyRotationGesture } from './handlers/gestures/rotationGesture';
+export type { ForceTouchGestureType as LegacyForceTouchGesture } from './handlers/gestures/forceTouchGesture';
+export type { ManualGestureType as LegacyManualGesture } from './handlers/gestures/manualGesture';
+export type { HoverGestureType as LegacyHoverGesture } from './handlers/gestures/hoverGesture';
 export type {
-  ComposedGestureType as ComposedGesture,
-  RaceGestureType as RaceGesture,
-  SimultaneousGestureType as SimultaneousGesture,
-  ExclusiveGestureType as ExclusiveGesture,
+  ComposedGestureType as LegacyComposedGesture,
+  RaceGestureType as LegacyRaceGesture,
+  SimultaneousGestureType as LegacySimultaneousGesture,
+  ExclusiveGestureType as LegacyExclusiveGesture,
 } from './handlers/gestures/gestureComposition';
 export type { GestureStateManagerType as GestureStateManager } from './handlers/gestures/gestureStateManager';
 export { NativeViewGestureHandler } from './handlers/NativeViewGestureHandler';
@@ -157,7 +157,8 @@ export { LogicDetector } from './v3/LogicDetector';
 export * from './v3/hooks/useGesture';
 export * from './v3/hooks/relations';
 
-export { SingleGestureName } from './v3/types';
+export type { ComposedGesture } from './v3/types';
+export type { GestureTouchEvent as SingleGestureTouchEvent } from './handlers/gestureHandlerCommon';
 
 export * from './v3/hooks/gestures';
 

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

@@ -1,8 +1,11 @@
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  SingleGesture,
   SingleGestureName,
   WithSharedValue,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
 import { cloneConfig } from '../../utils';
@@ -32,3 +35,12 @@ export function useFling(config: FlingGestureConfig) {
 
   return useGesture(SingleGestureName.Fling, flingConfig);
 }
+
+export type FlingGestureStateChangeEvent =
+  GestureStateChangeEvent<FlingHandlerData>;
+export type FlingGestureUpdateEvent = GestureUpdateEvent<FlingHandlerData>;
+
+export type FlingGesture = SingleGesture<
+  FlingHandlerData,
+  FlingGestureProperties
+>;

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

@@ -3,9 +3,12 @@ import { HoverEffect } from '../../../../handlers/gestures/hoverGesture';
 import {
   BaseGestureConfig,
   ExcludeInternalConfigProps,
+  SingleGesture,
   HandlerData,
   SingleGestureName,
   WithSharedValue,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
 import { cloneConfig, getChangeEventCalculator } from '../../utils';
@@ -54,3 +57,12 @@ export function useHover(config: HoverGestureConfig) {
 
   return useGesture(SingleGestureName.Hover, hoverConfig);
 }
+
+export type HoverGestureStateChangeEvent =
+  GestureStateChangeEvent<HoverHandlerData>;
+export type HoverGestureUpdateEvent = GestureUpdateEvent<HoverHandlerData>;
+
+export type HoverGesture = SingleGesture<
+  HoverHandlerData,
+  HoverGestureProperties
+>;

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

@@ -1,26 +1,140 @@
+import type {
+  FlingGestureStateChangeEvent,
+  FlingGestureUpdateEvent,
+  FlingGesture,
+} from './fling/useFling';
+import type {
+  HoverGestureStateChangeEvent,
+  HoverGestureUpdateEvent,
+  HoverGesture,
+} from './hover/useHover';
+import type {
+  LongPressGestureStateChangeEvent,
+  LongPressGestureUpdateEvent,
+  LongPressGesture,
+} from './longPress/useLongPress';
+import type {
+  ManualGestureStateChangeEvent,
+  ManualGestureUpdateEvent,
+  ManualGesture,
+} from './manual/useManual';
+import type {
+  NativeGestureStateChangeEvent,
+  NativeGestureUpdateEvent,
+  NativeGesture,
+} from './native/useNative';
+import type {
+  PanGestureStateChangeEvent,
+  PanGestureUpdateEvent,
+  PanGesture,
+} from './pan/usePan';
+import type {
+  PinchGestureStateChangeEvent,
+  PinchGestureUpdateEvent,
+  PinchGesture,
+} from './pinch/usePinch';
+import type {
+  RotationGestureStateChangeEvent,
+  RotationGestureUpdateEvent,
+  RotationGesture,
+} from './rotation/useRotation';
+import type {
+  TapGestureStateChangeEvent,
+  TapGestureUpdateEvent,
+  TapGesture,
+} from './tap/useTap';
+
 export type { TapGestureConfig } from './tap/useTap';
+export type { TapGesture, TapGestureStateChangeEvent, TapGestureUpdateEvent };
 export { useTap } from './tap/useTap';
 
 export type { FlingGestureConfig } from './fling/useFling';
+export type {
+  FlingGesture,
+  FlingGestureStateChangeEvent,
+  FlingGestureUpdateEvent,
+};
 export { useFling } from './fling/useFling';
 
 export type { LongPressGestureConfig } from './longPress/useLongPress';
+export type {
+  LongPressGesture,
+  LongPressGestureStateChangeEvent,
+  LongPressGestureUpdateEvent,
+};
 export { useLongPress } from './longPress/useLongPress';
 
 export type { PinchGestureConfig } from './pinch/usePinch';
+export type {
+  PinchGesture,
+  PinchGestureStateChangeEvent,
+  PinchGestureUpdateEvent,
+};
 export { usePinch } from './pinch/usePinch';
 
 export type { RotationGestureConfig } from './rotation/useRotation';
+export type {
+  RotationGesture,
+  RotationGestureStateChangeEvent,
+  RotationGestureUpdateEvent,
+};
 export { useRotation } from './rotation/useRotation';
 
 export type { HoverGestureConfig } from './hover/useHover';
+export type {
+  HoverGesture,
+  HoverGestureStateChangeEvent,
+  HoverGestureUpdateEvent,
+};
 export { useHover } from './hover/useHover';
 
 export type { ManualGestureConfig } from './manual/useManual';
+export type {
+  ManualGesture,
+  ManualGestureStateChangeEvent,
+  ManualGestureUpdateEvent,
+};
 export { useManual } from './manual/useManual';
 
 export type { NativeViewGestureConfig } from './native/useNative';
+export type {
+  NativeGesture,
+  NativeGestureStateChangeEvent,
+  NativeGestureUpdateEvent,
+};
 export { useNative } from './native/useNative';
 
 export type { PanGestureConfig } from './pan/usePan';
+export type { PanGesture, PanGestureStateChangeEvent, PanGestureUpdateEvent };
 export { usePan } from './pan/usePan';
+
+export type SingleGesture =
+  | TapGesture
+  | FlingGesture
+  | LongPressGesture
+  | PinchGesture
+  | RotationGesture
+  | HoverGesture
+  | ManualGesture
+  | NativeGesture
+  | PanGesture;
+
+export type SingleGestureStateChangeEvent =
+  | TapGestureStateChangeEvent
+  | FlingGestureStateChangeEvent
+  | LongPressGestureStateChangeEvent
+  | RotationGestureStateChangeEvent
+  | HoverGestureStateChangeEvent
+  | ManualGestureStateChangeEvent
+  | NativeGestureStateChangeEvent
+  | PanGestureStateChangeEvent;
+
+export type SingleGestureUpdateEvent =
+  | TapGestureUpdateEvent
+  | FlingGestureUpdateEvent
+  | LongPressGestureUpdateEvent
+  | RotationGestureUpdateEvent
+  | HoverGestureUpdateEvent
+  | ManualGestureUpdateEvent
+  | NativeGestureUpdateEvent
+  | PanGestureUpdateEvent;