Touch events fire for different targets on Android

[psivanov]

I am using a PanResponder attached to a <G> element and have implemented simple dragging.

On Android, there are events fired for at least two different target (sometimes more), while I drag.
The locationX and locationY of these events are not the same, which results in my <Path> element jumping back and forth between the two different locations.

Also, I noticed that the target of the event, which is passed to onStartShouldSetPanResponder is always different than the target passed to onPanResponderRelease.

Below is the log, in the form event handler: target [[[locationX, locationY]]]

EDIT:
Looks like 270 is the id of the root <SVG> element, while 274 is the id of the child <G>, which I care about. 270 locationX/Y never update, so I can't really use it. It kind of works, if I just ignore anything but the first target (274 in this case) I get. The problem is that if I move my finger fast enough, I stop getting the child (274) events and I am only getting the root events, which are useless. So in this case the dragging is interrupted.

Android:

DisplayObject.js:16 pan start should set: 274 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:28 pan grant: 274 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[169.09132385253906,281.09130859375]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[167.37326049804688,279.0875549316406]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[163.43783569335938,275.152099609375]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[157.85891723632812,270.6871643066406]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[152.55020141601562,265.1745300292969]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[146.2047882080078,257.7151184082031]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[143.33921813964844,254.48207092285156]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[139.22235107421875,249.7937774658203]]]
DisplayObject.js:58 pan move: 270 [[[169.42857360839844,281.4285583496094]]]
DisplayObject.js:58 pan move: 274 [[[136.85714721679688,247.42857360839844]]]
DisplayObject.js:186 pan end: 270 [[]]

iOS:

DisplayObject.js:16 pan start should set: 275 [[[176.3333282470703,264]]]
DisplayObject.js:28 pan grant: 275 [[[176.3333282470703,264]]]
DisplayObject.js:58 pan move: 275 [[[171,261.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[169.6666564941406,261]]]
DisplayObject.js:58 pan move: 275 [[[168.6666564941406,260]]]
DisplayObject.js:58 pan move: 275 [[[168,259]]]
DisplayObject.js:58 pan move: 275 [[[167.3333282470703,258.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[166.6666564941406,257.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[166.3333282470703,256.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[165.3333282470703,254.6666564941406]]]
DisplayObject.js:58 pan move: 275 [[[163.6666564941406,252.6666564941406]]]
DisplayObject.js:58 pan move: 275 [[[162,250.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[159.6666564941406,246]]]
DisplayObject.js:58 pan move: 275 [[[157.6666564941406,241.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[155,236.3333282470703]]]
DisplayObject.js:58 pan move: 275 [[[152.3333282470703,232]]]
DisplayObject.js:58 pan move: 275 [[[150.3333282470703,228]]]
DisplayObject.js:58 pan move: 275 [[[147.3333282470703,226]]]
DisplayObject.js:186 pan end: 275 [[]]

[macrozone]

I have a similar Issue, but i have attached the pan-responder to a View which contains a <SVG>element. onMoveShouldSetPanResponderCapture and others are called for multiple targets, and the locations for these targets are different. This leads to jitters when used to move the svg with onPanResponderMove and leads also to a other bugs.

This bug makes using panresponder around svg's nearly unusable

[psivanov]

I forgot to post, but I found what the problem was and found a (non-ideal) workaround.
Basically the issue is #376.

SVG events don't have correct locationX and locationY - they are fixed, so because of the way I had it set up, I was getting both events from the root SVG, which were wrong and events from the child object, which were correct.
I hope #376 will be fixed soon, but meanwhile, I just switched to use pageX and pageY instead.
It worked in my case, but it's not ideal and it won't work in all cases.

[sabativi]

Hey @psivanov, could you elaborate on your workaround please, I am actually facing the same issue.

[psivanov]

@sabativi, I simply found a way to do what I needed without using locationX and locationY in my event handler. I used pageX and pageY, instead. In my case, I know exactly where on the page the canvas component is located, so could get the canvas location this way.
I wish they fix the original issue, though (#376).

[dovo329]

Thank you a hundred times :)

I used the gestureState moveX and moveY, which I believe is the same as the pageX and pageY, as well as a known offset of the view on the screen.

You can get the known offset of the view using
this._topSvg.measure((x, y, w, h, px, py) =>

where _topSvg is the ref of the topmost svg in your render function.

[msand]

I think I might have fixed the issue now, can you try with the latest commit from the master branch?

[msand]

Closing because of inactivity.