React-native-gesture-handler: LongPressGestureHandler event payload inconsistent between ios/android

[chunghe]

I'm trying to implement hold-and-drag interaction like this: user long press on an element, dragger appears under user's finger if long press active, then user could start moving the dragger by moving fingers.

Code below works fine on iOS, but not on Android. It turns out that the event payload is different for ios and android (android event payload didn't provide x, y, absoluteX, absoluteY, etc). Not sure if this is the expected behavior.

How to implement this interaction if there's no absoluteX to use?

handleLongPressGestureEvent = (o) => {
    console.log(o.nativeEvent); // move the element by o.nativeEvent.absoluteX
  } 

 render() {
    return (
        <LongPressGestureHandler
          onGestureEvent={this.handleLongPressGestureEvent}
        >
          <View style={{height: 200, width: 200, backgroundColor: 'green'}} />
        </LongPressGestureHandler>
    );
  }

Event payload for ios

absoluteX: 137.5;
absoluteY: 335.5;
handlerTag: 1;
numberOfPointers: 1;
state: 4;
target: 4;
x: 50;
y: 102;

Event payload for android

handlerTag
: 
1

numberOfPointers 
:
1

state
:
 4


[osdnk]

Hi, @chunghe
Thank for using this library.
Take a look on our docs here and here. In fact, there are some "extra" fields given on iOS but we do not document them and do not support. They were added cause their handling was extremely easy as they are given by iOS recognisers. However, they are not done yet on Android (maybe they will be added soon).

I advise to do it in another way. Let you use two GestureHandlers instead of one: you could add PanGestureHandler for dragging and LongPressGestureHandler(read about using many handlers simultaneously for your press interaction.

I do not consider your issue as a problem so I close it. If you still face some troubles, please, reopen it 😄.

[chunghe]

Thank you! This is really helpful.

[chunghe]

I'm trying to implement following interaction:

The screen is empty at the beginning,

1. user long-press at point A, a circle appears at point A
2. user's finger leaves the screen, circle disappears
3. user long-press at point B, a circle appears at point B

Do you think it's possible to implement this using react-native-gesture-handler? I've tried to implement this using PanGestureHandler + LongPressGestureHandler. But PanGestureHandler won't active if user just longpress-and-hold at one point, so at step 3, circle won't appear at point B.

Really appreciate if you could guide me a direction.

[osdnk]

@chunghe
I see this and consider as problem which solves https://github.com/kmagiera/react-native-gesture-handler/pull/212
Suppose will be merged soon

[computerjazz]

@osdnk can you elaborate on how that solves the problem? I am struggling with the same problem and haven't found a solution.

@chunghe did you find a way to get it working?

[osdnk]

Oh, well, would you mind opening new issue with this problem? My previous PR was quite a dirty workaround and decided not to merge.
And frankly speaking I totally forgot about it.

[computerjazz]

can we re-open this issue? It's the exact same problem.

[rt2zz]

facing the same general issue, documented here: https://github.com/kmagiera/react-native-gesture-handler/issues/270

[chunghe]

@computerjazz i gave up implementing that feature eventually :(. i think it's not possible ( at least to my knowledge ) using current version react-native-gesture-handler.

[osdnk]

Please be patient. There's one PR related (adding proper payload's field) and I believe it is going to be merged soon

[osdnk]

Done :)