Android: Press Events not fired for Svg elements inside a PanResponder
See original GitHub issueHey there! We use react-native-svg
for Victory’s native support, and for the most part it’s worked wonderfully. 💯 One of our community members found an issue with Android, however. (Reproduced on the latest version of react-native-svg, 5.2.0)
The press events for SVG elements don’t work if the element is inside a PanResponder. This only affects Android; iOS is fine. RN’s Button
and Touchables work fine in a PanResponder. Quick reproduction:
Entire code need for reproduction:
import React, { Component } from "react";
import { PanResponder, View, Text, Button } from "react-native";
import { Svg, Rect, Text as SvgText } from "react-native-svg";
class PanResponderWrapper extends Component {
constructor(props) {
super(props);
this.panResponder = this.getResponder();
}
getResponder() {
const yes = () => true;
const no = () => false;
const noop = () => null;
return PanResponder.create({
onStartShouldSetPanResponder: yes,
onStartShouldSetPanResponderCapture: no,
onMoveShouldSetPanResponder: yes,
onMoveShouldSetPanResponderCapture: yes,
onShouldBlockNativeResponder: yes,
onPanResponderTerminationRequest: yes,
onPanResponderGrant: noop,
onPanResponderMove: noop,
onPanResponderRelease: noop,
onPanResponderTerminate: noop,
});
}
render() {
return (
<View {...this.panResponder.panHandlers}>
{this.props.children}
</View>
);
}
}
const Box = ({ onPressIn, label }) => (
<Svg width={400} height={100} viewBox="0 0 400 100" style={{ width: "100%", paddingTop: 10 }}>
<Rect onPressIn={onPressIn} fill="lightblue" x="10" y="10" width="350" height="90" />
<SvgText x="30" y="50">{label}</SvgText>
</Svg>
);
export default class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
countUp() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<View style={{ paddingTop: 30 }}>
<Box label="Rect" onPressIn={() => this.countUp()} />
<PanResponderWrapper>
<Button
onPress={() => this.countUp()}
title="panResponder > Button"
/>
</PanResponderWrapper>
<PanResponderWrapper>
<Box label="panResponder > Rect" onPressIn={() => this.countUp()} />
</PanResponderWrapper>
<Text style={{fontSize: 20, textAlign: "center", padding: 30}}>{this.state.count}</Text>
</View>
);
}
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:9
- Comments:8
Top Results From Across the Web
Android: Press Events not fired for Svg elements inside a ...
I'm starting to think this is a bug in react native itself. If you look, there's all kinds of reported issues with PanResponder...
Read more >Accounting for SVG viewBox in react native using ...
I've tried utilizing the X and Y values of the touch event to affect the X and Y value of the SVG element,...
Read more >PanResponder — gestures not working - React native
In my case, I followed the official RN docs for pan-responder. It responded on iOS but not any android phone I tested on....
Read more >11 mistakes I've made during React Native / Redux app ...
After working almost a year with React Native I decided to describe mistakes that I've made while being a beginner. 1) You need...
Read more >How to calculate and detect PanResponder event?-React Native
Coding example for the question How to calculate and detect PanResponder event?-React Native.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
https://github.com/FormidableLabs/victory-native-demo/tree/vn-96-reproduction is a Expo app that shows the behavior. But I’ve also reproduced it with raw
react-native@0.45.1
+react-native-svg@^5.2.0
Hi @msand the issue is still occuring for me with the following component structure: PinchGestureHandler -> PanGestureHander -> Animated.View -> Svg
onPress seems to work fine when the scale is 1 but after zooming in the onPress becomes very unpredictable and only works half the time