Separate logic native detector

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

@@ -1,7 +1,7 @@
 import { tagMessage } from '../utils';
 import { useExclusive, useRace, useSimultaneous } from '../v3/hooks/relations';
 import { useGesture } from '../v3/hooks/useGesture';
-import { configureRelations } from '../v3/NativeDetector/utils';
+import { configureRelations } from '../v3/detectors/utils';
 import { SingleGesture, SingleGestureName } from '../v3/types';
 import { renderHook } from '@testing-library/react-native';
 

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

@@ -162,10 +162,8 @@ export type {
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
 
-export type { NativeDetectorProps } from './v3/NativeDetector/NativeDetector';
-export { NativeDetector } from './v3/NativeDetector/NativeDetector';
+export * from './v3/detectors';
 
-export { LogicDetector } from './v3/LogicDetector';
 export * from './v3/hooks/useGesture';
 export * from './v3/hooks/relations';
 

packages/react-native-gesture-handler/src/v3/NativeDetector/NativeDetector.tsx → packages/react-native-gesture-handler/src/v3/detectors/LogicDetector/DelegateDetector.tsx

@@ -1,30 +1,18 @@
 import React, { RefObject, useCallback, useRef, useState } from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import HostGestureDetector from './HostGestureDetector';
-import { tagMessage } from '../../utils';
-import {
-  LogicChildren,
-  Gesture,
-  GestureEvents,
-  GestureHandlerEvent,
-} from '../types';
+import HostGestureDetector from '../HostGestureDetector';
+import { LogicChildren, GestureEvents, GestureHandlerEvent } from '../../types';
 import { DetectorContext } from './useDetectorContext';
-import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
-import { configureRelations } from './utils';
-import { isComposedGesture } from '../hooks/utils/relationUtils';
-
-export interface NativeDetectorProps<THandlerData, TConfig> {
-  children?: React.ReactNode;
-  gesture: Gesture<THandlerData, TConfig>;
-}
-
-const AnimatedNativeDetector =
-  Animated.createAnimatedComponent(HostGestureDetector);
-
-const ReanimatedNativeDetector =
-  Reanimated?.default.createAnimatedComponent(HostGestureDetector);
+import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
+import { configureRelations, ensureNativeDetectorComponent } from '../utils';
+import { isComposedGesture } from '../../hooks/utils/relationUtils';
+import {
+  AnimatedNativeDetector,
+  NativeDetectorProps,
+  nativeDetectorStyles,
+  ReanimatedNativeDetector,
+} from '../common';
 
-export function NativeDetector<THandlerData, TConfig>({
+export function DelegateDetector<THandlerData, TConfig>({
   gesture,
   children,
 }: NativeDetectorProps<THandlerData, TConfig>) {
@@ -63,17 +51,6 @@ export function NativeDetector<THandlerData, TConfig>({
     setLogicChildren((prev) => prev.filter((c) => c.viewTag !== childTag));
   }, []);
 
-  // It might happen only with ReanimatedNativeDetector
-  if (!NativeDetectorComponent) {
-    throw new Error(
-      tagMessage(
-        'Gesture expects to run on the UI thread, but failed to create the Reanimated NativeDetector.'
-      )
-    );
-  }
-
-  configureRelations(gesture);
-
   const handleGestureEvent = (key: keyof GestureEvents<THandlerData>) => {
     return (e: GestureHandlerEvent<THandlerData>) => {
       if (gesture.gestureEvents[key]) {
@@ -125,6 +102,9 @@ export function NativeDetector<THandlerData, TConfig>({
     getHandlers('onReanimatedTouchEvent')
   );
 
+  ensureNativeDetectorComponent(NativeDetectorComponent);
+  configureRelations(gesture);
+
   return (
     <DetectorContext.Provider value={{ register, unregister }}>
       <NativeDetectorComponent
@@ -150,18 +130,10 @@ export function NativeDetector<THandlerData, TConfig>({
         onGestureHandlerReanimatedTouchEvent={reanimatedTouchEventHandler}
         moduleId={globalThis._RNGH_MODULE_ID}
         handlerTags={isComposedGesture(gesture) ? gesture.tags : [gesture.tag]}
-        style={styles.detector}
+        style={nativeDetectorStyles.detector}
         logicChildren={logicChildren}>
         {children}
       </NativeDetectorComponent>
     </DetectorContext.Provider>
   );
 }
-
-const styles = StyleSheet.create({
-  detector: {
-    display: 'contents',
-    // TODO: remove, debug info only
-    backgroundColor: 'red',
-  },
-});

packages/react-native-gesture-handler/src/v3/LogicDetector.tsx → packages/react-native-gesture-handler/src/v3/detectors/LogicDetector/LogicDetector.tsx

@@ -1,10 +1,10 @@
 import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { Wrap } from '../handlers/gestures/GestureDetector/Wrap';
+import { Wrap } from '../../../handlers/gestures/GestureDetector/Wrap';
 import { findNodeHandle, Platform } from 'react-native';
-import { useDetectorContext } from './NativeDetector/useDetectorContext';
-import { NativeDetectorProps } from './NativeDetector/NativeDetector';
-import { isComposedGesture } from './hooks/utils/relationUtils';
-import { GestureEvents } from './types';
+import { useDetectorContext } from './useDetectorContext';
+import { isComposedGesture } from '../../hooks/utils/relationUtils';
+import { GestureEvents } from '../../types';
+import { NativeDetectorProps } from '../common';
 
 export function LogicDetector<THandlerData, TConfig>(
   props: NativeDetectorProps<THandlerData, TConfig>

packages/react-native-gesture-handler/src/v3/NativeDetector/useDetectorContext.ts → packages/react-native-gesture-handler/src/v3/detectors/LogicDetector/useDetectorContext.ts

@@ -1,5 +1,5 @@
 import { createContext, RefObject, useContext } from 'react';
-import { GestureEvents, LogicChildren } from '../types';
+import { GestureEvents, LogicChildren } from '../../types';
 
 type DetectorContextType = {
   register: (
@@ -14,7 +14,9 @@ export const DetectorContext = createContext<DetectorContextType | null>(null);
 export function useDetectorContext() {
   const ctx = useContext(DetectorContext);
   if (!ctx) {
-    throw new Error('Logic detector must be a descendant of a Native Detector');
+    throw new Error(
+      'Logic detector must be a descendant of a delegate detector'
+    );
   }
   return ctx;
 }

packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import HostGestureDetector from './HostGestureDetector';
+import { configureRelations, ensureNativeDetectorComponent } from './utils';
+import { isComposedGesture } from '../hooks/utils/relationUtils';
+import {
+  AnimatedNativeDetector,
+  NativeDetectorProps,
+  nativeDetectorStyles,
+  ReanimatedNativeDetector,
+} from './common';
+
+export function NativeDetector<THandlerData, TConfig>({
+  gesture,
+  children,
+}: NativeDetectorProps<THandlerData, TConfig>) {
+  const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
+    ? AnimatedNativeDetector
+    : gesture.config.shouldUseReanimated
+      ? ReanimatedNativeDetector
+      : HostGestureDetector;
+
+  ensureNativeDetectorComponent(NativeDetectorComponent);
+  configureRelations(gesture);
+
+  return (
+    <NativeDetectorComponent
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerStateChange={
+        gesture.gestureEvents.onGestureHandlerStateChange
+      }
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerEvent={gesture.gestureEvents.onGestureHandlerEvent}
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerTouchEvent={
+        gesture.gestureEvents.onGestureHandlerTouchEvent
+      }
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedStateChange={
+        gesture.gestureEvents.onReanimatedStateChange
+      }
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedEvent={
+        gesture.gestureEvents.onReanimatedUpdateEvent
+      }
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedTouchEvent={
+        gesture.gestureEvents.onReanimatedTouchEvent
+      }
+      onGestureHandlerAnimatedEvent={
+        gesture.gestureEvents.onGestureHandlerAnimatedEvent
+      }
+      moduleId={globalThis._RNGH_MODULE_ID}
+      handlerTags={isComposedGesture(gesture) ? gesture.tags : [gesture.tag]}
+      style={nativeDetectorStyles.detector}>
+      {children}
+    </NativeDetectorComponent>
+  );
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Gesture } from '../types';
+import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
+import { Animated, StyleSheet } from 'react-native';
+import HostGestureDetector from './HostGestureDetector';
+
+export interface NativeDetectorProps<THandlerData, TConfig> {
+  children?: React.ReactNode;
+  gesture: Gesture<THandlerData, TConfig>;
+}
+
+export const AnimatedNativeDetector =
+  Animated.createAnimatedComponent(HostGestureDetector);
+
+export const ReanimatedNativeDetector =
+  Reanimated?.default.createAnimatedComponent(HostGestureDetector);
+
+export const nativeDetectorStyles = StyleSheet.create({
+  detector: {
+    display: 'contents',
+    // TODO: remove, debug info only
+    backgroundColor: 'red',
+  },
+});

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

@@ -0,0 +1,5 @@
+export type { NativeDetectorProps } from './common';
+export { NativeDetector } from './NativeDetector';
+
+export { LogicDetector } from './LogicDetector/LogicDetector';
+export { DelegateDetector } from './LogicDetector/DelegateDetector';

packages/react-native-gesture-handler/src/v3/NativeDetector/utils.ts → packages/react-native-gesture-handler/src/v3/detectors/utils.ts

@@ -5,6 +5,7 @@
 // For `simultaneousHandlers` we use Set as the order doesn't matter.
 
 import RNGestureHandlerModule from '../../RNGestureHandlerModule';
+import { tagMessage } from '../../utils';
 import {
   isComposedGesture,
   prepareRelations,
@@ -150,4 +151,16 @@ export function configureRelations<THandlerData, TConfig>(
   RNGestureHandlerModule.flushOperations();
 }
 
+export function ensureNativeDetectorComponent(
+  NativeDetectorComponent: unknown
+): asserts NativeDetectorComponent {
+  if (!NativeDetectorComponent) {
+    throw new Error(
+      tagMessage(
+        'Gesture expects to run on the UI thread, but failed to create the Reanimated NativeDetector.'
+      )
+    );
+  }
+}
+
 export const EMPTY_SET = new Set<number>();