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
I’ve seen some issues where
onPresswill work fine on the simulator but not consistently on the device and it’s been due to force touch issues. Changing it toonPressInwill catch the touch regardless of the amount of pressure (doCircleandRectsupportonPressIn?)@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 withonPressandonPressIn. 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
onPressInworked great, but now I have to wrap things in aScrollViewwhich 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).