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.

Sign up for GitHub

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

Jump to bottom

getRelativeCoords not work correctly on android #5810

Closed
doublelam opened this issue Mar 19, 2024 · 3 comments · Fixed by #5926
Closed

getRelativeCoords not work correctly on android #5810

doublelam opened this issue Mar 19, 2024 · 3 comments · Fixed by #5926
Labels
Missing repro This issue need minimum repro scenario Platform: Android This issue is specific to Android

Comments

@doublelam
Copy link

Description

const inRect = useCallback((point: Point, rect: Rect) => {
        'worklet';

        const coords = getRelativeCoords(containerRef, point.x, point.y);
...

 const panGesture = Gesture.Pan()
        .onBegin(() => {
            runOnJS(onBegin)();
        })
        .onUpdate((e) => {
            if (!visible) { return; }
            if (inRect({ x: e.absoluteX, y: e.absoluteY }, trashNode)) {
...

the coords is expected to be a relative value but got an absolute value.
not working on android, works well on ios.

Steps to reproduce

as official example

Snack or a link to a repository

null

Reanimated version

3.5.4 - 3.8.0

React Native version

0.72.6

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes
@github-actions github-actions bot added Platform: Android This issue is specific to Android Missing repro This issue need minimum repro scenario labels Mar 19, 2024
@github-actions GitHub Actions
Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@szydlovsky szydlovsky mentioned this issue Apr 22, 2024
Merged
@szydlovsky szydlovsky linked a pull request Apr 22, 2024 that will close this issue
Fix getRelativeCoords computing #5926
Merged
@szydlovsky
Copy link
Contributor

Hi @doublelam - indeed the function returns wrong values - it should be fixed in #5926.

github-merge-queue bot pushed a commit that referenced this issue Apr 25, 2024
@szydlovsky
Fix getRelativeCoords computing (#5926)
28618e4 
## 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>
@szydlovsky
Copy link
Contributor

@doublelam the fix got merged - it should be available in the next nightly build (around 2AM CEST time) - see npm page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Missing repro This issue need minimum repro scenario Platform: Android This issue is specific to Android
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix getRelativeCoords computing software-mansion/react-native-reanimated
2 participants
@doublelam @szydlovsky