Adapt NativeViewGestureHandler to NativeDetector (#3638)

## Description

This PR brings support for `NativeViewGestureHandler` into `NativeDetector`. It does so, by attaching handler into child instead of detector view. 

## Status

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

## Test plan

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

```jsx
import * as React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const items = Array.from({ length: 30 }, (_, index) => `Item ${index + 1}`);

  const gesture = useGesture('NativeViewGestureHandler', {
    onBegin: (e) => {
      console.log('onBegin', e);
    },
    onStart: (e) => {
      console.log('onStart', e);
    },
    onEnd: (e) => {
      console.log('onEnd', e);
    },
    onFinalize: (e) => {
      console.log('onFinalize', e);
    },
    onTouchesDown: (e) => {
      console.log('onTouchesDown', e);
    },
    onTouchesMove: (e) => {
      console.log('onTouchesMove', e);
    },
    onTouchesCancelled: (e) => {
      console.log('onTouchesCancelled', e);
    },
    onTouchesUp: (e) => {
      console.log('onTouchesUp', e);
    },
    onUpdate: (e) => {
      console.log('onUpdate', e);
    },
    onChange: (e) => {
      console.log('onChange', e);
    },
    onCancel: (e) => {
      console.log('onCancel', e);
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <NativeDetector gesture={gesture}>
        <ScrollView style={styles.scrollView}>
          {items.map((item, index) => (
            <View key={index} style={styles.item}>
              <Text style={styles.text}>{item}</Text>
            </View>
          ))}
        </ScrollView>
      </NativeDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'lightgrey',
    marginHorizontal: 20,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    margin: 2,
    backgroundColor: 'white',
    borderRadius: 10,
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
});
```

</details>

Author: m-bert

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

@@ -18,6 +18,7 @@ import com.facebook.react.bridge.WritableArray
 import com.facebook.react.uimanager.PixelUtil
 import com.swmansion.gesturehandler.BuildConfig
 import com.swmansion.gesturehandler.RNSVGHitTester
+import com.swmansion.gesturehandler.react.RNGestureHandlerDetectorView
 import com.swmansion.gesturehandler.react.RNGestureHandlerTouchEvent
 import com.swmansion.gesturehandler.react.eventbuilders.GestureHandlerEventDataBuilder
 import java.lang.IllegalStateException
@@ -30,6 +31,22 @@ open class GestureHandler {
   var tag = 0
   var view: View? = null
     private set
+  val viewForEvents: RNGestureHandlerDetectorView
+    get() {
+      assert(actionType == ACTION_TYPE_NATIVE_DETECTOR) {
+        "[react-native-gesture-handler] `viewForEvents` can only be used with NativeDetector."
+      }
+
+      val detector = if (this is NativeViewGestureHandler) this.view?.parent else view
+
+      if (detector !is RNGestureHandlerDetectorView) {
+        throw Error(
+          "[react-native-gesture-handler] Expected RNGestureHandlerDetectorView to be the target for the event.",
+        )
+      }
+
+      return detector
+    }
   var state = STATE_UNDETERMINED
     private set
   var x = 0f
@@ -823,6 +840,8 @@ open class GestureHandler {
     }
   }
 
+  open fun wantsToAttachDirectlyToView() = false
+
   override fun toString(): String {
     val viewString = if (view == null) null else view!!.javaClass.simpleName
     return this.javaClass.simpleName + "@[" + tag + "]:" + viewString

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

@@ -167,6 +167,8 @@ class NativeViewGestureHandler : GestureHandler() {
     this.hook = defaultHook
   }
 
+  override fun wantsToAttachDirectlyToView() = true
+
   class Factory : GestureHandler.Factory<NativeViewGestureHandler>() {
     override val type = NativeViewGestureHandler::class.java
     override val name = "NativeViewGestureHandler"

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

@@ -1,6 +1,7 @@
 package com.swmansion.gesturehandler.react
 
 import android.content.Context
+import android.view.View
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
@@ -12,7 +13,8 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   private val reactContext: ThemedReactContext
     get() = context as ThemedReactContext
   private var handlersToAttach: List<Int>? = null
-  private var attachedHandlers = listOf<Int>()
+  private var nativeHandlersToAttach: MutableSet<Int> = mutableSetOf()
+  private var attachedHandlers: MutableSet<Int> = mutableSetOf()
   private var moduleId: Int = -1
 
   fun setHandlerTags(handlerTags: ReadableArray?) {
@@ -35,6 +37,26 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     handlersToAttach = null
   }
 
+  private fun shouldAttachGestureToChildView(tag: Int): Boolean {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    return registry.getHandler(tag)?.wantsToAttachDirectlyToView() ?: false
+  }
+
+  // We override this `addView` because it is called inside `addView(child: View?, index: Int)`
+  override fun addView(child: View, index: Int, params: LayoutParams?) {
+    super.addView(child, index, params)
+
+    tryAttachHandlerToChildView(child.id)
+  }
+
+  override fun removeViewAt(index: Int) {
+    detachNativeGestureHandlers()
+
+    super.removeViewAt(index)
+  }
+
   private fun attachHandlers(newHandlers: List<Int>) {
     val registry = RNGestureHandlerModule.registries[moduleId]
       ?: throw Exception("Tried to access a non-existent registry")
@@ -50,15 +72,53 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     }
 
     for (entry in changes) {
+      val tag = entry.key
+
       if (entry.value == GestureHandlerMutation.Attach) {
-        // TODO: Attach to the child when attached gesture is a NativeGestureHandler, track children changes then
-        registry.attachHandlerToView(
-          entry.key,
-          this.id,
-          GestureHandler.ACTION_TYPE_NATIVE_DETECTOR,
-        )
+        // It might happen that `attachHandlers` will be called before children are added into view hierarchy. In that case we cannot
+        // attach `NativeViewGestureHandlers` here and we have to do it in `addView` method.
+        if (shouldAttachGestureToChildView(tag)) {
+          nativeHandlersToAttach.add(tag)
+        } else {
+          registry.attachHandlerToView(tag, this.id, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR)
+
+          attachedHandlers.add(tag)
+        }
       } else if (entry.value == GestureHandlerMutation.Detach) {
-        registry.detachHandler(entry.key)
+        registry.detachHandler(tag)
+        attachedHandlers.remove(tag)
+      }
+    }
+
+    // This covers the case where `NativeViewGestureHandlers` are attached after child views were created.
+    val child = getChildAt(0)
+
+    if (child != null) {
+      tryAttachHandlerToChildView(child.id)
+    }
+  }
+
+  private fun tryAttachHandlerToChildView(childId: Int) {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    for (tag in nativeHandlersToAttach) {
+      registry.attachHandlerToView(tag, childId, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR)
+
+      attachedHandlers.add(tag)
+    }
+
+    nativeHandlersToAttach.clear()
+  }
+
+  private fun detachNativeGestureHandlers() {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    for (tag in attachedHandlers) {
+      if (shouldAttachGestureToChildView(tag)) {
+        registry.detachHandler(tag)
+        attachedHandlers.remove(tag)
       }
     }
   }

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

@@ -33,8 +33,14 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
     dataBuilder: GestureHandlerEventDataBuilder<T>,
     useNativeAnimatedName: Boolean,
   ) {
-    val view = handler.view!!
+    val view = if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      handler.viewForEvents!!
+    } else {
+      handler.view!!
+    }
+
     super.init(UIManagerHelper.getSurfaceId(view), view.id)
+
     this.actionType = actionType
     this.dataBuilder = dataBuilder
     this.useTopPrefixedName = useNativeAnimatedName

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

@@ -78,26 +78,23 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
         sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
-        val view = handler.view
-
-        if (view is RNGestureHandlerDetectorView) {
-          if (handler.dispatchesAnimatedEvents) {
-            val animatedEvent = RNGestureHandlerEvent.obtain(
-              handler,
-              handler.actionType,
-              handlerFactory.createEventBuilder(handler),
-              true,
-            )
-            view.dispatchEvent(animatedEvent)
-          }
-
-          val event = RNGestureHandlerEvent.obtain(
+        if (handler.dispatchesAnimatedEvents) {
+          val animatedEvent = RNGestureHandlerEvent.obtain(
             handler,
             handler.actionType,
             handlerFactory.createEventBuilder(handler),
+            true,
           )
-          view.dispatchEvent(event)
+          handler.viewForEvents!!.dispatchEvent(animatedEvent)
         }
+
+        val event = RNGestureHandlerEvent.obtain(
+          handler,
+          handler.actionType,
+          handlerFactory.createEventBuilder(handler),
+        )
+
+        handler.viewForEvents!!.dispatchEvent(event)
       }
     }
   }
