Pinch focalX/focalY in state change callback don't match Animated values

[Ashoat]

I am working with PinchGestureHandler and using focalX/focalY variables to calculate translateX/translateY values. Everything works fine during the gesture.

When the gesture finishes, I have set up curX and curY variables, to which I offload the current values of translateX/translateY (derived from the focal coordinates). However, I have noticed that the focalX and focalY results reported to PinchGestureHandler's onHandlerStateChange do not match the values reported to the Animated.Values passed in through onGestureEvent.

On iOS this issue does not occur - the values match up. On Android however, because the values do not match up I end up with a jerky effect when the gesture resolves.

I was able to compare the values by calling __getValue() on the Animated.Values in onHandlerStateChange. On iOS all the values line up, but on Android only the scale values match - the focalX and focalY values do not.

Is this a known issue? Any ideas as to what might be causing it?

[Ashoat]

I looked into this a bit more and I think I know what's going on.

Android's ScaleGestureDetector says "the focal point is between each of the pointers forming the gesture". However, that means that at the end of the gesture, when the first finger is removed from the screen, the focal point will suddenly be redefined as the location of the second finger, rather than being between the two fingers.

I'll put up a PR in a sec that should address this edge case.

[Ashoat]

For anybody looking for a quick hack around this issue, check CommE2E/comm@3c95fd4

[Ashoat]

Turns the same issue exists on iOS, it just isn't noticed on the simulator. The "quick hack" I mentioned above does not help on iOS, but I have put up a PR that fixes the issue on both iOS and Android.

[wcandillon]

@Ashoat Is #553 a duplicate of this issue?

[Ashoat]

Not in the original formulation, but they could certainly be merged! Perhaps
the generic issue is that focal values are only valid when the state is ACTIVE. That said, I don’t think my PR above will help your case.

I’ve found it easiest to avoid looking at the focal values when the state is not ACTIVE. I’ve redesigned my logic to look at per-frame diffs, similar to how the ImageViewer demo in react-native-reanimated works. (Take a look at how scaleDiff and dragDiff work.)

In my case I’m working on an image viewer as well. If you’re curious you can see the source here.

[wcandillon]

@Ashoat Thanks for your great work regarding the PinchGestureHandler. In redash, I plan to add the following function that makes the pinch behavior consistent across Android and iOS and closer to what we would expect:

const withFocalOffset = (
  value: Animated.Node<number>,
  state: Animated.Node<State>,
  numberOfPointers: Animated.Node<number>,
  offset: Animated.Value<number> = new Value(0)
) =>
  cond(
    and(eq(state, State.ACTIVE), eq(numberOfPointers, 2)),
    [set(offset, value), offset],
    offset
  );

[gfpacheco]

Any updates on this one? I'm implementing a pan and zoom view, but I was hoping that when I removed the first finger the PanGestureHandler would take over and the pinch action was ended.

[wcandillon]

You might be interested to look at these functions from redash:
https://github.com/wcandillon/react-native-redash/blob/8449c1e8dbd7e838c209a2b19e684163bf98ba7f/packages/core/src/Gesture.ts#L49

And a full demo at https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/the-10-min/src/PinchGesture/PinchGesture.tsx