Skip to content

Commit

Permalink
Fix getRelativeCoords computing (#5926)
Browse files Browse the repository at this point in the history
## 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
szydlovsky committed Apr 25, 2024
1 parent ae12887 commit 28618e4
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 12 deletions.
1 change: 1 addition & 0 deletions app/src/examples/RuntimeTests/RuntimeTestsExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import './tests/animations/withTiming/basic.test';
import './tests/animations/withTiming/colors.test';
import './tests/animations/withTiming/arrays.test';
import './tests/animations/withTiming/enteringColorsSnapshots.test';
import './tests/getRelativeCoords/relativeCoords.test';

export default function RuntimeTestsExample() {
return <RuntimeTestsRunner />;
Expand Down

0 comments on commit 28618e4

Please sign in to comment.