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

Author: akwasniewski

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts

@@ -175,5 +175,8 @@ export function useWebEventHandlers() {
     onGestureHandlerStateChange: (e: ResultEvent) => {
       onGestureHandlerEvent(e.nativeEvent as GestureHandlerNativeEvent);
     },
+    onGestureHandlerTouchEvent: () => {
+      // no-op
+    },
   });
 }

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -40,7 +40,8 @@ export default abstract class GestureHandler implements IGestureHandler {
   private viewRef: number | null = null;
   private propsRef: React.RefObject<PropsRef> | null = null;
   private actionType: ActionType | null = null;
-  private dispatchesAnimatedEvents: boolean = false;
+  private forAnimated: boolean = false;
+  private forReanimated: boolean = false;
   private _handlerTag!: number;
 
   private hitSlop?: HitSlop = undefined;
@@ -97,7 +98,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.viewRef = null;
     this.actionType = null;
     this.state = State.UNDETERMINED;
-    this.dispatchesAnimatedEvents = false;
+    this.forAnimated = false;
+    this.forReanimated = false;
 
     this.delegate.detach();
   }
@@ -381,21 +383,28 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
     this.ensurePropsRef();
-    const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef =
-      this.propsRef!.current;
+    const {
+      onGestureHandlerEvent,
+      onGestureHandlerTouchEvent,
+      onGestureHandlerReanimatedTouchEvent,
+    }: PropsRef = this.propsRef!.current;
 
     const touchEvent: ResultEvent<GestureTouchEvent> | undefined =
       this.transformTouchEvent(event);
 
-    if (touchEvent) {
-      if (
-        onGestureHandlerTouchEvent &&
-        usesNativeOrLogicDetector(this.actionType)
-      ) {
-        invokeNullableMethod(onGestureHandlerTouchEvent, touchEvent);
-      } else {
-        invokeNullableMethod(onGestureHandlerEvent, touchEvent);
-      }
+    if (!touchEvent) {
+      return;
+    }
+
+    if (usesNativeOrLogicDetector(this.actionType)) {
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedTouchEvent
+          : onGestureHandlerTouchEvent,
+        touchEvent
+      );
+    } else {
+      invokeNullableMethod(onGestureHandlerEvent, touchEvent);
     }
   }
 
@@ -408,6 +417,8 @@ export default abstract class GestureHandler implements IGestureHandler {
       onGestureHandlerEvent,
       onGestureHandlerStateChange,
       onGestureHandlerAnimatedEvent,
+      onGestureHandlerReanimatedEvent,
+      onGestureHandlerReanimatedStateChange,
     }: PropsRef = this.propsRef!.current;
 
     const resultEvent: ResultEvent = !usesNativeOrLogicDetector(this.actionType)
@@ -422,18 +433,27 @@ export default abstract class GestureHandler implements IGestureHandler {
     // However, this may cause trouble in the future (but for now we don't know that)
     if (this.lastSentState !== newState) {
       this.lastSentState = newState;
-      invokeNullableMethod(onGestureHandlerStateChange, resultEvent);
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedStateChange
+          : onGestureHandlerStateChange,
+        resultEvent
+      );
     }
     if (this.state === State.ACTIVE) {
       if (!usesNativeOrLogicDetector(this.actionType)) {
         (resultEvent.nativeEvent as GestureHandlerNativeEvent).oldState =
           undefined;
       }
-      if (onGestureHandlerAnimatedEvent && this.dispatchesAnimatedEvents) {
-        invokeNullableMethod(onGestureHandlerAnimatedEvent, resultEvent);
-      }
 
-      invokeNullableMethod(onGestureHandlerEvent, resultEvent);
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedEvent
+          : this.forAnimated
+            ? onGestureHandlerAnimatedEvent
+            : onGestureHandlerEvent,
+        resultEvent
+      );
     }
   };
 
@@ -638,9 +658,22 @@ export default abstract class GestureHandler implements IGestureHandler {
       timeStamp: Date.now(),
     };
 
-    const { onGestureHandlerEvent }: PropsRef = this.propsRef!.current;
+    const {
+      onGestureHandlerEvent,
+      onGestureHandlerReanimatedTouchEvent,
+      onGestureHandlerTouchEvent,
+    }: PropsRef = this.propsRef!.current;
 
-    invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+    if (this.actionType === ActionType.NATIVE_DETECTOR) {
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedTouchEvent
+          : onGestureHandlerTouchEvent,
+        cancelEvent
+      );
+    } else {
+      invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+    }
   }
 
   private ensurePropsRef(): void {
@@ -692,7 +725,11 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
 
     if (config.dispatchesAnimatedEvents !== undefined) {
-      this.dispatchesAnimatedEvents = config.dispatchesAnimatedEvents;
+      this.forAnimated = config.dispatchesAnimatedEvents;
+    }
+
+    if (config.shouldUseReanimated !== undefined) {
+      this.forReanimated = config.shouldUseReanimated;
     }
 
     if (config.manualActivation !== undefined) {
@@ -875,7 +912,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.mouseButton = undefined;
     this.hitSlop = undefined;
     this.needsPointerData = false;
-    this.dispatchesAnimatedEvents = false;
+    this.forAnimated = false;
+    this.forReanimated = false;
     this.enableContextMenu = false;
     this._activeCursor = undefined;
     this._touchAction = undefined;
@@ -992,7 +1030,9 @@ function invokeNullableMethod(
   method:
     | ((event: ResultEvent) => void)
     | { __getHandler: () => (event: ResultEvent) => void }
-    | { __nodeConfig: { argMapping: unknown[] } },
+    | { __nodeConfig: { argMapping: unknown[] } }
+    | null
+    | undefined,
   event: ResultEvent
 ): void {
   if (!method) {

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

@@ -52,6 +52,7 @@ export interface Config extends Record<string, ConfigArgs> {
   touchAction?: TouchAction;
   manualActivation?: boolean;
   dispatchesAnimatedEvents?: false;
+  shouldUseReanimated?: boolean;
   needsPointerData?: false;
 
   activateAfterLongPress?: number;
@@ -124,9 +125,12 @@ export interface ResultEvent<T extends ResultEventType = ResultEventType>
 
 export interface PropsRef {
   onGestureHandlerEvent: (e: ResultEvent) => void;
-  onGestureHandlerAnimatedEvent?: (e: ResultEvent) => void;
   onGestureHandlerStateChange: (e: ResultEvent) => void;
-  onGestureHandlerTouchEvent?: (e: ResultEvent) => void;
+  onGestureHandlerTouchEvent: (e: ResultEvent) => void;
+  onGestureHandlerReanimatedEvent?: (e: ResultEvent) => void;
+  onGestureHandlerReanimatedStateChange?: (e: ResultEvent) => void;
+  onGestureHandlerReanimatedTouchEvent?: (e: ResultEvent) => void;
+  onGestureHandlerAnimatedEvent?: (e: ResultEvent) => void;
 }
 
 export interface AdaptedEvent {