Gestures on react-native-svg subcomponents have the wrong touchable area on Android

[chriscoomber]

Description

See this screen recording (epilepsy warning)

Screen_Recording_20240205-150639_Expo.Go.mp4

(Note that the text is referring to the workaround to #2734, which does not affect Android, so you can ignore the workaround that it's talking about.)

You can see that many of my clicks on the square were counted as clicks on the quarter-circle. I think the touchable area of the quarter-circle is wrong: it should be just the quarter-circle itself, but instead it's the bounding box around the quarter-circle.

This only affects Android. iOS and web have the correct behaviour.

Steps to reproduce

1. Using react-native-svg, create a shape which isn't square (e.g. Circle or non-square Path). And a shape underneath it.
2. Add Tap GestureDetectors to both shapes.
3. Try to click the shape underneath and see which gesture is triggered.

Snack or a link to a repository

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

Gesture Handler version

2.12.1

React Native version

0.72.6

Platforms

Android

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes