Merge branch 'next' into @mbert/fix-scrolls

Author: m-bert

…/check-relations-traversal-algorithm.yml .github/workflows/rngh-api-v3.yml.github/workflows/check-relations-traversal-algorithm.yml renamed to .github/workflows/rngh-api-v3.yml .github/workflows/check-relations-traversal-algorithm.yml renamed to .github/workflows/rngh-api-v3.yml

@@ -1,10 +1,11 @@
-name: Test relations traversal algorithm
+name: Test Gesture Handler 3 API
 
 on:
   pull_request:
     paths:
       - packages/react-native-gesture-handler/src/v3/**
       - packages/react-native-gesture-handler/src/__tests__/RelationsTraversal.test.tsx
+      - packages/react-native-gesture-handler/src/__tests__/API_V3.test.tsx
   push:
     branches:
       - main
@@ -34,4 +35,4 @@ jobs:
 
       - name: Run tests
         working-directory: packages/react-native-gesture-handler
-        run: yarn test RelationsTraversal
+        run: yarn test RelationsTraversal API_V3

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

@@ -0,0 +1,60 @@
+import { usePanGesture } from '../v3/hooks/gestures';
+import { render, renderHook } from '@testing-library/react-native';
+import { fireGestureHandler, getByGestureTestId } from '../jestUtils';
+import { State } from '../State';
+import GestureHandlerRootView from '../components/GestureHandlerRootView';
+import { RectButton } from '../v3/components';
+import { act } from 'react';
+
+describe('[API v3] Hooks', () => {
+  test('Pan gesture', () => {
+    const onBegin = jest.fn();
+    const onStart = jest.fn();
+
+    const panGesture = renderHook(() =>
+      usePanGesture({
+        disableReanimated: true,
+        onBegin: (e) => onBegin(e),
+        onActivate: (e) => onStart(e),
+      })
+    ).result.current;
+
+    fireGestureHandler(panGesture, [
+      { oldState: State.UNDETERMINED, state: State.BEGAN },
+      { oldState: State.BEGAN, state: State.ACTIVE },
+      { oldState: State.ACTIVE, state: State.ACTIVE },
+      { oldState: State.ACTIVE, state: State.END },
+    ]);
+
+    expect(onBegin).toHaveBeenCalledTimes(1);
+    expect(onStart).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('[API v3] Components', () => {
+  test('Rect Button', () => {
+    const pressFn = jest.fn();
+
+    const RectButtonExample = () => {
+      return (
+        <GestureHandlerRootView>
+          <RectButton testID="btn" onPress={pressFn} />
+        </GestureHandlerRootView>
+      );
+    };
+
+    render(<RectButtonExample />);
+
+    const nativeGesture = getByGestureTestId('btn');
+
+    act(() => {
+      fireGestureHandler(nativeGesture, [
+        { oldState: State.UNDETERMINED, state: State.BEGAN },
+        { oldState: State.BEGAN, state: State.ACTIVE },
+        { oldState: State.ACTIVE, state: State.END },
+      ]);
+    });
+
+    expect(pressFn).toHaveBeenCalledTimes(1);
+  });
+});

packages/react-native-gesture-handler/src/handlers/handlersRegistry.ts

@@ -1,12 +1,37 @@
 import { isTestEnv } from '../utils';
 import { GestureType } from './gestures/gesture';
 import { GestureEvent, HandlerStateChangeEvent } from './gestureHandlerCommon';
+import { SingleGesture } from '../v3/types';
 
 export const handlerIDToTag: Record<string, number> = {};
+
+// There were attempts to create types that merge possible HandlerData and Config,
+// but ts was not able to infer them properly in many cases, so we use any here.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const hookGestures = new Map<number, SingleGesture<any, any>>();
 const gestures = new Map<number, GestureType>();
 const oldHandlers = new Map<number, GestureHandlerCallbacks>();
 const testIDs = new Map<string, number>();
 
+export function registerGesture<THandlerData, TConfig>(
+  handlerTag: number,
+  gesture: SingleGesture<THandlerData, TConfig>
+) {
+  if (isTestEnv() && gesture.config.testID) {
+    hookGestures.set(handlerTag, gesture);
+    testIDs.set(gesture.config.testID, handlerTag);
+  }
+}
+
+export function unregisterGesture(handlerTag: number) {
+  const gesture = hookGestures.get(handlerTag);
+
+  if (gesture && isTestEnv() && gesture.config.testID) {
+    testIDs.delete(gesture.config.testID);
+    hookGestures.delete(handlerTag);
+  }
+}
+
 export function registerHandler(
   handlerTag: number,
   handler: GestureType,
@@ -40,14 +65,18 @@ export function findHandler(handlerTag: number) {
   return gestures.get(handlerTag);
 }
 
+export function findGesture(handlerTag: number) {
+  return hookGestures.get(handlerTag);
+}
+
 export function findOldGestureHandler(handlerTag: number) {
   return oldHandlers.get(handlerTag);
 }
 
 export function findHandlerByTestID(testID: string) {
   const handlerTag = testIDs.get(testID);
   if (handlerTag !== undefined) {
-    return findHandler(handlerTag) ?? null;
+    return findHandler(handlerTag) ?? findGesture(handlerTag) ?? null;
   }
   return null;
 }

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

@@ -152,20 +152,8 @@ export type {
 } from './components/Pressable';
 export { default as Pressable } from './components/Pressable';
 
-export {
-  GestureDetector,
-  InterceptingGestureDetector,
-  GestureDetectorProps,
-  VirtualGestureDetector,
-} from './v3/detectors';
-
-export * from './v3/hooks/composition';
-
-export type { ComposedGesture } from './v3/types';
 export type { GestureTouchEvent as SingleGestureTouchEvent } from './handlers/gestureHandlerCommon';
 
-export * from './v3/hooks/gestures';
-
-export * from './v3/components';
+export * from './v3';
 
 initialize();

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

@@ -60,6 +60,8 @@ import {
 } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 import { hasProperty, withPrevAndCurrent } from '../utils';
+import type { SingleGesture } from '../v3/types';
+import { maybeUnpackValue } from '../v3/hooks/utils';
 
 // Load fireEvent conditionally, so RNGH may be used in setups without testing-library
 let fireEvent = (
@@ -164,11 +166,17 @@ const handlersDefaultEvents: DefaultEventsMapping = {
 };
 
 function isGesture(
-  componentOrGesture: ReactTestInstance | GestureType
+  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
 ): componentOrGesture is GestureType {
   return componentOrGesture instanceof BaseGesture;
 }
 
+function isHookGesture(
+  componentOrGesture: ReactTestInstance | SingleGesture<any, any>
+): componentOrGesture is SingleGesture<any, any> {
+  return 'detectorCallbacks' in componentOrGesture;
+}
+
 interface WrappedGestureHandlerTestEvent {
   nativeEvent: GestureHandlerTestEvent;
 }
@@ -408,7 +416,7 @@ interface HandlerData {
   enabled: boolean | undefined;
 }
 function getHandlerData(
-  componentOrGesture: ReactTestInstance | GestureType
+  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
 ): HandlerData {
   if (isGesture(componentOrGesture)) {
     const gesture = componentOrGesture;
@@ -421,6 +429,33 @@ function getHandlerData(
       enabled: gesture.config.enabled,
     };
   }
+
+  if (isHookGesture(componentOrGesture)) {
+    return {
+      handlerType: componentOrGesture.type as HandlerNames,
+      handlerTag: componentOrGesture.tag,
+      enabled: maybeUnpackValue(componentOrGesture.config.enabled),
+      emitEvent: (eventName, args) => {
+        const { state, oldState, handlerTag, ...rest } = args.nativeEvent;
+
+        const event = {
+          state,
+          handlerTag,
+          handlerData: { ...rest },
+        };
+
+        if (eventName === 'onGestureHandlerStateChange') {
+          componentOrGesture.detectorCallbacks.onGestureHandlerStateChange({
+            oldState: oldState as State,
+            ...event,
+          });
+        } else if (eventName === 'onGestureHandlerEvent') {
+          componentOrGesture.detectorCallbacks.onGestureHandlerEvent?.(event);
+        }
+      },
+    };
+  }
+
   const gestureHandlerComponent = componentOrGesture;
   return {
     emitEvent: (eventName, args) => {
@@ -465,7 +500,7 @@ type ExtractConfig<T> =
       : Record<string, unknown>;
 
 export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
-  componentOrGesture: ReactTestInstance | GestureType,
+  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
   const { emitEvent, handlerType, handlerTag, enabled } =

packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx

@@ -20,7 +20,7 @@ import createNativeWrapper from '../createNativeWrapper';
 
 import { NativeWrapperProperties } from '../types/NativeWrapperType';
 import { NativeWrapperProps } from '../hooks/utils';
-import { DetectorType } from '../detectors';
+import { GestureDetectorType } from '../detectors';
 import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
 import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 
@@ -30,7 +30,7 @@ export const RefreshControl = createNativeWrapper(
     disallowInterruption: true,
     shouldCancelWhenOutside: false,
   },
-  DetectorType.Virtual
+  GestureDetectorType.Virtual
 );
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -42,7 +42,7 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
     disallowInterruption: true,
     shouldCancelWhenOutside: false,
   },
-  DetectorType.Intercepting
+  GestureDetectorType.Intercepting
 );
 
 export const ScrollView = (

packages/react-native-gesture-handler/src/v3/createNativeWrapper.tsx

@@ -5,13 +5,13 @@ import { useNativeGesture } from './hooks/gestures';
 import { NativeDetector } from './detectors/NativeDetector';
 import type { NativeWrapperProperties } from './types/NativeWrapperType';
 import { NativeGesture } from './hooks/gestures/native/useNativeGesture';
-import { DetectorType, InterceptingGestureDetector } from './detectors';
+import { GestureDetectorType, InterceptingGestureDetector } from './detectors';
 import { VirtualDetector } from './detectors/VirtualDetector/VirtualDetector';
 
 export default function createNativeWrapper<P>(
   Component: React.ComponentType<P>,
   config: Readonly<NativeWrapperProperties> = {},
-  detectorType: DetectorType = DetectorType.Native
+  detectorType: GestureDetectorType = GestureDetectorType.Native
 ) {
   const ComponentWrapper = (
     props: P &
@@ -57,9 +57,9 @@ export default function createNativeWrapper<P>(
     }, [native, onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER]);
 
     const DetectorComponent =
-      detectorType === DetectorType.Intercepting
+      detectorType === GestureDetectorType.Intercepting
         ? InterceptingGestureDetector
-        : detectorType === DetectorType.Virtual
+        : detectorType === GestureDetectorType.Virtual
           ? VirtualDetector
           : NativeDetector;
 

packages/react-native-gesture-handler/src/v3/detectors/common.ts

@@ -4,6 +4,12 @@ import { Animated, StyleSheet } from 'react-native';
 import HostGestureDetector from './HostGestureDetector';
 import { GestureDetectorProps as LegacyDetectorProps } from '../../handlers/gestures/GestureDetector';
 
+export enum GestureDetectorType {
+  Native,
+  Virtual,
+  Intercepting,
+}
+
 export interface NativeDetectorProps<THandlerData, TConfig> {
   children?: React.ReactNode;
   gesture: Gesture<THandlerData, TConfig>;

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

@@ -1,10 +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 enum DetectorType {
-  Native,
-  Virtual,
-  Intercepting,
-}

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

@@ -0,0 +1,2 @@
+export * from './composition';
+export * from './gestures';