question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No pan responder events fired from SVG elements inside a Modal on Android

See original GitHub issue

react-native-svg@6.0.0-rc1 react-native@0.48.3 react@16.0.0-alpha.12

I have a responder on individual (nested) children (<G>s) of an <SVG> node. This stopped working on Android. No events get fired (or at least none of the handlers gets called).

This is how I used to be able to make it work:

	componentWillMount() {
		console.log('WILL MOUNT');
		this.panResponder = PanResponder.create({
			onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
			onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
			onPanResponderGrant: this.handlePanResponderGrant,
			onPanResponderMove: this.handlePanResponderMove,
			onPanResponderRelease: this.handlePanResponderEnd,
			onPanResponderTerminate: this.handlePanResponderEnd,
			onPanResponderTerminationRequest: this.handlePanResponderTerminationRequest
		});
	}
...
	render() {
		return (
		<SVG>
			<G
				{...this.panResponder.panHandlers}
			>
			...
			</G>
		</SVG>
		);
	}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:16

github_iconTop GitHub Comments

1reaction
claudioviolacommented, Nov 22, 2018

Same issue here. I fixed but looks like a workaround…

I tried to add panResponder. panHandlers to SVG parent node and it works (I mean not to the child Rect as in the previous example)… but honestly I don’t know if there is something of counterproductive…

1reaction
psivanovcommented, Jan 23, 2018

What is the status of this issue? I tried react-native-svg@6.0.1-rc2 and it’s still broken for Android only (works perfectly on iOS).

Read more comments on GitHub >

github_iconTop Results From Across the Web

No pan responder events fired from SVG elements inside a ...
I have a responder on individual (nested) children ( <G>s ) of an node. This stopped working on Android. No events get fired...
Read more >
PanHandler doesn't detect touch events inside Modal
The PanHandler works for all the content inside the page, but not when a Modal is shown. The touch events inside the modal...
Read more >
PanResponder - React Native
By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.
Read more >
touch-action - CSS: Cascading Style Sheets - MDN Web Docs
An application using Pointer events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly ...
Read more >
Introduction | React Native Gesture Handler - Software Mansion
A way to use a platform's native touch handling system for recognizing pinch, rotation and pan (besides a few other gestures). The ability...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found