Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix
getRelativeCoords
computing (#5926)
## Summary Inspired by #5810, seems like `getRelativeCoords` wrongly computes relative cords. For some reason, an absolute point was being compared to relative cords of given component (`x` and `y` from `measure` instead of `pageX` and `pageY`). ## Test plan You can run the following code (start a pan gesture from the pink square and the coords are computed at the point of gesture end relatively to the purple square - see console logs): <details><summary>Code</summary> ``` TYPESCRIPT import React from 'react'; import Animated, { useAnimatedRef, getRelativeCoords, } from 'react-native-reanimated'; import { View, StyleSheet } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; export default function EmptyExample() { const aref = useAnimatedRef(); const panGesture = Gesture.Pan().onEnd((event) => { const coords = getRelativeCoords(aref, event.absoluteX, event.absoluteY); console.log(coords); }); return ( <View style={styles.container}> <Animated.View style={[styles.parentView, { backgroundColor: 'green' }]} /> <Animated.View ref={aref} style={styles.parentView}> <GestureDetector gesture={panGesture}> <Animated.View style={styles.box} /> </GestureDetector> </Animated.View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, parentView: { width: 200, height: 200, backgroundColor: 'purple', justifyContent: 'center', alignItems: 'center', }, box: { width: 100, height: 100, backgroundColor: 'pink' }, }); ``` </details>
- Loading branch information