Logic Detector #3689

akwasniewski · 2025-08-25T11:17:06Z

Description

This PR implements new component -> LogicDetector. It resolves the issue of attaching gestures to inner SVG components. LogicDetector communicates with a NativeDetector higher in the hierarchy, which will be responsible for attaching gestures.

Test plan

tested on the following code

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NativeDetector, LogicDetector, useGesture } from 'react-native-gesture-handler';

import Svg, { Circle, Rect } from 'react-native-svg';

export default function SvgExample() {
  const circleElementTap = useGesture("TapGestureHandler", {
    onStart: () => {
      'worklet';
      console.log('RNGH: clicked circle')
    }
  });
  const rectElementTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked parallelogram')
    }
  });
  const containerTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked container')
    }
  });
  const vbContainerTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked viewbox container')
    }
  });
  const vbInnerContainerTap = useGesture("TapGestureHandler", {
    onStart: () => {

      'worklet';
      console.log('RNGH: clicked inner viewbox container')
    }
  });
  const vbCircleTap = useGesture("TapGestureHandler", {
    onStart: () => {
      'worklet';
      console.log('RNGH: clicked viewbox circle')
    }
  });

  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.header}>
          Overlapping SVGs with gesture detectors
        </Text>
        <View style={{ backgroundColor: 'tomato' }}>
          <NativeDetector gesture={containerTap}>
            <Svg
              height="250"
              width="250"
              onPress={() => console.log('SVG: clicked container')}>
              <LogicDetector gesture={circleElementTap}>
                <Circle
                  cx="125"
                  cy="125"
                  r="125"
                  fill="green"
                  onPress={() => console.log('SVG: clicked circle')}
                />
              </LogicDetector>
              <LogicDetector gesture={rectElementTap}>
                <Rect
                  skewX="45"
                  width="125"
                  height="250"
                  fill="yellow"
                  onPress={() => console.log('SVG: clicked parallelogram')}
                />
              </LogicDetector>
            </Svg>
          </NativeDetector>
        </View>
        <Text>
          Tapping each color should read to a different console.log output
        </Text>
      </View>
      <View style={styles.container}>
        <Text style={styles.header}>SvgView with SvgView with ViewBox</Text>
        <View style={{ backgroundColor: 'tomato' }}>
          <NativeDetector gesture={vbContainerTap}>
            <Svg
              height="250"
              width="250"
              viewBox="-50 -50 150 150"
              onPress={() => console.log('SVG: clicked viewbox container')}>
              <LogicDetector gesture={vbInnerContainerTap}>
                <Svg
                  height="250"
                  width="250"
                  viewBox="-300 -300 600 600"
                  onPress={() =>
                    console.log('SVG: clicked inner viewbox container')
                  }>
                  <Rect
                    x="-300"
                    y="-300"
                    width="600"
                    height="600"
                    fill="yellow"
                  />
                  <LogicDetector gesture={vbCircleTap}>
                    <Circle
                      r="300"
                      fill="green"
                      onPress={() => console.log('SVG: clicked viewbox circle')}
                    />
                  </LogicDetector>
                </Svg>
              </LogicDetector>
            </Svg>
          </NativeDetector>
        </View>
        <Text>The viewBox property remaps SVG's coordinate space</Text>
      </View>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 48,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 10,
  },
});

j-piasecki

Did a fist pass, but some stuff will likely change due to #3682 :/

Anyway, you have the hardest part figured out, now it's just a matter of polishing it up.

...ler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorView.kt

...roid/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorViewManager.kt

packages/react-native-gesture-handler/src/ActionType.ts

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

j-piasecki · 2025-09-05T06:33:23Z

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

 - (facebook::react::RNGestureHandlerDetectorEventEmitter::OnGestureHandlerEvent)getNativeEvent;
-
+- (facebook::react::RNGestureHandlerDetectorEventEmitter::OnGestureHandlerLogicEvent)getNativeLogicEvent:
+    (NSNumber *)childTag;
 @end

 @interface RNGestureHandlerStateChange (NativeEvent)

 - (facebook::react::RNGestureHandlerDetectorEventEmitter::OnGestureHandlerStateChange)getNativeEvent;
-
+- (facebook::react::RNGestureHandlerDetectorEventEmitter::OnGestureHandlerLogicStateChange)getNativeLogicEvent:
+    (NSNumber *)childTag;


Then, you wouldn't need getNativeLogicEvent here

I'm pretty sure that this and below comment were supposed to be in reverse order

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

j-piasecki · 2025-09-05T07:56:13Z

packages/react-native-gesture-handler/src/utils.ts

@@ -105,4 +105,68 @@ export function deepEqual(obj1: any, obj2: any) {
  return true;
 }

