Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pinch gesture focalX & focalY truncated on iOS #2833

Closed
rrebase opened this issue Mar 26, 2024 · 2 comments · Fixed by #2834
Closed

Pinch gesture focalX & focalY truncated on iOS #2833

rrebase opened this issue Mar 26, 2024 · 2 comments · Fixed by #2834
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@rrebase
Copy link
Contributor

rrebase commented Mar 26, 2024

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

@github-actions github-actions bot added Missing repro Platform: iOS This issue is specific to iOS labels Mar 26, 2024
rrebase added a commit to rrebase/react-native-gesture-handler that referenced this issue Mar 26, 2024
…e-mansion#2833)

Replace `locationInView` with `locationOfTouch:inView:` in Pinch handler
to fix truncated focalX and focalY in gesture handler context.

Tested on repro example in (software-mansion#2833).
@rrebase
Copy link
Contributor Author

rrebase commented Mar 26, 2024

Possible solution that seems to work well for me: #2834

@Glazzes
Copy link

Glazzes commented Mar 26, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants