Gestures don't work with sub-components of react-native-svg's <Svg> on iOS

[chriscoomber]

Description

Wrapping SVG sub-components with <GestureDetector> doesn't seem to work.

(There is a related issue, #2502, which was resolved. However, the code presented in the solution doesn't work any more. This indicates to me that this did work at some point, but doesn't seem to any more.)

Naturally, this could be a react-native-svg issue.

Steps to reproduce

Attempt to wrap an SVG sub-component, such as Path, in a GestureDetector:

<GestureDetector gesture={tapGesture}>
  <Path d={path} fill={fill} />
</GestureDetector>

Expected result: clicking the square causes it to change color, but clicking anywhere else does nothing. Should work on Android and iOS.

Actual result: Works on web, via react-native-web. Also works on Android.

Does not work on iOS.

Snack or a link to a repository

https://github.com/chriscoomber/RNSvg-gesture-handler-repro

I also made a snack, though it is muddied by software-mansion/react-native-svg#2214 which makes it crash on android/iOS.

https://snack.expo.dev/@chris_whiterosemaths/interactive-svg-component

Gesture Handler version

2.12.1

React Native version

0.72.6

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @chriscoomber! The code in issue that you've mentioned still works. There's just one difference that makes it work. In the linked issue there is:

<GestureDetector key={key} gesture={tapGesture}>
    <Path d={path} onResponderMove={(_) => {}} />
</GestureDetector>

while in your case there's:

<GestureDetector gesture={tapGesture}>
    <Path d={path} fill={fill} />
</GestureDetector>

Now, adding onResponderMove={(_) => {}} to your example makes it work. Moreover, you can add other props related to responder. For example, if you use onStartShouldSetResponder, you can pass there an arrow function and it doesn't matter whether it returns true or false, the square will change its color.

For now I'm not sure why it happens, but I'll definitely investigate that!

[chriscoomber]

@m-bert Thanks for the quick response and the workaround - that seems to work! I'm happy for you to close, or keep open if there's more investigation to be done.

However, I'm now seeing a new issue on Android only, which I've raised separately: #2748.

[m-bert]

I'll close it later because I want to dive into it and see why it works.

[m-bert]

Okay, I've looked more into this problem, together with @jakex7, and it seems that the problem lies in the fact that SVG elements require responsible prop to handle interactions and for some reason this prop is not set on iOS. However, when specifying some properties, such as those with responder, React Native sets responsible on its own. SVG also does this, when it encounters props such as disabled (so in that context, setting disabled={false} would also fix this problem).

There's nothing more that we can do this on Gesture Handler side so I'm closing this issue.