+export function invokeNullableMethod(


I'm not sure this is the way to go. Once #3682 is merged, you should be able to cleanly handle all cases in hooks it adds.

j-piasecki · 2025-09-05T08:01:53Z

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

+        const attachedNativeHandlerTags =
+          logicChildren.current.get(key)?.attachedNativeHandlerTags;
+        if (attachedHandlerTags && attachedNativeHandlerTags) {
+          detachHandlers(


Why detach when shouldKeepLogicChild is true?

Overhauled detaching in 593c44f

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

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

m-bert

Good job! I think some type changes might conflict with #3700, but it shouldn't be a big deal 😅

m-bert · 2025-09-11T09:54:41Z

...ve-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -31,9 +31,13 @@ open class GestureHandler {
  var tag = 0
  var view: View? = null
    private set
+
+  // parent view is used for logicDetector


Suggested change

// parent view is used for logicDetector

// Parent view is used for Logic Detector.

Could also be lowercase, but I think camelCase in that case seems off.

m-bert · 2025-09-11T10:33:49Z

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

+export function useDetectorContext() {
+  const ctx = useContext(DetectorContext);
+  if (!ctx) {
+    throw new Error('Logic detector must be under a Native Detector');
+  }
+  return ctx;
+}
+


Can we have this in separate file?

m-bert · 2025-09-11T10:36:13Z

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

@@ -187,3 +187,31 @@ export function hash(str: string) {
  }
  return h >>> 0;
 }
+
+export function invokeNullableMethod(


I don't like this name, we already have this in web implementation and it is quite confusing. I think it would be better to rename it right now while we remember what it does. Also a comment with explanation would be great.

m-bert · 2025-09-11T10:37:09Z

packages/react-native-gesture-handler/src/v3/types.ts

@@ -48,3 +76,23 @@ export type CallbackHandlers = Omit<
 export type AnimatedEvent = ((...args: any[]) => void) & {
  _argMapping: (Animated.Mapping | null)[];
 };
+
+export interface LogicChildrenProps {


I'm not sure about this Props suffix, but that's not strong opinion.

m-bert · 2025-09-11T10:37:52Z

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

    this.delegate.init(viewRef, this);
  }

  public detach() {
    if (this.state === State.ACTIVE) {
-      this.cancel();
+      this.cancelTouches();


m-bert · 2025-09-11T12:35:03Z

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

+    [self attachHandlers:child.handlerTags
+              actionType:RNGestureHandlerActionTypeLogicDetector
+                 viewTag:child.viewTag
+        attachedHandlers:logicChildren[child.viewTag]];
+  }


There's no overlap between newProps.handlerTags and newProps.logicChildren, right?

m-bert · 2025-09-11T12:38:33Z

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

+  logicChildren?: Set<LogicChildrenProps>;
+}
+
+export interface LogicChildrenProps {


I'm not sure If I like the idea of having 2 types named the same. Though it is not a strong opinion, I'd add something, for example Web suffix.

And same as in types.ts, I'm not fond of adding Props suffix in this case.

m-bert · 2025-09-11T12:46:13Z

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

+    const logicChildrenToDelete: Set<number> = new Set();
+
+    for (const key of logicChildren.current.keys()) {
+      logicChildrenToDelete.add(key);
+    }


Can't we just do

Suggested change

const logicChildrenToDelete: Set<number> = new Set();

for (const key of logicChildren.current.keys()) {

logicChildrenToDelete.add(key);

}

const logicChildrenToDelete: Set<number> = new Set(logicChildren.current.keys());

?

m-bert · 2025-09-11T12:50:01Z

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

+    });
+
+    logicChildrenToDelete.forEach((childTag) => {
+      if (attachedHandlerTags && attachedNativeHandlerTags) {


I'm not sure if I get this condition. As far as I remember attachedNativeHandlerTags was used for Native gestures, so why do we want only them to be detached?

m-bert · 2025-09-11T12:55:16Z

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

+          logicChildren.current.get(childTag)!,
+          logicChildren.current.get(childTag)!


I get the idea, but it seems quite confusing why they're the same, could we add a little comment?

akwasniewski added 7 commits August 25, 2025 12:07

logic detector web

7d9de2e

avoiding propsRef

4ccf49e

refactor

69e1c5d

logicChildren in specs

9959d8b

ios

1f1f681

merge with next

a982767

fix reanimated version

81bf405

akwasniewski force-pushed the @akwasniewski/logic-detector branch from 5b65a19 to 81bf405 Compare September 1, 2025 13:47

akwasniewski added 8 commits September 1, 2025 16:02

yarn lock

a90b83c

worklets

8c03f58

detach handlers

a3256d4

worklets fix

6f45a33

android

66390ab

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

1ef1969

yarn lock fix

3379714

removed circular dependency

e9795cc

j-piasecki requested changes Sep 5, 2025

View reviewed changes

akwasniewski added 6 commits September 5, 2025 11:39

simplify ios

7fb8ea9

removed logic events web/android

5c24151

android and web refactor

593c44f

one path

fe1d67d

merge with next

b147c7b

merge fix

4e718b3

akwasniewski force-pushed the @akwasniewski/logic-detector branch from 94984b2 to 4e718b3 Compare September 8, 2025 12:18

akwasniewski added 2 commits September 9, 2025 08:05

adjust for reanimated/animated separation

8e9d2dc

general refactor

97b7369

akwasniewski requested a review from m-bert September 9, 2025 10:24

akwasniewski added 3 commits September 9, 2025 13:46

simplified attaching

8b6df8c

tag in callback

dab9e5f

not sharing web invoke

089bbf2

renamed logic props

5fbe993

akwasniewski marked this pull request as ready for review September 11, 2025 09:14

akwasniewski added 4 commits September 11, 2025 11:25

logic animated event

ddce1fb

removed child tag from web

50c1af4

safe detaching

5f3f1eb

typo fix

1f22ef4

m-bert requested changes Sep 11, 2025

View reviewed changes

	// parent view is used for logicDetector
	// Parent view is used for Logic Detector.

		logicChildren.current.get(childTag)!,
		logicChildren.current.get(childTag)!

Uh oh!

Logic Detector #3689

Are you sure you want to change the base?

Logic Detector #3689

Conversation

akwasniewski commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

j-piasecki left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

akwasniewski commented Aug 25, 2025 •

edited

Loading