Trying to get touch events working like they do with a regular SVG

[mobilenik]

Description

Discussed in #2626

^{Originally posted by mobilenik January 29, 2025}
I am porting some React code over to React Native so that I can run it on a device and in the web. In my current code (below) I only let the user click the polyline with the mouse, not the entire SVG canvas, by use of the inline style pointerEvents: 'visiblePainted'. The goal of the app is to let the user select the SVG, but if they click the canvas outside of the polyline (but inside the SVG boundary) then I need to respond differently to the click of the background canvas.

React Native version

React Native 0.76.6

SVG version

SVG 15.8.0

Platforms

It works as expected on Web, but not on iOS. I haven't tested on Android but I need it there as well.

Snack or a link to a repository

https://snack.expo.dev/@mobilenik/react-native-svg-clickthrough

Steps to reproduce

Current working React code:

<svg
    xmlns="http://www.w3.org/2000/svg"
    id={annotationData.id}
    onClick={handleClick}
    width={bounds.width}
    height={bounds.height}
    style={{
      position: 'absolute',
      left: bounds.left,
      top: bounds.top,
      overflow: 'visible',
      cursor: isSelected ? 'crosshair' : 'pointer',
      pointerEvents: 'none',
      zIndex: isSelected ? 3 : 1,
    }}
>
    <polyline
        points={nodeString}
        style={{
          fill: 'none',
          stroke: isSelected ? 'red' : 'yellow',
          strokeWidth: isSelected ? 5 : 4,
          pointerEvents: 'visiblePainted',
        }}
        strokeDasharray={isSelected ? '0' : '10,10'}
        strokeLinecap="round"
    />
</svg>

What I am experiencing in React Native is that the inline style doesn't have any effect. I can add an onPress event to the polyline itself though (current React Native code below) and that does only fire when they click the polyline, but if they click just outside it then the background image doesn't get the click event - it looks like the click is not propagated.

React Native version:

<Svg
     xmlns="http://www.w3.org/2000/svg"
     id={annotation.id}
     width={bounds.width + 10}
     height={bounds.height + 10}
     style={{
       position: 'absolute',
       left: bounds.left - 3,
       top: bounds.top - 6,
       overflow: 'visible',
     }}
   >
    <Polyline
       onPress={() => console.log('Pressed route:', annotation.id)}
       points={nodeString}
       style={{
         fill: 'none',
         stroke: 'yellow',
         strokeWidth: 5,
         pointerEvents: 'visiblePainted',
         overflow: 'visible',
         cursor: 'grab',
       }}
       strokeDasharray="10,10"
       strokeLinecap="round"
    />
</Svg>

I have tried everything I can think of but it looks like there is no way of propagating the event. Has anyone got any ideas of what I could do?