react-native-svg
react-native-svg copied to clipboard
fix: pointer events getter
Summary
Regarding this issue, the PR adds a getter for mPointerEvents in VirtualView class. Thanks to this, the pointer event type can be accessed from the RNSVG components in react-native-gesture-handler.
Test Plan
You can test it by changing the pointerEvents value and checking if the 'tap' is logged when tapping on the red square:
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import Svg, { Rect } from 'react-native-svg';
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
export default function App() {
const tap = Gesture.Tap().onBegin((event) => console.log('tap'));
return (
<GestureHandlerRootView>
<SafeAreaView style={styles.container}>
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
xmlSpace="preserve"
viewBox="0 0 382.7 382.7"
id="container">
<GestureDetector gesture={tap}>
<Rect
width={90.3}
height={90.3}
x={242.7}
y={242.7}
fill="red"
strokeWidth={1}
/>
</GestureDetector>
<Rect
width={375}
height={374}
fill="none"
stroke="#000"
strokeWidth={1}
pointerEvents="none"
/>
</Svg>
</SafeAreaView>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Related Closes #2239 to that problem.
I close this PR due to the fact that it was fixed by @jakex7 from React Native side here