react-native-svg: onPress doesn't seem to work for iPhone8/X but works for iPhone6/7

I’ve been seeing some odd behaviour with onPress on Path, Rect, Circle, etc. when using iPhone8/X in the iOS simulator. I had originally crafted some nice pie charts, but have since reverted to using a simple scene to test:

class TestScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Svg
          height="100"
          width="100"
          onPress={ () => console.log('svg') }
      >
          <Circle
              cx="50"
              cy="50"
              r="45"
              stroke="blue"
              strokeWidth="2.5"
              fill="green"
              onPress={ () => console.log('circle') }
          />
          <Rect
              x="15"
              y="15"
              width="70"
              height="70"
              stroke="red"
              strokeWidth="2"
              fill="yellow"
              onPress={ () => console.log('rect') }
          />
      </Svg>
      </View>
    )
  }
}

I am unable to see any of these console.logs on an iPhone8/X but can see them just fine on iPhone6/7 in simulator. I assume maybe the collisions calculations are off on these devices? Has anyone experienced anything similar to this?

I’ll start digging through the native code tomorrow, if anyone can point me in the right direction.

Cheers.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 4
  • Comments: 20

Most upvoted comments

I’ve seen some issues where onPress will work fine on the simulator but not consistently on the device and it’s been due to force touch issues. Changing it to onPressIn will catch the touch regardless of the amount of pressure (do Circle and Rect support onPressIn?)

@kenyonj for my test Path support onPressIn but Circle not

Still seeing this on iPhone X on version 6.5.2

Thanks @kenyonj!! Your fix works.

Also noting that this is still an issue. Took quite a while to figure out what was going on

In my case the <Circle> element works fine with onPress and onPressIn. However, the <G> element doesn’t for whatever reason. I’m finding it baffling.

Tested on both Simulator (X, 6s, and 6) and physical devices (X and 6s)

react-native-svg 6.3.1 react-native 0.54.3

I’ve been tasked with figuring this out in the coming weeks, I just need to get my hands on a device first. I’ll keep you updated.

The work around for this is now causing unwanted side effects for me. Changing to onPressIn worked great, but now I have to wrap things in a ScrollView which is fine, but when scrolling from a touch point, the point activates immediately and doesn’t seem to be able to be altered by gesture functions (could be wrong about this last point).