SVG onPress handling with pointerEvents Expo SDK 54 #2784
Description
Description
Absolutely positioned parent elements containing an SVG with onPress allowed press handling in Expo SDK 51 (react-native 0.74.5, react-native-svg 15.2.0).
When upgrading to SDK 52-54 (react-native 0.81.4, react-native-svg 15.12.1) press events are only detected for the last rendered SVG element.
A minimal example is provided. "red pressed" is logged for Expo SDK 51 but not in later versions.
Steps to reproduce
import { View } from 'react-native'
import Svg, { Path } from 'react-native-svg'
export default function App() {
return (
<View
style={{
position: 'relative',
}}
>
<View
style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
pointerEvents={'box-none'}
>
<Svg
width={'100'}
height={'100'}
pointerEvents={'box-none'}
>
<Path
d={'M 0 0 L 100 0 L 100 100 L 0 100 Z'}
fill={'red'}
onPress={() => console.log('red pressed')}
/>
</Svg>
</View>
<View
style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
pointerEvents={'box-none'}
>
<Svg
width={'100'}
height={'100'}
pointerEvents={'box-none'}
>
<Path
d={'M 50 0 L 100 0 L 100 100 L 50 100 Z'}
fill={'blue'}
onPress={() => console.log('blue pressed')}
/>
</Svg>
</View>
</View>
)
}
Expo SDK 51
bun install expo@51
bunx expo install --fix
bun run ios
Tap Red shape and "red pressed" is logged
Tap Blue shape and "blue pressed is logged
Expo SDK 52+
bun install expo@52
bunx expo install --fix
bun run ios
Tap Red shape and nothing is logged
Tap Blue shape and "blue pressed is logged
Snack or a link to a repository
https://snack.expo.dev/@thame/svg-onpress
SVG version
15.12.1
React Native version
0.81.4
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo Go
Architecture
Fabric (New Architecture)
Build type
Debug app & dev bundle
Device
iOS simulator
Device model
No response
Acknowledgements
Yes