@@ -156,17 +153,15 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
       }
 
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
-        val view = handler.view
-        if (view is RNGestureHandlerDetectorView) {
-          val event = RNGestureHandlerStateChangeEvent.obtain(
-            handler,
-            newState,
-            oldState,
-            handler.actionType,
-            handlerFactory.createEventBuilder(handler),
-          )
-          view.dispatchEvent(event)
-        }
+        val event = RNGestureHandlerStateChangeEvent.obtain(
+          handler,
+          newState,
+          oldState,
+          handler.actionType,
+          handlerFactory.createEventBuilder(handler),
+        )
+
+        handler.viewForEvents!!.dispatchEvent(event)
       }
     }
   }
@@ -199,11 +194,9 @@ class RNGestureHandlerEventDispatcher(private val reactApplicationContext: React
         sendEventForDeviceEvent(RNGestureHandlerEvent.EVENT_NAME, data)
       }
       GestureHandler.ACTION_TYPE_NATIVE_DETECTOR -> {
-        val view = handler.view
-        if (view is RNGestureHandlerDetectorView) {
-          val event = RNGestureHandlerTouchEvent.obtain(handler, handler.actionType)
-          view.dispatchEvent(event)
-        }
+        val event = RNGestureHandlerTouchEvent.obtain(handler, handler.actionType)
+
+        handler.viewForEvents!!.dispatchEvent(event)
       }
     }
   }

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

