Remove AnimatedEvent action type from NativeDetector (#3646)

## Description

We came to a conclusion that current event handling may conflict with gesture relations, such as `simultaneous` when one of the gestures is using `Animated`. This PR removes `AnimatedEvent` action type from `NativeDetector` and adds flag to `GestureHandler`, which represents if handler should send events for `Animated`.

## Status 

- ### Android ✅ 
- ### iOS ✅ 

## Test plan

Test `pan1`, `pan2` and `gesture` from the code below.

>[!NOTE]
> Since `simultaneous` relation is not yet implemented, only first pan works when `gesture` is used. On Android you can solve that ba commenting out `otherHandler.cancel()` in `makeActive` function ([this line](https://github.com/software-mansion/react-native-gesture-handler/blob/0e5d58efcb2bd0ee2bd4eefa78fd366e003eea41/packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerOrchestrator.kt#L205))

<details>
<summary>Tested on the following code:</summary>

```tsx
import * as React from 'react';
import { Animated, Button, useAnimatedValue } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const value = useAnimatedValue(0);
  const event = Animated.event(
    [{ nativeEvent: { handlerData: { translationX: value } } }],
    {
      useNativeDriver: true,
    }
  );

  const pan1 = useGesture('PanGestureHandler', {
    onUpdate: (e: any) => {
      console.log('Pan1 update:', e);
    },
  });

  const pan2 = useGesture('PanGestureHandler', {
    onUpdate: event,
    dispatchesAnimatedEvents: true,
  });

  const gesture = {
    tag: [pan1.tag, pan2.tag],
    gestureEvents: {
      onGestureHandlerStateChange: (e) => {
        pan1.gestureEvents.onGestureHandlerStateChange(e);
        pan2.gestureEvents.onGestureHandlerStateChange(e);
      },
      onGestureHandlerEvent: pan1.gestureEvents.onGestureHandlerEvent,
      onGestureHandlerAnimatedEvent:
        pan2.gestureEvents.onGestureHandlerAnimatedEvent,
      onGestureHandlerTouchEvent: (e) => {
        pan1.gestureEvents.onGestureHandlerTouchEvent(e);
        pan2.gestureEvents.onGestureHandlerTouchEvent(e);
      },
    },
    dispatchesAnimatedEvents: true, // Assuming this is always true for this example
  };

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: value }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}
```

</details>

Author: m-bert

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

@@ -62,6 +62,7 @@ open class GestureHandler {
     private set
   private val trackedPointers: Array<PointerData?> = Array(MAX_POINTERS_COUNT) { null }
   var needsPointerData = false
+  var dispatchesAnimatedEvents = false
 
   private var hitSlop: FloatArray? = null
   var eventCoalescingKey: Short = 0
@@ -859,6 +860,9 @@ open class GestureHandler {
       if (config.hasKey(KEY_NEEDS_POINTER_DATA)) {
         handler.needsPointerData = config.getBoolean(KEY_NEEDS_POINTER_DATA)
       }
+      if (config.hasKey(KEY_DISPATCHES_ANIMATED_EVENTS)) {
+        handler.dispatchesAnimatedEvents = config.getBoolean(KEY_DISPATCHES_ANIMATED_EVENTS)
+      }
       if (config.hasKey(KEY_MANUAL_ACTIVATION)) {
         handler.manualActivation = config.getBoolean(KEY_MANUAL_ACTIVATION)
       }
@@ -873,6 +877,7 @@ open class GestureHandler {
       private const val KEY_SHOULD_CANCEL_WHEN_OUTSIDE = "shouldCancelWhenOutside"
       private const val KEY_ENABLED = "enabled"
       private const val KEY_NEEDS_POINTER_DATA = "needsPointerData"
+      private const val KEY_DISPATCHES_ANIMATED_EVENTS = "dispatchesAnimatedEvents"
       private const val KEY_MANUAL_ACTIVATION = "manualActivation"
       private const val KEY_MOUSE_BUTTON = "mouseButton"
       private const val KEY_HIT_SLOP = "hitSlop"
@@ -968,7 +973,6 @@ open class GestureHandler {
     const val ACTION_TYPE_JS_FUNCTION_OLD_API = 3
     const val ACTION_TYPE_JS_FUNCTION_NEW_API = 4
     const val ACTION_TYPE_NATIVE_DETECTOR = 5
-    const val ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT = 6
     const val POINTER_TYPE_TOUCH = 0
     const val POINTER_TYPE_STYLUS = 1
     const val POINTER_TYPE_MOUSE = 2

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

@@ -60,11 +60,7 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
         registry.attachHandlerToView(
           entry.key,
           this.id,
-          if (dispatchesAnimatedEvents) {
-            GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT
-          } else {
-            GestureHandler.ACTION_TYPE_NATIVE_DETECTOR
-          },
+          GestureHandler.ACTION_TYPE_NATIVE_DETECTOR,
         )
       } else if (entry.value == GestureHandlerMutation.Detach) {
         registry.detachHandler(entry.key)

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

@@ -18,6 +18,7 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
   private var dataBuilder: GestureHandlerEventDataBuilder<*>? = null
   private var coalescingKey: Short = 0
   private var actionType: Int = GestureHandler.ACTION_TYPE_NATIVE_ANIMATED_EVENT
+  private var useAnimatedEvent = false
 
   // On the new architecture, native animated expects event names prefixed with `top` instead of `on`,
   // since we know when the native animated node is the target of the event we can use the different
@@ -37,6 +38,7 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
     this.actionType = actionType
     this.dataBuilder = dataBuilder
     this.useTopPrefixedName = useNativeAnimatedName
+    this.useAnimatedEvent = useAnimatedEvent
     coalescingKey = handler.eventCoalescingKey
   }
 
@@ -45,7 +47,7 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
     EVENTS_POOL.release(this)
   }
 
-  override fun getEventName() = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT) {
+  override fun getEventName() = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR && useTopPrefixedName) {
     NATIVE_DETECTOR_ANIMATED_EVENT_NAME
   } else if (useTopPrefixedName) {
     NATIVE_ANIMATED_EVENT_NAME
@@ -57,9 +59,7 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
 
   override fun getCoalescingKey() = coalescingKey
 
-  override fun getEventData(): WritableMap = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR ||
-    actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT
-  ) {
+  override fun getEventData(): WritableMap = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
     createNativeEventData(dataBuilder!!)
   } else {
     createEventData(dataBuilder!!)

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

@@ -79,30 +79,21 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
       }
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
         val view = handler.view
+
         if (view is RNGestureHandlerDetectorView) {
-          val event = RNGestureHandlerEvent.obtain(
-            handler,
-            handler.actionType,
-            handlerFactory.createEventBuilder(handler),
-          )
-          view.dispatchEvent(event)
-        }
-      }
-      // In case of a native detector with animated event listener, dispatch the event twice:
-      // once for the animated event, second for any JS callbacks
-      GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT -> {
-        val view = handler.view
-        if (view is RNGestureHandlerDetectorView) {
-          val animatedEvent = RNGestureHandlerEvent.obtain(
-            handler,
-            handler.actionType,
-            handlerFactory.createEventBuilder(handler),
-          )
-          view.dispatchEvent(animatedEvent)
+          if (handler.dispatchesAnimatedEvents) {
+            val animatedEvent = RNGestureHandlerEvent.obtain(
+              handler,
+              handler.actionType,
+              handlerFactory.createEventBuilder(handler),
+              true,
+            )
+            view.dispatchEvent(animatedEvent)
+          }
 
           val event = RNGestureHandlerEvent.obtain(
             handler,
-            GestureHandler.ACTION_TYPE_NATIVE_DETECTOR,
+            handler.actionType,
             handlerFactory.createEventBuilder(handler),
           )
           view.dispatchEvent(event)
@@ -164,7 +155,7 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
         sendEventForDeviceEvent(RNGestureHandlerStateChangeEvent.EVENT_NAME, data)
       }
 
-      GestureHandler.ACTION_TYPE_NATIVE_DETECTOR, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT -> {
+      GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
         val view = handler.view
         if (view is RNGestureHandlerDetectorView) {
           val event = RNGestureHandlerStateChangeEvent.obtain(
@@ -207,7 +198,7 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
         val data = RNGestureHandlerTouchEvent.createEventData(handler)
         sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
-      GestureHandler.ACTION_TYPE_NATIVE_DETECTOR, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT -> {
+      GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
         val view = handler.view
         if (view is RNGestureHandlerDetectorView) {
           val event = RNGestureHandlerTouchEvent.obtain(handler, handler.actionType)

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

@@ -50,9 +50,7 @@ class RNGestureHandlerStateChangeEvent private constructor() : Event<RNGestureHa
   // TODO: coalescing
   override fun getCoalescingKey(): Short = 0
 
-  override fun getEventData(): WritableMap = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR ||
-    actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT
-  ) {
+  override fun getEventData(): WritableMap = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
     createNativeEventData(dataBuilder!!, newState, oldState)
   } else {
     createEventData(dataBuilder!!, newState, oldState)

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

@@ -25,10 +25,7 @@ class RNGestureHandlerTouchEvent private constructor() : Event<RNGestureHandlerT
     EVENTS_POOL.release(this)
   }
 
-  override fun getEventName() = if (actionType ==
-    GestureHandler.ACTION_TYPE_NATIVE_DETECTOR ||
-    actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR_ANIMATED_EVENT
-  ) {
+  override fun getEventName() = if (actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
     NATIVE_EVENT_NAME
   } else {
     EVENT_NAME

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

@@ -40,6 +40,7 @@
 
 - (void)sendEvent:(nonnull RNGestureHandlerStateChange *)event
     withActionType:(RNGestureHandlerActionType)actionType
+       forAnimated:(BOOL)forAnimated
      forRecognizer:(UIGestureRecognizer *)recognizer;
 
 - (void)sendNativeTouchEventForGestureHandler:(RNGestureHandler *)handler withPointerType:(NSInteger)pointerType;
@@ -75,6 +76,7 @@
 @property (nonatomic) BOOL shouldCancelWhenOutside;
 @property (nonatomic) BOOL needsPointerData;
 @property (nonatomic) BOOL manualActivation;
+@property (nonatomic) BOOL dispatchesAnimatedEvents;
 
 #if RCT_NEW_ARCH_ENABLED
 - (BOOL)isViewParagraphComponent:(nullable RNGHUIView *)view;

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

@@ -146,6 +146,11 @@ - (void)configure:(NSDictionary *)config
     _needsPointerData = [RCTConvert BOOL:prop];
   }
 
+  prop = config[@"dispatchesAnimatedEvents"];
+  if (prop != nil) {
+    _dispatchesAnimatedEvents = [RCTConvert BOOL:prop];
+  }
+
   prop = config[@"manualActivation"];
   if (prop != nil) {
     self.manualActivation = [RCTConvert BOOL:prop];
@@ -287,8 +292,7 @@ - (void)handleGesture:(UIGestureRecognizer *)recognizer
   // it may happen that the gesture recognizer is reset after it's been unbound from the view,
   // it that recognizer tried to send event, the app would crash because the target of the event
   // would be nil.
-  if (view.reactTag == nil && _actionType != RNGestureHandlerActionTypeNativeDetector &&
-      _actionType != RNGestureHandlerActionTypeNativeDetectorAnimatedEvent) {
+  if (view.reactTag == nil && _actionType != RNGestureHandlerActionTypeNativeDetector) {
     return;
   }
 
@@ -303,9 +307,7 @@ - (void)handleGesture:(UIGestureRecognizer *)recognizer inState:(RNGestureHandle
   RNGestureHandlerEventExtraData *eventData = [self eventExtraData:recognizer];
 
   NSNumber *tag = [self chooseViewForInteraction:recognizer].reactTag;
-  if (tag == nil &&
-      (_actionType == RNGestureHandlerActionTypeNativeDetector ||
-       _actionType == RNGestureHandlerActionTypeNativeDetectorAnimatedEvent)) {
+  if (tag == nil && _actionType == RNGestureHandlerActionTypeNativeDetector) {
     tag = @(recognizer.view.tag);
   }
 
@@ -363,15 +365,18 @@ - (void)sendEventsInState:(RNGestureHandlerState)state
                                                          handlerTag:_tag
                                                               state:state
                                                           extraData:extraData
-                                                      forActionType:_actionType
+                                                        forAnimated:_dispatchesAnimatedEvents
                                                       coalescingKey:self->_eventCoalescingKey];
     [self sendEvent:touchEvent];
   }
 }
 
 - (void)sendEvent:(RNGestureHandlerStateChange *)event
 {
-  [self.emitter sendEvent:event withActionType:self.actionType forRecognizer:self.recognizer];
+  [self.emitter sendEvent:event
+           withActionType:self.actionType
+              forAnimated:_dispatchesAnimatedEvents
+            forRecognizer:self.recognizer];
 }
 
 - (void)sendTouchEventInState:(RNGestureHandlerState)state forViewWithTag:(NSNumber *)reactTag
@@ -388,10 +393,13 @@ - (void)sendTouchEventInState:(RNGestureHandlerState)state forViewWithTag:(NSNum
                                                     handlerTag:_tag
                                                          state:state
                                                      extraData:extraData
-                                                 forActionType:_actionType
+                                                   forAnimated:_dispatchesAnimatedEvents
                                                  coalescingKey:[_tag intValue]];
 
-    [self.emitter sendEvent:event withActionType:self.actionType forRecognizer:self.recognizer];
+    [self.emitter sendEvent:event
+             withActionType:self.actionType
+                forAnimated:_dispatchesAnimatedEvents
+              forRecognizer:self.recognizer];
   }
 }
 

packages/react-native-gesture-handler/apple/RNGestureHandlerActionType.h

@@ -8,5 +8,4 @@ typedef NS_ENUM(NSInteger, RNGestureHandlerActionType) {
   RNGestureHandlerActionTypeJSFunctionNewAPI, // JS function or Animated.event with useNativeDriver: false using new
                                               // RNGH API
   RNGestureHandlerActionTypeNativeDetector,
-  RNGestureHandlerActionTypeNativeDetectorAnimatedEvent,
 };

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

@@ -125,11 +125,9 @@ - (void)updateProps:(const Props::Shared &)propsBase oldProps:(const Props::Shar
 
     if (handlerChange.second == RNGestureHandlerMutationAttach) {
       // TODO: Attach to the child when attached gesture is a NativeGestureHandler, track children changes then
-      [handlerManager.registry
-          attachHandlerWithTag:handlerTag
-                        toView:self
-                withActionType:newProps.dispatchesAnimatedEvents ? RNGestureHandlerActionTypeNativeDetectorAnimatedEvent
-                                                                 : RNGestureHandlerActionTypeNativeDetector];
+      [handlerManager.registry attachHandlerWithTag:handlerTag
+                                             toView:self
+                                     withActionType:RNGestureHandlerActionTypeNativeDetector];
     } else if (handlerChange.second == RNGestureHandlerMutationDetach) {
       [handlerManager.registry detachHandlerWithTag:handlerTag];
     }