Android pointer number remains 2 when lifting one finger during pinch gesture

[znikap]

Description

When performing a pinch gesture on Android, if one finger is lifted, the numberOfPointers property incorrectly remains at 2. This causes the focal point coordinates (focalX and focalY) to shift drastically, disrupting the pinch gesture handling.

You can view the experience here (please ignore the offsets it's a quick example):

https://github.com/user-attachments/assets/f923ab0d-7874-4983-9098-d2ca1b275ef7

This only happens on android, the experience of pinching is always creating the "jumping" effect. Any help would be appreciated :3

Steps to reproduce

1. Start a pinch gesture on an Android device with two fingers.
2. Lift one finger while continuing to pinch the remaining finger.
3. Observe the values of numberOfPointers, focalX, and focalY during the onChange or onUpdate event.

Snack or a link to a repository

https://snack.expo.dev/@znikap/bug-android-on-pinch

Gesture Handler version

2.20.2, 2.24.0

UPD: Is not happening on 2.16.2

React Native version

0.74.5

Platforms

Android

JavaScript runtime

None

Workflow

Expo SDK 51

Architecture

None

Build type

None

Device

Real device

Device model

No response

Acknowledgements

Yes

[znikap]

Hey! Found out that this behavior is not happening on version 2.16.2 (works well)

[ldalzottomp]

I am upping this issue, that sounds huge. I am experiencing the same. Thanks for providing the version where the gesture works as intended.

[ldalzottomp]

A workaround for this issue would be to manually fetch the number of touches from the .onTouchesDown() and .onTouchesUp events instead.

[znikap]

@ldalzottomp Hey thanks! I solved it by tracking the number of pointers with the onTouchesDown and onTouchesUp callbacks! But still, it would be great if the devs could take a look, since this doesn't seem like expected behavior.

[haxonadora]

Add this to pinch gesture

  .onTouchesUp((e, state) => {
    if (e.numberOfTouches !== 2) {
      state.end();
    }
  })
  .onTouchesDown((e, state) => {
    if (e.numberOfTouches === 2) {
      state.begin();
    }
  })