software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
5.83k stars 952 forks source link

Pinch gesture focalX & focalY truncated on iOS #2833

Closed rrebase closed 1 month ago

rrebase commented 1 month ago

Description

The Pinch gesture focalX and focalY values seem to be rounded / truncated on iOS as all the decimal places are zeros. This makes it impossible to implement butter smooth panning during a pinch gesture.

Tracing the current code I can see that [locationInView:] is used, which has this odd inaccurate behaviour.

Steps to reproduce

import { StyleSheet } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

export default function App() {
  const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);

  const pinchGesture = Gesture.Pinch()
    .onUpdate((e) => {
      console.log("focalX", e.focalX) // 👈 logs truncated values like 70 instead of 70.123456
      scale.value = savedScale.value * e.scale;
    })
    .onEnd(() => {
      savedScale.value = scale.value;
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <GestureDetector gesture={pinchGesture}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
    marginBottom: 30,
  },
});

Snack or a link to a repository

react-native-zoom-toolkit

Gesture Handler version

2.14.1

React Native version

0.73.6

Platforms

iOS

Acknowledgements

Yes

rrebase commented 1 month ago

Possible solution that seems to work well for me: https://github.com/software-mansion/react-native-gesture-handler/pull/2834

Glazzes commented 1 month ago

As the author of the linked repository, you can find "run instructions" here as well as examples to test with, I can also confirm the lack of decimal places is what makes my library jitter as described in the mentioned issue.