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

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?

[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
  );

[samridhgupta]

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

@wcandillon Seems like this implementation is stale now as the redash library is rewritten in a different way.

Can you update the implementation with Redash v2