FlingGestureHandler reports wrong coordinates on iOS

I’m trying to implement swipe detection using FlingGestureHandler and, while working correctly on Android, I’m unable to get it to work on iOS as the nativeEvent’s properties absoluteX and absoluteY are always 0, and x and y always contain the same coordinates regardless of the state (if I swipe from left to right, for example, I would expect a different x value when the status is ACTIVE and when it’s END).

RN Version: 0.63.4 iOS Version: 14.3

function handleFling(event) {
    console.log(event.nativeEvent.x, event.nativeEvent.absoluteX, event.nativeEvent.status) 
    // Always the same x, absoluteX always 0!
}

return (
    <FlingGestureHandler
        direction={Directions.LEFT | Directions.RIGHT}
        onGestureEvent={handleFling}
        onHandlerStateChange={handleFling}>
         <View  style={{height: 300, width: 300, backgroundColor: 'red'}} />
    </FlingGestureHandler>
)

[judemorrissey]

hi team! +1 here, I experience the same issue as @gianmarcotoso, i would like to add that adding logging to my handler like

const onHandlerStateChange = useCallback(
    ({nativeEvent}) => {
      const {absoluteX, state} = nativeEvent;
      console.log('handler state', absoluteX, state);
      ...

yields the following on recognized flings:

[Wed Feb 24 2021 12:07:05.461]  LOG      handler state 0 4
[Wed Feb 24 2021 12:07:05.462]  LOG      handler state 0 5
[Wed Feb 24 2021 12:07:14.903]  LOG      handler state 0 4
[Wed Feb 24 2021 12:07:14.903]  LOG      handler state 0 5

Note that State.ACTIVE === 4 && State.END === 5

notice how State.BEGAN nor State.FAILED never fire, only State.ACTIVE and State.END as expected. Hope this is useful, thanks!

Edit: Just logged out the entire nativeEvent, and looks like x and y work, just not the absolute versions of them

[Wed Feb 24 2021 12:19:54.225]  LOG      handler state 4 {
  "x": 116.5,
  "absoluteX": 0,
  "absoluteY": 0,
  "target": 6407,
  "handlerTag": 1,
  "y": 247,
  "oldState": 0,
  "numberOfPointers": 1,
  "state": 4
}
[Wed Feb 24 2021 12:19:54.225]  LOG      handler state 5 {
  "x": 116.5,
  "absoluteX": 0,
  "absoluteY": 0,
  "target": 6407,
  "handlerTag": 1,
  "y": 247,
  "oldState": 4,
  "numberOfPointers": 1,
  "state": 5
}

However, this is not enough information for my use case where I record the touch start coordinates on State.BEGAN, and then once State.ACTIVE is recognized, we determine which direction the swipe was going for implementing “swipe to next/previous”

Thanks!

Edit again: Found a workaround for my use case by using two FlingGestureHandlers for each of the directions we support, since we only care about which direction a swipe was done.

<FlingGestureHandler
      direction={Directions.RIGHT}
      onHandlerStateChange={onSwipeRightHandlerStateChange}>
      <FlingGestureHandler
        direction={Directions.LEFT}
        onHandlerStateChange={onSwipeLeftHandlerStateChange}>

@gianmarcotoso hopefully you find this useful.

[judemorrissey]

@ShivamJoker ah! sorry i completely missed the Input part of TextInput – i tried it out, but youre right, it does not work, i reckon the problem is due to the TextInput element having its touch handlers getting priority over the FlingGestureRecognizer

i tried it with editable={false} scrollEnabled={false} too but no luck, sorry i dont know how to resolve that specific limitation youre encountering!