Merge branch '@akwasniewski/native-detector-web' into @akwasniewski/native-gesture-web

Author: akwasniewski

apps/basic-example/src/NativeDetector.tsx

@@ -18,9 +18,7 @@ export default function App() {
   );
 
   const gesture = useGesture('PanGestureHandler', {
-    onGestureHandlerAnimatedEvent: event,
-    onGestureHandlerEvent: (e: any) =>
-      console.log('onGestureHandlerEvent', e.nativeEvent),
+    onUpdate: event,
   });
 
   return (

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

@@ -14,7 +14,6 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   private var handlersToAttach: List<Int>? = null
   private var attachedHandlers = listOf<Int>()
   private var moduleId: Int = -1
-  private var dispatchesAnimatedEvents: Boolean = false
 
   fun setHandlerTags(handlerTags: ReadableArray?) {
     val newHandlers = handlerTags?.toArrayList()?.map { (it as Double).toInt() } ?: emptyList()
@@ -36,10 +35,6 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     handlersToAttach = null
   }
 
-  fun setDispatchesAnimatedEvents(dispatchesAnimatedEvents: Boolean) {
-    this.dispatchesAnimatedEvents = dispatchesAnimatedEvents
-  }
-
   private fun attachHandlers(newHandlers: List<Int>) {
     val registry = RNGestureHandlerModule.registries[moduleId]
       ?: throw Exception("Tried to access a non-existent registry")

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

@@ -36,8 +36,4 @@ class RNGestureHandlerDetectorViewManager :
   override fun setModuleId(view: RNGestureHandlerDetectorView, value: Int) {
     view.setModuleId(value)
   }
-
-  override fun setDispatchesAnimatedEvents(view: RNGestureHandlerDetectorView, value: Boolean) {
-    view.setDispatchesAnimatedEvents(value)
-  }
 }

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

@@ -48,8 +48,7 @@ export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     newView: any,
     actionType: ActionType,
-    propsRef: React.RefObject<PropsRef>,
-    forAnimated: boolean
+    propsRef: React.RefObject<PropsRef>
   ) {
     if (!(newView instanceof Element || newView instanceof React.Component)) {
       shouldPreventDrop = true;
@@ -64,12 +63,7 @@ export default {
     }
 
     // @ts-ignore Types should be HTMLElement or React.Component
-    NodeManager.getHandler(handlerTag).init(
-      newView,
-      propsRef,
-      actionType,
-      forAnimated
-    );
+    NodeManager.getHandler(handlerTag).init(newView, propsRef, actionType);
   },
   detachGestureHandler(handlerTag: number) {
     if (shouldPreventDrop) {

packages/react-native-gesture-handler/src/handlers/createHandler.tsx

@@ -160,8 +160,7 @@ type AttachGestureHandlerWeb = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   newView: any,
   _actionType: ActionType,
-  propsRef: React.RefObject<unknown>,
-  forAnimated: boolean
+  propsRef: React.RefObject<unknown>
 ) => void;
 
 const UNRESOLVED_REFS_RETRY_LIMIT = 1;
@@ -350,8 +349,7 @@ export default function createHandler<
           this.handlerTag,
           newViewTag,
           ActionType.JS_FUNCTION_OLD_API, // ignored on web
-          this.propsRef,
-          false
+          this.propsRef
         );
       } else {
         registerOldGestureHandler(this.handlerTag, {

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

@@ -86,8 +86,7 @@ export function attachHandlers({
         gesture.handlerTag,
         viewTag,
         ActionType.JS_FUNCTION_OLD_API, // Ignored on web
-        webEventHandlersRef,
-        false
+        webEventHandlersRef
       );
     } else {
       RNGestureHandlerModule.attachGestureHandler(

packages/react-native-gesture-handler/src/specs/RNGestureHandlerDetectorNativeComponent.ts

@@ -49,7 +49,6 @@ export interface NativeProps extends ViewProps {
   onGestureHandlerTouchEvent?: DirectEventHandler<GestureHandlerTouchEvent>;
 
   handlerTags: Int32[];
-  dispatchesAnimatedEvents: boolean;
   moduleId: Int32;
 }
 

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx

@@ -7,13 +7,12 @@ import { Wrap } from '../handlers/gestures/GestureDetector/Wrap';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];
-  dispatchesAnimatedEvents: boolean;
   moduleId: number;
   children?: React.ReactNode;
 }
 
 const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
-  const { handlerTags, dispatchesAnimatedEvents, children } = props;
+  const { handlerTags, children } = props;
 
   const viewRef = useRef(null);
   const childRef = useRef(null);
@@ -35,36 +34,32 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     });
   }, []);
 
