Merge branch 'next' into @akwasniewski/logic-detector

Author: akwasniewski

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt

@@ -98,6 +98,11 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?) :
     val factory = RNGestureHandlerFactoryUtil.findFactoryForHandler<GestureHandler>(handler) ?: return
 
     factory.setConfig(handler, config)
+
+    if (handler.actionType != GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      interactionManager.dropRelationsForHandlerWithTag(handlerTag)
+      interactionManager.configureInteractions(handler, config)
+    }
   }
 
   @ReactMethod

packages/react-native-gesture-handler/apple/RNGestureHandler.mm

@@ -182,6 +182,10 @@ - (void)updateConfig:(NSDictionary *)config
       RCTLogError(@"Cannot have all of top, bottom and height defined");
     }
   }
+
+  if (_actionType != RNGestureHandlerActionTypeNativeDetector) {
+    [self updateRelations:config];
+  }
 }
 
 - (void)updateRelations:(NSDictionary *)relations

packages/react-native-gesture-handler/src/RNGestureHandlerModule.web.ts

@@ -6,6 +6,7 @@ import type { Config, PropsRef } from './web/interfaces';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
+import { GestureRelations } from './v3/types';
 
 // init method is called inside attachGestureHandler function. However, this function may
 // fail when received view is not valid HTML element. On the other hand, dropGestureHandler
@@ -37,10 +38,6 @@ export default {
       handlerTag,
       new GestureClass(new GestureHandlerWebDelegate())
     );
-    InteractionManager.instance.configureInteractions(
-      NodeManager.getHandler(handlerTag),
-      config as unknown as Config
-    );
     this.setGestureHandlerConfig(handlerTag, config as unknown as Config);
   },
   attachGestureHandler(
@@ -75,11 +72,6 @@ export default {
   },
   setGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).setGestureConfig(newConfig);
-
-    InteractionManager.instance.configureInteractions(
-      NodeManager.getHandler(handlerTag),
-      newConfig
-    );
   },
   updateGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
@@ -95,6 +87,12 @@ export default {
 
     NodeManager.dropGestureHandler(handlerTag);
   },
+  configureRelations(handlerTag: number, relations: GestureRelations) {
+    InteractionManager.instance.configureInteractions(
+      NodeManager.getHandler(handlerTag),
+      relations
+    );
+  },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   flushOperations() {},
 };

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

@@ -171,4 +171,6 @@ export * from './v3/hooks/relations';
 
 export { SingleGestureName } from './v3/types';
 
+export * from './v3/hooks/gestures';
+
 initialize();

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

@@ -1,11 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 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';
 
-export const LogicDetector = (props: NativeDetectorProps) => {
+export function LogicDetector<THandlerData, TConfig>(
+  props: NativeDetectorProps<THandlerData, TConfig>
+) {
   const { register, unregister } = useDetectorContext();
   const viewRef = useRef(null);
   const [viewTag, setViewTag] = useState<number>(-1);
@@ -60,12 +63,12 @@ export const LogicDetector = (props: NativeDetectorProps) => {
               : [props.gesture.tag],
           };
 
-    register(logicProps, logicMethods);
+    register(logicProps, logicMethods as RefObject<GestureEvents<unknown>>);
 
     return () => {
       unregister(viewTag);
     };
   }, [viewTag, props.gesture, register, unregister]);
 
   return <Wrap ref={handleRef}>{props.children}</Wrap>;
-};
+}

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

@@ -13,9 +13,9 @@ import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
 import { configureRelations } from './utils';
 import { isComposedGesture } from '../hooks/utils/relationUtils';
 
