Virtual detector native gestures (#3765)

## Description

This PR makes `VirtualDetector` compatible with native gestures. Back in
#3689 I decided to handle `VirtualDetector` compatibility with native
gestures for later, as it is a extremely niche feature and it seemed to
require a lot of work. Turns out it doesn't, beacause we use wrap in
VirtualDetector we can handle them as normal gestures.

## Test plan

Tested on:
<details>

```tsx
import * as React from 'react';
import { StyleSheet, Text, View, ScrollView, Button } from 'react-native';
import {
  GestureHandlerRootView,
  GestureDetector,
  useNative,
  useTap,
  InterceptingGestureDetector
} from 'react-native-gesture-handler';

export default function App() {
  const items = Array.from({ length: 100 }, (_, index) => `Item ${index + 1}`);
  const [enabled, setEnabled] = React.useState(true);
  const gesture = useNative({
    onStart: (e) => {
      'worklet';
      console.log('onStart');
    }
  });
  const outerGesture = useTap({
    onStart: (e) => {
      'worklet'
      console.log('onOuterStart');
    }
  });

  const SV1 = () => (
    <ScrollView style={styles.scrollView1}>
      {items.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text style={styles.text}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );

  const SV2 = () => (
    <ScrollView style={styles.scrollView2}>
      {items.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text style={styles.text}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );

  return (
    <GestureHandlerRootView style={styles.root}>
      <View style={styles.buttonContainer}>
        <Button
          title="Swap the child"
          onPress={() => setEnabled(!enabled)}
          color="#4a90e2"
        />
      </View>

      <InterceptingGestureDetector gesture={outerGesture}>
        <View style={styles.outerContainer}>
          <View style={styles.frame}>
            <GestureDetector gesture={gesture}>
              {enabled ? <SV1 /> : <SV2 />}
            </GestureDetector>
          </View>
        </View>
      </InterceptingGestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  scrollView1: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  scrollView2: {
    backgroundColor: 'lightblue',
    marginHorizontal: 20,
  },

  item: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    margin: 2,
    backgroundColor: 'white',
    borderRadius: 10,
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
  root: {
    flex: 1,
    backgroundColor: '#fafafa',
    paddingTop: 60,
    alignItems: 'center',
  },
  buttonContainer: {
    marginBottom: 20,
    width: '80%',
  },
  outerContainer: {
    padding: 14,
    backgroundColor: '#fff',
    borderRadius: 18,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.12,
    shadowRadius: 8,
    elevation: 5,
  },
  frame: {
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#d6d6d6',
    backgroundColor: '#fdfdfd',
    overflow: 'hidden',
  },
  innerContainer: {
    paddingVertical: 24,
    paddingHorizontal: 20,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  active: {
    backgroundColor: '#e9f7ef',
    borderColor: '#4caf50',
    borderWidth: 1.5,
  },
  inactive: {
    backgroundColor: '#fff8e1',
    borderColor: '#ffb300',
    borderWidth: 1,
  },
});
```

</details>

Author: akwasniewski

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

@@ -90,7 +90,7 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     for (tag in newHandlers) {
       handlersToDetach.remove(tag)
       if (!attachedHandlers.contains(tag)) {
-        if (shouldAttachGestureToChildView(tag)) {
+        if (shouldAttachGestureToChildView(tag) && actionType == 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.
           nativeHandlers.add(tag)
@@ -121,27 +121,32 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   private fun attachVirtualChildren(virtualChildrenToAttach: List<VirtualChildren>) {
     val virtualChildrenToDetach = attachedVirtualHandlers.keys.toMutableSet()
 
+    for (child in virtualChildrenToAttach) {
+      virtualChildrenToDetach.remove(child.viewTag)
+    }
+
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
+
+    for (child in virtualChildrenToDetach) {
+      for (tag in attachedVirtualHandlers[child]!!) {
+        registry.detachHandler(tag)
+      }
+      attachedVirtualHandlers.remove(tag)
+    }
+
     for (child in virtualChildrenToAttach) {
       if (!attachedVirtualHandlers.containsKey(child.viewTag)) {
         attachedVirtualHandlers[child.viewTag] = mutableSetOf()
       }
 
-      virtualChildrenToDetach.remove(child.viewTag)
       attachHandlers(
         child.handlerTags,
         child.viewTag,
         GestureHandler.ACTION_TYPE_VIRTUAL_DETECTOR,
         attachedVirtualHandlers[child.viewTag]!!,
       )
     }
-
-    val registry = RNGestureHandlerModule.registries[moduleId]
-      ?: throw Exception("Tried to access a non-existent registry")
-
-    for (tag in virtualChildrenToDetach) {
-      registry.detachHandler(tag)
-      attachedVirtualHandlers.remove(tag)
-    }
   }
 
   private fun tryAttachNativeHandlersToChildView(childId: Int) {

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

@@ -171,7 +171,7 @@ - (void)attachHandlers:(const std::vector<int> &)handlerTags
   for (const int tag : handlerTags) {
     [handlersToDetach removeObject:@(tag)];
     if (![attachedHandlers containsObject:@(tag)]) {
-      if ([self shouldAttachGestureToSubview:@(tag)]) {
+      if ([self shouldAttachGestureToSubview:@(tag)] && actionType == RNGestureHandlerActionTypeNativeDetector) {
         // 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 `didAddSubview` method.
         [_nativeHandlers addObject:@(tag)];
@@ -236,22 +236,24 @@ - (void)updateVirtualChildren:(const std::vector<RNGestureHandlerDetectorVirtual
   }
 
   for (const auto &child : virtualChildren) {
-    if (_attachedVirtualHandlers.find(child.viewTag) == _attachedVirtualHandlers.end()) {
-      _attachedVirtualHandlers[child.viewTag] = [NSMutableSet set];
-    }
-
     [virtualChildrenToDetach removeObject:@(child.viewTag)];
-
-    [self attachHandlers:child.handlerTags
-              actionType:RNGestureHandlerActionTypeVirtualDetector
-                 viewTag:child.viewTag
-        attachedHandlers:_attachedVirtualHandlers[child.viewTag]];
   }
 
   for (const NSNumber *tag : virtualChildrenToDetach) {
     for (id handlerTag : _attachedVirtualHandlers[tag.intValue]) {
       [handlerManager.registry detachHandlerWithTag:handlerTag];
     }
+    _attachedVirtualHandlers.erase(tag.intValue);
+  }
+
+  for (const auto &child : virtualChildren) {
+    if (_attachedVirtualHandlers.find(child.viewTag) == _attachedVirtualHandlers.end()) {
+      _attachedVirtualHandlers[child.viewTag] = [NSMutableSet set];
+    }
+    [self attachHandlers:child.handlerTags
+              actionType:RNGestureHandlerActionTypeVirtualDetector
+                 viewTag:child.viewTag
+        attachedHandlers:_attachedVirtualHandlers[child.viewTag]];
   }
 }
 

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

@@ -53,7 +53,8 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
       if (
         RNGestureHandlerModule.getGestureHandlerNode(
           tag
-        ).shouldAttachGestureToChildView()
+        ).shouldAttachGestureToChildView() &&
+        actionType === ActionType.NATIVE_DETECTOR
       ) {
         RNGestureHandlerModule.attachGestureHandler(
           tag,
@@ -109,6 +110,14 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
       attachedVirtualHandlers.current.keys()
     );
 
+    props.virtualChildren?.forEach((child) => {
+      virtualChildrenToDetach.delete(child.viewTag);
+    });
+
+    virtualChildrenToDetach.forEach((tag) => {
+      detachHandlers(EMPTY_HANDLERS, attachedVirtualHandlers.current.get(tag)!);
+    });
+
     props.virtualChildren?.forEach((child) => {
       if (child.viewRef.current == null) {
         // We must check whether viewRef is  not null as otherwise we get an error when intercepting gesture detector
@@ -118,7 +127,6 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
       if (!attachedVirtualHandlers.current.has(child.viewTag)) {
         attachedVirtualHandlers.current.set(child.viewTag, new Set());
       }
-      virtualChildrenToDetach.delete(child.viewTag);
 
       const currentHandlerTags = new Set(child.handlerTags);
       detachHandlers(
@@ -134,10 +142,6 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         ActionType.VIRTUAL_DETECTOR
       );
     });
-
-    virtualChildrenToDetach.forEach((tag) => {
-      detachHandlers(EMPTY_HANDLERS, attachedVirtualHandlers.current.get(tag)!);
-    });
   }, [props.virtualChildren]);
 
   return (

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -23,22 +23,34 @@ export function VirtualDetector<THandlerData, TConfig>(
 
   const viewRef = useRef(null);
   const [viewTag, setViewTag] = useState<number>(-1);
+
   const virtualMethods = useRef(props.gesture.detectorCallbacks);
-  const handleRef = useCallback((node: any) => {
-    viewRef.current = node;
-    if (!node) {
-      return;
-    }
 
-    if (Platform.OS === 'web') {
-      setViewTag(node);
-    } else {
-      const tag = findNodeHandle(node);
+  const handleRef = useCallback(
+    (node: any) => {
+      viewRef.current = node;
+      if (!node) {
+        return;
+      }
+
+      const tag = Platform.OS === 'web' ? node : findNodeHandle(node);
+
       if (tag != null) {
         setViewTag(tag);
       }
-    }
-  }, []);
+
+      return () => {
+        if (tag != null) {
+          const handlerTags = isComposedGesture(props.gesture)
+            ? props.gesture.tags
+            : [props.gesture.tag];
+
+          unregister(tag, handlerTags);
+        }
+      };
+    },
+    [props.children]
+  );
 
   useEffect(() => {
     virtualMethods.current = props.gesture.detectorCallbacks;