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.85k stars 954 forks source link

[Web] Fix incorrect `startX` and `startY` values in `Pan` #2871

Closed m-bert closed 3 weeks ago

m-bert commented 3 weeks ago

Description

After solving #2868 it was found out that manualActivation may result in wrong translation values. The problem here is that onPointerDown method doesn't set startX and startY value. What is important, these values are also assigned in resetProgress method.

Without manual activation, handler first calls onPointerDown, and then resetProgress, therefore values of startX and startY are correct. On the other hand, in the snippet below handler first calls resetProgress and then onPointerDown, that's why both startX and startY are still 0.

Test plan

Tested on the following code mentioned in #2868

Test code ```jsx import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { useAnimatedStyle, useSharedValue, } from 'react-native-reanimated'; export default function App() { const left = useSharedValue(0); const panGesture = Gesture.Pan() .manualActivation(true) .onTouchesDown((e, stateManager) => { stateManager.activate(); }) .onUpdate((e) => { console.log(e.translationX); left.value = e.translationX; }); const animatedStyle = useAnimatedStyle(() => { return { transform: [{ translateX: left.value }], }; }); return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'yellow', }, square: { top: 150, height: 100, width: 100, backgroundColor: 'red', }, }); ```