-export interface NativeDetectorProps {
+export interface NativeDetectorProps<THandlerData, TConfig> {
   children?: React.ReactNode;
-  gesture: Gesture;
+  gesture: Gesture<THandlerData, TConfig>;
 }
 
 const AnimatedNativeDetector =
@@ -24,7 +24,10 @@ const AnimatedNativeDetector =
 const ReanimatedNativeDetector =
   Reanimated?.default.createAnimatedComponent(HostGestureDetector);
 
-export function NativeDetector({ gesture, children }: NativeDetectorProps) {
+export function NativeDetector<THandlerData, TConfig>({
+  gesture,
+  children,
+}: NativeDetectorProps<THandlerData, TConfig>) {
   const [logicChildren, setLogicChildren] = useState<LogicChildren[]>([]);
   const logicMethods = useRef<Map<number, RefObject<GestureEvents<unknown>>>>(
     new Map()
@@ -71,8 +74,8 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
 
   configureRelations(gesture);
 
-  const handleGestureEvent = (key: keyof GestureEvents<unknown>) => {
-    return (e: GestureHandlerEvent<unknown>) => {
+  const handleGestureEvent = (key: keyof GestureEvents<THandlerData>) => {
+    return (e: GestureHandlerEvent<THandlerData>) => {
       if (gesture.gestureEvents[key]) {
         gesture.gestureEvents[key](e);
       }
@@ -88,7 +91,7 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
 
   const getHandlers = useCallback(
     (key: keyof GestureEvents<unknown>) => {
-      const handlers: ((e: GestureHandlerEvent<unknown>) => void)[] = [];
+      const handlers: ((e: GestureHandlerEvent<THandlerData>) => void)[] = [];
 
       if (gesture.gestureEvents[key]) {
         handlers.push(
@@ -101,7 +104,9 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
       logicMethods.current.forEach((ref) => {
         const handler = ref.current?.[key];
         if (handler) {
-          handlers.push(handler as (e: GestureHandlerEvent<unknown>) => void);
+          handlers.push(
+            handler as (e: GestureHandlerEvent<THandlerData>) => void
+          );
         }
       });
 

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

@@ -126,7 +126,9 @@ export const traverseAndConfigureRelations = (
   });
 };
 
-export function configureRelations(gesture: Gesture) {
+export function configureRelations<THandlerData, TConfig>(
+  gesture: Gesture<THandlerData, TConfig>
+) {
   if (isComposedGesture(gesture)) {
     const simultaneousHandlers = new Set<number>(
       gesture.externalSimultaneousHandlers

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

@@ -0,0 +1,26 @@
+export type { TapGestureConfig } from './useTap';
+export { useTap } from './useTap';
+
+export type { FlingGestureConfig } from './useFling';
+export { useFling } from './useFling';
+
+export type { LongPressGestureConfig } from './useLongPress';
+export { useLongPress } from './useLongPress';
+
+export type { PinchGestureConfig } from './usePinch';
+export { usePinch } from './usePinch';
+
+export type { RotationGestureConfig } from './useRotation';
+export { useRotation } from './useRotation';
+
+export type { HoverGestureConfig } from './useHover';
+export { useHover } from './useHover';
+
+export type { ManualGestureConfig } from './useManual';
+export { useManual } from './useManual';
+
+export type { NativeViewGestureConfig } from './useNative';
+export { useNative } from './useNative';
+
+export type { PanGestureConfig } from './usePan';
+export { usePan } from './usePan';

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

@@ -0,0 +1,53 @@
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type FlingGestureProperties = {
+  /**
+   * Expressed allowed direction of movement. It's possible to pass one or many
+   * directions in one parameter:
+   *
+   * ```js
+   * direction={Directions.RIGHT | Directions.LEFT}
+   * ```
+   *
+   * or
+   *
+   * ```js
+   * direction={Directions.DOWN}
+   * ```
+   */
+  direction?: number;
+
+  /**
+   * Determine exact number of points required to handle the fling gesture.
+   */
+  numberOfPointers?: number;
+};
+
+type FlingHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+type FlingGestureInternalConfig = BaseGestureConfig<
+  FlingHandlerData,
+  FlingGestureProperties
+>;
+
+export type FlingGestureConfig =
+  ExcludeInternalConfigProps<FlingGestureInternalConfig>;
+
+export function useFling(config: FlingGestureConfig) {
+  const flingConfig = cloneConfig<FlingHandlerData, FlingGestureProperties>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Fling, flingConfig);
+}

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

@@ -0,0 +1,46 @@
+import { StylusData } from '../../../handlers/gestureHandlerCommon';
+import { HoverEffect } from '../../../handlers/gestures/hoverGesture';
+import {
+  BaseGestureConfig,
+  ExcludeInternalConfigProps,
+  SingleGestureName,
+} from '../../types';
+import { useGesture } from '../useGesture';
+import { cloneConfig } from '../utils';
+
+type HoverGestureProperties = {
+  /**
+   * Visual effect applied to the view while the view is hovered. The possible values are:
+   *
+   * - `HoverEffect.None`
+   * - `HoverEffect.Lift`
+   * - `HoverEffect.Highlight`
+   *
+   * Defaults to `HoverEffect.None`
+   */
+  hoverEffect?: HoverEffect;
+};
+
+type HoverHandlerData = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  stylusData: StylusData;
+};
+
+type HoverGestureInternalConfig = BaseGestureConfig<
+  HoverHandlerData,
+  HoverGestureProperties
+>;
+
+export type HoverGestureConfig =
+  ExcludeInternalConfigProps<HoverGestureInternalConfig>;
+
+export function useHover(config: HoverGestureConfig) {
+  const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
+    config
+  );
+
+  return useGesture(SingleGestureName.Hover, hoverConfig);
+}