The dragging coordinates do not follow the mouse or finger when scrolling the FlashList.

[MJRT]

Description

I want to implement scrolling the list when list item is dragging to list edge, but dragging item's translateY is unexpected, it should have same coordinates with mouse or finger.

It can reproduce on web and android, but I guess same on iOS.

Steps to reproduce

https://github.com/MJRT/translationXY-unexpected-at-scrolling

Snack or a link to a repository

https://github.com/MJRT/translationXY-unexpected-at-scrolling

Gesture Handler version

2.19.0

React Native version

0.75.4

Platforms

Android, Web

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[latekvo]

Hi @MJRT,
Thank you for reporting this issue.

I believe the behaviour visible in the attached video is expected and not a bug.
The dragged element is attached to its moving parent and not to the mouse pointer.
If you aren't actively compensating for the movement of the parent by translating the element in the reverse direction of the parent's translation, it is expected for the child to follow its parent's position.

As far as I see, in the code repro you provided, you're adjusting the element's position only by the mouse movements.
To fix this issue, you need to also adjust it by the scrolling offset.