feat: onDragMove prop

[lorenzogonnelli]

This pull request introduces the onDragMove callback to the sortable components, allowing for more granular control and feedback during drag operations. The key changes include adding the onDragMove callback to various components, updating type definitions, and documenting the new callback.

Callback Integration:

• example/app/src/examples/SortableFlex/features/CallbacksExample.tsx: Added onDragMove callback and integrated it into the CallbacksExample component. [1] [2] [3]
• example/app/src/examples/SortableGrid/features/CallbacksExample.tsx: Added onDragMove callback and integrated it into the CallbacksExample component. [1] [2] [3]

Type Definitions:

• packages/react-native-sortables/src/types/props/shared.ts: Added DragMoveCallback and DragMoveParams type definitions, and updated SortableCallbacks to include the new onDragMove callback. [1] [2] [3] [4]

Component Updates:

• packages/react-native-sortables/src/constants/props.ts: Added onDragMove to the default shared props.
• packages/react-native-sortables/src/providers/SharedProvider.tsx: Integrated onDragMove into the SharedProvider component. [1] [2]
• packages/react-native-sortables/src/providers/shared/DragProvider.ts: Integrated onDragMove into the DragProvider component and ensured it is called during drag operations. [1] [2] [3]## Description

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-sortables-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 28, 2025 10:20am

[lorenzogonnelli]

Hi @MatiPl01, sorry i wouldn't want to make you crazy hehe, i need this prop because i have a trash element with position absolute on the bottom of my page and i would like for the item to be deleted as soon as the user snap it on top of it. Currently there are no way to detect the coordinates of the dragged element. WIth this prop, you will be able to.

[MatiPl01]

Hey @lorenzogonnelli

I was wondering what is the use case of this change so thanks for explaining that. I think that this is an useful change and I will review this PR later on today.

After a quick look on the code, I have a small concern related to the callback implementation. You use this helper hook that I also used for other callbacks, like onDragStart but it uses runOnJS to call the callback from the JS thread (it makes things easier for the library users as they don't have to pass a reanimated worklet function). It is good as long as it is not called too often.

Since your callback is called on every little movement of the item, I would prefer not to use runOnJS and require passing a worklet function instead. I can give you a code snippet with a suggestion how to change this it you wish when I will be reviewing your PR later on today.

Thanks again for the contribution!

[lorenzogonnelli]

Hey @lorenzogonnelli

I was wondering what is the use case of this change so thanks for explaining that. I think that this is an useful change and I will review this PR later on today.

After a quick look on the code, I have a small concern related to the callback implementation. You use this helper hook that I also used for other callbacks, like onDragStart but it uses runOnJS to call the callback from the JS thread (it makes things easier for the library users as they don't have to pass a reanimated worklet function). It is good as long as it is not called too often.

Since your callback is called on every little movement of the item, I would prefer not to use runOnJS and require passing a worklet function instead. I can give you a code snippet with a suggestion how to change this it you wish when I will be reviewing your PR later on today.

Thanks again for the contribution!

Sure! Thanks for pointing this out. I understand the concern, and that makes sense. A snippet with a suggested change would be really helpful—I’ll wait for your review and update the PR accordingly.

[MatiPl01]

Very good quality and clean PR. Thanks a lot!

I left just 2 comments suggesting to add docs changes in a separate PR.

I know that I asked you in a comment left before to change the onDragMove callback to not to use runOnJS (used by useJSStableCallback callback wrapper) but I decided that I will refactor callbacks usage later on to determine in the library itself if the callback provided by the user is a worklet function or not, so you don't have to make any changes now. I will change callbacks to automatically detect if the function is a worklet by using the reanimated's isWorkletFunction function.

[lorenzogonnelli]

Very good quality and clean PR. Thanks a lot!

I left just 2 comments suggesting to add docs changes in a separate PR.

I know that I asked you in a comment left before to change the onDragMove callback to not to use runOnJS (used by useJSStableCallback callback wrapper) but I decided that I will refactor callbacks usage later on to determine in the library itself if the callback provided by the user is a worklet function or not, so you don't have to make any changes now. I will change callbacks to automatically detect if the function is a worklet by using the reanimated's isWorkletFunction function.

Thanks! You've spared me some time ahah, anyways I've proceeded to do everything you asked, the docs change are in a separate PR i just opened :)
Thank you

[MatiPl01]

@lorenzogonnelli
FYI: I implemented smarter callbacks handling in the #326 PR. Now, when you add a 'worklet' string at the beginning of the function passed as a callback, it will run on the UI thread without needing to jump from the UI to the JS thread as it was doing before, hence it should be more performant.

[MatiPl01]

🎉 This issue has been resolved in version 1.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