diff --git a/apps/common-app/src/new_api/drag_n_drop/Draggable.tsx b/apps/common-app/src/new_api/drag_n_drop/Draggable.tsx index 81f92a4471..6159f143ad 100644 --- a/apps/common-app/src/new_api/drag_n_drop/Draggable.tsx +++ b/apps/common-app/src/new_api/drag_n_drop/Draggable.tsx @@ -4,8 +4,8 @@ import { PanGestureHandlerEventPayload, Gesture, GestureDetector, - PanGesture, - TapGesture, + PanGestureType, + TapGestureType, } 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: PanGestureType; + tapEndGesture: TapGestureType; tileSize: number; rowGap: number; columnGap: number; diff --git a/packages/react-native-gesture-handler/src/__tests__/Events.test.tsx b/packages/react-native-gesture-handler/src/__tests__/Events.test.tsx index 89568044f8..043ef574c3 100644 --- a/packages/react-native-gesture-handler/src/__tests__/Events.test.tsx +++ b/packages/react-native-gesture-handler/src/__tests__/Events.test.tsx @@ -13,8 +13,8 @@ import { Gesture, GestureDetector, State, - PanGesture, - TapGesture, + PanGestureType, + TapGestureType, } from '../index'; import { useAnimatedGestureHandler } from 'react-native-reanimated'; import { fireGestureHandler, getByGestureTestId } from '../jestUtils'; @@ -300,7 +300,7 @@ describe('Using RNGH v2 gesture API', () => { ); - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(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(); - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(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(); expect(() => { - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(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(); - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(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(); - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(getByGestureTestId('pan'), [ { state: State.BEGAN, x: 0, y: 10 }, { state: State.ACTIVE, x: 1, y: 11 }, { x: 2, y: 12 }, @@ -469,7 +469,7 @@ describe('Filling event list with defaults', () => { test('fills BEGIN and END events for discrete handlers', () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('tap'), [{ x: 5 }]); + fireGestureHandler(getByGestureTestId('tap'), [{ x: 5 }]); expect(handlers.begin).toHaveBeenCalledTimes(1); expect(handlers.end).toHaveBeenCalledTimes(1); }); @@ -477,7 +477,7 @@ describe('Filling event list with defaults', () => { test('with FAILED event, fills BEGIN event for discrete handlers', () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('tap'), [ + fireGestureHandler(getByGestureTestId('tap'), [ { state: State.FAILED }, ]); expect(handlers.begin).toHaveBeenCalledTimes(1); @@ -488,7 +488,7 @@ describe('Filling event list with defaults', () => { test('uses event data from first event in filled BEGIN, ACTIVE events', () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('pan'), [{ x: 120 }]); + fireGestureHandler(getByGestureTestId('pan'), [{ x: 120 }]); expect(handlers.begin).toHaveBeenCalledWith( expect.objectContaining({ x: 120 }) ); @@ -501,7 +501,7 @@ describe('Filling event list with defaults', () => { test('uses event data from last event in filled END events', () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(getByGestureTestId('pan'), [ { x: 120, state: State.FAILED }, ]); expect(handlers.begin).toHaveBeenCalledTimes(1); @@ -515,7 +515,7 @@ describe('Filling event list with defaults', () => { test('uses event data filled events', () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('pan'), [ + fireGestureHandler(getByGestureTestId('pan'), [ { x: 5, y: 15 }, { x: 6, y: 16 }, { x: 7, y: 17 }, @@ -533,7 +533,7 @@ describe('Filling event list with defaults', () => { test("fills BEGIN and END events when they're not present, for discrete handlers", () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('tap')); + fireGestureHandler(getByGestureTestId('tap')); expect(handlers.begin).toHaveBeenCalledTimes(1); expect(handlers.end).toHaveBeenCalledTimes(1); }); @@ -541,7 +541,7 @@ describe('Filling event list with defaults', () => { test("fills BEGIN, ACTIVE and END events when they're not present, for continuous handlers", () => { const handlers = mockedEventHandlers(); render(); - fireGestureHandler(getByGestureTestId('pan')); + fireGestureHandler(getByGestureTestId('pan')); expect(handlers.begin).toHaveBeenCalledTimes(1); expect(handlers.active).toHaveBeenCalledTimes(1); expect(handlers.end).toHaveBeenCalledTimes(1); diff --git a/packages/react-native-gesture-handler/src/index.ts b/packages/react-native-gesture-handler/src/index.ts index 8c9d8b0ef3..e24c7372bd 100644 --- a/packages/react-native-gesture-handler/src/index.ts +++ b/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 } from './handlers/gestures/tapGesture'; +export type { PanGestureType } from './handlers/gestures/panGesture'; +export type { FlingGestureType } from './handlers/gestures/flingGesture'; +export type { LongPressGestureType } from './handlers/gestures/longPressGesture'; +export type { PinchGestureType } from './handlers/gestures/pinchGesture'; +export type { RotationGestureType } from './handlers/gestures/rotationGesture'; +export type { ForceTouchGestureType } from './handlers/gestures/forceTouchGesture'; +export type { ManualGestureType } from './handlers/gestures/manualGesture'; +export type { HoverGestureType } from './handlers/gestures/hoverGesture'; export type { - ComposedGestureType as ComposedGesture, - RaceGestureType as RaceGesture, - SimultaneousGestureType as SimultaneousGesture, - ExclusiveGestureType as ExclusiveGesture, + ComposedGestureType, + RaceGestureType, + SimultaneousGestureType, + ExclusiveGestureType, } from './handlers/gestures/gestureComposition'; export type { GestureStateManagerType as GestureStateManager } from './handlers/gestures/gestureStateManager'; export { NativeViewGestureHandler } from './handlers/NativeViewGestureHandler'; @@ -170,6 +170,7 @@ export * from './v3/hooks/useGesture'; export * from './v3/hooks/relations'; export { SingleGestureName } from './v3/types'; +export type { ComposedGesture } from './v3/types'; export * from './v3/hooks/gestures'; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/index.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/index.ts index 64e175e259..c81eb55e7a 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/index.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/index.ts @@ -1,26 +1,67 @@ +import type { FlingGestureEvent, FlingGesture } from './useFling'; +import type { HoverGestureEvent, HoverGesture } from './useHover'; +import type { LongPressGestureEvent, LongPressGesture } from './useLongPress'; +import type { ManualGestureEvent, ManualGesture } from './useManual'; +import type { NativeGestureEvent, NativeGesture } from './useNative'; +import type { PanGestureEvent, PanGesture } from './usePan'; +import type { PinchGestureEvent, PinchGesture } from './usePinch'; +import type { RotationGestureEvent, RotationGesture } from './useRotation'; +import type { TapGestureEvent, TapGesture } from './useTap'; + export type { TapGestureConfig } from './useTap'; +export type { TapGesture, TapGestureEvent }; export { useTap } from './useTap'; export type { FlingGestureConfig } from './useFling'; +export type { FlingGesture, FlingGestureEvent }; export { useFling } from './useFling'; export type { LongPressGestureConfig } from './useLongPress'; +export type { LongPressGesture, LongPressGestureEvent }; export { useLongPress } from './useLongPress'; export type { PinchGestureConfig } from './usePinch'; +export type { PinchGesture, PinchGestureEvent }; export { usePinch } from './usePinch'; export type { RotationGestureConfig } from './useRotation'; +export type { RotationGesture, RotationGestureEvent }; export { useRotation } from './useRotation'; export type { HoverGestureConfig } from './useHover'; +export type { HoverGesture, HoverGestureEvent }; export { useHover } from './useHover'; export type { ManualGestureConfig } from './useManual'; +export type { ManualGesture, ManualGestureEvent }; export { useManual } from './useManual'; export type { NativeViewGestureConfig } from './useNative'; +export type { NativeGesture, NativeGestureEvent }; export { useNative } from './useNative'; export type { PanGestureConfig } from './usePan'; +export type { PanGesture, PanGestureEvent }; export { usePan } from './usePan'; + +export type SingleGesture = + | TapGesture + | FlingGesture + | LongPressGesture + | PinchGesture + | RotationGesture + | HoverGesture + | ManualGesture + | NativeGesture + | PanGesture; + +export type SingleGestureEvent = + | TapGestureEvent + | FlingGestureEvent + | LongPressGestureEvent + | PinchGestureEvent + | RotationGestureEvent + | HoverGestureEvent + | ManualGestureEvent + | NativeGestureEvent + | PanGestureEvent; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useFling.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useFling.ts index fd37f4b8ad..d07d7e308b 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useFling.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useFling.ts @@ -1,8 +1,11 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, SingleGestureName, WithSharedValue, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { cloneConfig } from '../utils'; @@ -52,3 +55,12 @@ export function useFling(config: FlingGestureConfig) { return useGesture(SingleGestureName.Fling, flingConfig); } + +export type FlingGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type FlingGesture = SingleGesture< + FlingHandlerData, + FlingGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useHover.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useHover.ts index e057732cc2..11f064c20d 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useHover.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/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'; @@ -64,3 +67,12 @@ export function useHover(config: HoverGestureConfig) { return useGesture(SingleGestureName.Hover, hoverConfig); } + +export type HoverGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type HoverGesture = SingleGesture< + HoverHandlerData, + HoverGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useLongPress.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useLongPress.ts index a054d5e8fb..e31adaf9f9 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useLongPress.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useLongPress.ts @@ -1,8 +1,11 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, SingleGestureName, WithSharedValue, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { cloneConfig, remapProps } from '../utils'; @@ -79,3 +82,12 @@ export function useLongPress(config: LongPressGestureConfig) { longPressConfig ); } + +export type LongPressGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type LongPressGesture = SingleGesture< + LongPressHandlerData, + LongPressGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useManual.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useManual.ts index 5d32f85e71..897906baaf 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useManual.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useManual.ts @@ -1,8 +1,12 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, SingleGestureName, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; + import { useGesture } from '../useGesture'; import { cloneConfig } from '../utils'; @@ -24,3 +28,12 @@ export function useManual(config: ManualGestureConfig) { return useGesture(SingleGestureName.Manual, manualConfig); } + +export type ManualGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type ManualGesture = SingleGesture< + ManualHandlerData, + ManualGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useNative.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useNative.ts index 4a2eceb34d..614cfd1db2 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useNative.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useNative.ts @@ -1,8 +1,11 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, SingleGestureName, WithSharedValue, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { cloneConfig } from '../utils'; @@ -43,3 +46,12 @@ export function useNative(config: NativeViewGestureConfig) { return useGesture(SingleGestureName.Native, nativeConfig); } + +export type NativeGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type NativeGesture = SingleGesture< + NativeViewHandlerData, + NativeViewGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePan.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePan.ts index a3bbad0987..3034a8cd8c 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePan.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePan.ts @@ -2,9 +2,12 @@ import { StylusData } from '../../../handlers/gestureHandlerCommon'; import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, HandlerData, SingleGestureName, WithSharedValue, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { @@ -262,3 +265,9 @@ export function usePan(config: PanGestureConfig) { panConfig ); } + +export type PanGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type PanGesture = SingleGesture; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePinch.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePinch.ts index 1d654f7496..eff76a736d 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePinch.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/usePinch.ts @@ -1,8 +1,11 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, HandlerData, SingleGestureName, + GestureUpdateEvent, + GestureStateChangeEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { cloneConfig, getChangeEventCalculator } from '../utils'; @@ -44,3 +47,12 @@ export function usePinch(config: PinchGestureConfig) { return useGesture(SingleGestureName.Pinch, pinchConfig); } + +export type PinchGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type PinchGesture = SingleGesture< + PinchHandlerData, + PinchGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useRotation.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useRotation.ts index 6d43ea0f3b..1fb81060fe 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useRotation.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useRotation.ts @@ -1,8 +1,11 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, HandlerData, SingleGestureName, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { cloneConfig, getChangeEventCalculator } from '../utils'; @@ -48,3 +51,12 @@ export function useRotation(config: RotationGestureConfig) { return useGesture(SingleGestureName.Rotation, rotationConfig); } + +export type RotationGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type RotationGesture = SingleGesture< + RotationHandlerData, + RotationGestureProperties +>; diff --git a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useTap.ts b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useTap.ts index 6bebbccf95..edf2a866e6 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/gestures/useTap.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/gestures/useTap.ts @@ -1,8 +1,11 @@ import { BaseGestureConfig, ExcludeInternalConfigProps, + SingleGesture, SingleGestureName, WithSharedValue, + GestureStateChangeEvent, + GestureUpdateEvent, } from '../../types'; import { useGesture } from '../useGesture'; import { cloneConfig, remapProps } from '../utils'; @@ -108,3 +111,9 @@ export function useTap(config: TapGestureConfig) { tapConfig ); } + +export type TapGestureEvent = + | GestureStateChangeEvent + | GestureUpdateEvent; + +export type TapGesture = SingleGesture;