react-native-draggable-flatlist icon indicating copy to clipboard operation
react-native-draggable-flatlist copied to clipboard

fix: bad initial scrollInit value causes auto-scroll when drag begins

Open justinjaeger opened this issue 9 months ago • 0 comments

Thank you for your work on this project!

Problem:

  • lists auto-scroll unnecessarily when drag begins when scrollY is not at 0

Reproduce:

  • scrolled down the draggable list any amount
  • trigger the "drag"
  • component auto-scrolls unnecessarily, then stops

This is especially noticeable if you increase the auto-scroll speed, as it can displace the dragging item by multiple slots before you move your finger.

Technical problem:

  • in the useAnimatedReaction hook in animatedValueContext.tsx, the scrollInit value updates in the render AFTER activeIndexAnim is set. Therefore, autoScrollDistance triggers, but with an initially-inaccurate scrollInit. On the next render, scrollInit is accurate, but it's too late because the auto-scroll animation already caused a jump

Solution:

  • initialize scrollInit to -1, resetting the value when the active index resets. While it's -1 (uninitialized), force autoScrollDistance to return zero.

Before: https://github.com/computerjazz/react-native-draggable-flatlist/assets/66435161/c132b0c2-9165-4081-9525-287de7dd6cfa

After:

https://github.com/computerjazz/react-native-draggable-flatlist/assets/66435161/d6350655-e091-443f-882b-c0149acdf5e8

justinjaeger avatar May 05 '24 23:05 justinjaeger