react-native-gesture-handler: focalX and focalY are wrong on android only
Description
I am trying to implement pinch to zoom and I pretty sure my math is correct. But the focalX and focalY are wrong on android only
Android
iOS
On android, the first pinch-to-zoom behave “correct”. The last pinch-to-zoom must be wrong. I tap two points and the coordinates are x = 194.86 y = 351.61
and x = 194.32 y = 396.36
. Then I pinch and the focal point is x = 195.93 y = 464.81
. I expect the y-coord should be between two taps point. Now it is outside. 351.61 <= 464.81 <= 396.36 ❌ ❌ ❌ ❌
. x-coord has the same issue.
When you take a look iOS, it behaves correctly 313 <= 351 <= 374 ✅✅✅✅
I think the bug is on either react-native or react-native-gesture-handler. I do not think it is react or react-native-reanimated bug
Platforms
- iOS
- Android
- Web
Screenshots
Steps To Reproduce
git clone https://github.com/wood1986/pinch-bug.git
yarn android
Expected behavior
tap[0].x <= focalX <= tap[1].x
tap[0].y <= focalY <= tap[1].y
Actual behavior
focalX <= tap[0].x or tap[1].x <= focalX
focalY <= tap[0].y or tap[1].y <= focalY
Snack or minimal code example
Package versions
- React: 18.0.0
- React Native: 0.69.2
- React Native Gesture Handler: 2.5.0
- React Native Reanimated: 2.9.1
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 26 (11 by maintainers)
This should do the trick:
Your code is perfect!!! Thank you so much
FYI: I do not know if you are using my repo for testing the fix. I did a clean up with a force push. you may need to clone again
Thanks @j-piasecki, just let you know I want to help and fix it fundamentally. I have been looking at the place setLocation and trying to apply matrix transformation to the second point to see if I can get the right coordinates. But no progress.