4

When I press anywhere on the arc shown below, 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.

This is my code.

<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>

enter image description here

I've also logged an issue in react-native-svg package: https://github.com/react-native-community/react-native-svg/issues/1256

Aniruddha Shevle
  • 4,602
  • 4
  • 22
  • 36

2 Answers2

0

In react-native-svg, you can use the "Symbol" component it will group all the elements into a single element and then add onPress() to that symbol. It will apply for all the absolute/relative content.

<Svg height="150" width="110">
  <Symbol id="symbol" viewBox="0 0 150 110" width="100" height="50">
    //------------------------------
    // Your content for that arc
    //------------------------------
  </Symbol>
</Svg>
Srinivasan Lakshmanan
  • 435
  • 4
  • 16
  • For grouping the SVG element, I'd rather use the "G" element: https://github.com/react-native-community/react-native-svg#g. And using Symbol, it still doesn't work. Thanks for your suggestion though. – Aniruddha Shevle Feb 14 '20 at 06:40
0

Not sure if this would work for anyone still looking, but I was having the same issue and this is what worked for me as a work around. I wrapped the svg in a TouchableOpacity from react-native-gesture-handler.

import { TouchableOpacity } from 'react-native-gesture-handler';

<TouchableOpacity activeOpacity={1} onPress={onPress}>
  <Svg>
    {/* more stuff here */}
  </Svg>
</TouchableOpacity>
Tim Knapp
  • 46
  • 4