iOS: onPress is not working on the SVG Path

[aniruddhashevle]

Bug

I've created the following sample.

This is an arc which is rendered as per my expectations. When I press anywhere on the arc, on Android, onPress is always called properly but on iOS, sometimes onPress is called but sometimes it doesn't. Some part of the arc is not clickable on iOS.

Also, there isn't any positioning element(absolute/relative positioned) overlapping the arc.

Environment info

react-native: 0.61.5
react-native-svg: 9.13.3

Reproducible sample code

I'm using Path to show an elliptical arc as follows.

<Svg
   height={deviceHeight - 200}
   width={deviceWidth}
>
    <Path
       ref={ref => this.pathRef = ref}
       fill="none"
       stroke='rgba(214,51,51,.2)'
       strokeWidth={35}
       onPress={() => console.log('path on pressed called!')}
       d="M 392.72727272727275 124.90909090909088 A 360 450 0 0 0 42.72727272727275 574.9090909090909"
    />
</Svg>

[msand]

Can you try with the latest version?

[msand]

Seems like it's responding on the fill area even if it has fill="none"

[aniruddhashevle]

I've tried with the latest version 11.0.1, this issue is still there!
And yes, it's responding on the fill area even if it has fill="none"!

[msand]

It's essentially an issue with pointer-events, there's some wip for the "none" value, mind helping out with the other svg specific values?

[msand]

related #1290

[tolgau]

I'm also experiencing, what I assume to be, this issue. In the screenshot below, there are four 90 degree arcs that act as up, down, left and right buttons. Presses that don't fall within the red rectangle don't trigger the onPress event on the SVG arcs on iOS. On Android everything works as expected. The issue is not related to the Polyline arrows on top of the arcs. Same thing happens when I remove them and there is nothing overlapping the arcs.

react-native: 0.62.2
react-native-svg: 12.0.3

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[aprilmintacpineda]

Still not working as of today...

[ombogdan]

Still not working as of today...

[BrankoFurnadjiski]

Hello. I was experiencing the same issue, android part of the app mostly works, but I was having issues with my iOS side.
The following solution resolved my problem. Instead of using stroke width to make the arc width I just simply drew the whole arc myself. Drawing the top arc of the path, then connecting the right point (ending point) of top arc with the right point (starting point) of bottom arc, then drawing the bottom arc and then closing the path in the end. I am using fill to colour the path instead of stroke.

In the end my path looks like M x1 y1 A radius1 radius1 0 0 0 x2 y2 L x3 y3 A radius2 radius2 0 0 1 x4 y4 Z

radius1 - the distance from centre to the top arc
radius2 - the distance from centre to the bottom arc
x1, y1 - the top left point
x2, y2 - the top right point
x3, y3 - the bottom right point
x4, y4 - the bottom left point

Hope you find this helpful.

[arexnnnn]

/assign