@@ -27,8 +27,14 @@ class RNGestureHandlerStateChangeEvent private constructor() : Event<RNGestureHa
     actionType: Int,
     dataBuilder: GestureHandlerEventDataBuilder<T>,
   ) {
-    val view = handler.view!!
+    val view = if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      handler.viewForEvents!!
+    } else {
+      handler.view!!
+    }
+
     super.init(UIManagerHelper.getSurfaceId(view), view.id)
+
     this.dataBuilder = dataBuilder
     this.newState = newState
     this.oldState = oldState

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

@@ -13,8 +13,14 @@ class RNGestureHandlerTouchEvent private constructor() : Event<RNGestureHandlerT
   private var actionType = GestureHandler.ACTION_TYPE_JS_FUNCTION_NEW_API
 
   private fun <T : GestureHandler> init(handler: T, actionType: Int) {
-    val view = handler.view!!
+    val view = if (handler.actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      handler.viewForEvents!!
+    } else {
+      handler.view!!
+    }
+
     super.init(UIManagerHelper.getSurfaceId(view), view.id)
+
     extraData = createEventData(handler)
     coalescingKey = handler.eventCoalescingKey
     this.actionType = actionType

packages/react-native-gesture-handler/apple/Handlers/RNNativeViewHandler.mm

@@ -229,6 +229,11 @@ - (void)handleTouchCancel:(UIView *)sender forEvent:(UIEvent *)event
             withExtraData:[RNGestureHandlerEventExtraData forPointerInside:NO withPointerType:_pointerType]];
 }
 
+- (BOOL)wantsToAttachDirectlyToView
+{
+  return YES;
+}
+
 #else
 
 - (RNGestureHandlerEventExtraData *)eventExtraData:(RNDummyGestureRecognizer *)recognizer

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

@@ -41,9 +41,10 @@
 - (void)sendEvent:(nonnull RNGestureHandlerStateChange *)event
     withActionType:(RNGestureHandlerActionType)actionType
        forAnimated:(BOOL)forAnimated
-     forRecognizer:(UIGestureRecognizer *)recognizer;
+           forView:(nonnull RNGHUIView *)detectorView;
 
-- (void)sendNativeTouchEventForGestureHandler:(RNGestureHandler *)handler withPointerType:(NSInteger)pointerType;
+- (void)sendNativeTouchEventForGestureHandler:(nonnull RNGestureHandler *)handler
+                              withPointerType:(NSInteger)pointerType;
 
 @end
 
@@ -100,6 +101,8 @@
 - (void)sendEvent:(nonnull RNGestureHandlerStateChange *)event;
 - (void)sendTouchEventInState:(RNGestureHandlerState)state forViewWithTag:(nonnull NSNumber *)reactTag;
 - (nullable RNGHUIScrollView *)retrieveScrollView:(nonnull RNGHUIView *)view;
+- (nonnull RNGHUIView *)findViewForEvents;
+- (BOOL)wantsToAttachDirectlyToView;
 
 #if !TARGET_OS_OSX
 - (BOOL)isUIScrollViewPanGestureRecognizer:(nonnull UIGestureRecognizer *)gestureRecognizer;

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

@@ -307,6 +307,7 @@ - (void)handleGesture:(UIGestureRecognizer *)recognizer inState:(RNGestureHandle
   RNGestureHandlerEventExtraData *eventData = [self eventExtraData:recognizer];
 
   NSNumber *tag = [self chooseViewForInteraction:recognizer].reactTag;
+
   if (tag == nil && _actionType == RNGestureHandlerActionTypeNativeDetector) {
     tag = @(recognizer.view.tag);
   }
@@ -371,17 +372,25 @@ - (void)sendEventsInState:(RNGestureHandlerState)state
   }
 }
 
+- (RNGHUIView *)findViewForEvents
+{
+  return
+      [self isKindOfClass:[RNNativeViewGestureHandler class]] && _actionType == RNGestureHandlerActionTypeNativeDetector
+      ? self.recognizer.view.superview
+      : self.recognizer.view;
+}
+
 - (void)sendEvent:(RNGestureHandlerStateChange *)event
 {
   [self.emitter sendEvent:event
            withActionType:self.actionType
               forAnimated:_dispatchesAnimatedEvents
-            forRecognizer:self.recognizer];
+                  forView:[self findViewForEvents]];
 }
 
 - (void)sendTouchEventInState:(RNGestureHandlerState)state forViewWithTag:(NSNumber *)reactTag
 {
-  if (self.actionType == RNGestureHandlerActionTypeNativeDetector) {
+  if (_actionType == RNGestureHandlerActionTypeNativeDetector) {
     [self.emitter sendNativeTouchEventForGestureHandler:self withPointerType:_pointerType];
   } else {
     id extraData = [RNGestureHandlerEventExtraData forEventType:_pointerTracker.eventType
@@ -399,7 +408,7 @@ - (void)sendTouchEventInState:(RNGestureHandlerState)state forViewWithTag:(NSNum
     [self.emitter sendEvent:event
              withActionType:self.actionType
                 forAnimated:_dispatchesAnimatedEvents
-              forRecognizer:self.recognizer];
+                    forView:self.recognizer.view];
   }
 }
 
@@ -679,4 +688,9 @@ - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceive
   return YES;
 }
 
+- (BOOL)wantsToAttachDirectlyToView
+{
+  return NO;
+}
+
 @end