-  const attachHandlers = useCallback(
-    (currentHandlerTags: Set<number>) => {
-      const oldHandlerTags =
-        attachedHandlerTags.current.difference(currentHandlerTags);
-      const newHandlerTags = currentHandlerTags.difference(
-        attachedHandlerTags.current
-      );
+  const attachHandlers = useCallback((currentHandlerTags: Set<number>) => {
+    const oldHandlerTags =
+      attachedHandlerTags.current.difference(currentHandlerTags);
+    const newHandlerTags = currentHandlerTags.difference(
+      attachedHandlerTags.current
+    );
 
-      detachHandlers(oldHandlerTags);
+    detachHandlers(oldHandlerTags);
 
-      newHandlerTags.forEach((tag) => {
-        const attachTarget = shouldAttachGestureToChildView(tag)
-          ? childRef.current
-          : viewRef.current;
-        RNGestureHandlerModule.attachGestureHandler(
-          tag,
-          attachTarget,
-          ActionType.NATIVE_DETECTOR,
-          propsRef,
-          dispatchesAnimatedEvents
-        );
-      });
-      attachedHandlerTags.current = currentHandlerTags;
-    },
-    [dispatchesAnimatedEvents]
-  );
+    newHandlerTags.forEach((tag) => {
+      const attachTarget = shouldAttachGestureToChildView(tag)
+        ? childRef.current
+        : viewRef.current;
+      RNGestureHandlerModule.attachGestureHandler(
+        tag,
+        attachTarget,
+        ActionType.NATIVE_DETECTOR,
+        propsRef
+      );
+    });
+    attachedHandlerTags.current = currentHandlerTags;
+  }, []);
 
   useEffect(() => {
     attachHandlers(new Set(handlerTags));
-  }, [attachHandlers]);
+  }, [handlerTags]);
 
   useEffect(() => {
     return () => {

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

@@ -18,9 +18,10 @@ const ReanimatedNativeDetector =
   Reanimated?.default.createAnimatedComponent(HostGestureDetector);
 
 export function NativeDetector({ gesture, children }: NativeDetectorProps) {
-  const NativeDetectorComponent = gesture.dispatchesAnimatedEvents
+  const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
-    : gesture.shouldUseReanimated
+    : // TODO: Remove this cast when we properly type config
+      (gesture.config.shouldUseReanimated as boolean)
       ? ReanimatedNativeDetector
       : HostGestureDetector;
 
@@ -45,7 +46,6 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
       onGestureHandlerTouchEvent={
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
-      dispatchesAnimatedEvents={gesture.dispatchesAnimatedEvents}
       moduleId={globalThis._RNGH_MODULE_ID}
       handlerTags={[gesture.tag]}
       style={styles.detector}>

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

@@ -11,11 +11,7 @@ import {
 import { CallbackHandlers, UpdateEvent } from '../../types';
 import { tagMessage } from '../../../utils';
 
-export function useGestureHandlerEvent(
-  handlerTag: number,
-  config: any,
-  shouldUseReanimated: boolean
-) {
+export function useGestureHandlerEvent(handlerTag: number, config: any) {
   const handlers: CallbackHandlers = {
     onUpdate: config.onUpdate,
   };
@@ -73,7 +69,7 @@ export function useGestureHandlerEvent(
 
   return isAnimatedEvent(config.onUpdate)
     ? undefined
-    : shouldUseReanimated
+    : config.shouldUseReanimated
       ? reanimatedEvent
       : (event: UpdateEvent<Record<string, unknown>>) =>
           onGestureHandlerEvent(event, jsContext);