Add onPress event to sortable.handle that fires when a drag gesture doesn't meet a minimum threshold for drag distance

[GNUGradyn]

Hi! I'm rewriting an older app of mine. This app features drag & drop sorting as shown below.

screen-20250518-113503.mp4

However the drag & drop code is pretty bad especially compared to yours so this time I'm using react-native-sortables which has been excellent. However as you can see, clicking a draggable item in this app performs an action (opens the little rename/icon dialog at the bottom). The way I did this is by treating any drag events under a certain distance threshold as taps instead of drags. This functionality appears to be missing from react-native-sortables.

Thanks!

[MatiPl01]

Hey @GNUGradyn!

The Sortable.Handle component wasn't meant to handle press events. There are other components like Sortable.Pressable, which have onPress prop but they work in the similar way to RN's Pressable components, so if the touch gesture is cancelled for them, e.g. when you move your finger too far, then the onPress callback won't be called.

Isn't this simple onPress event handling enough? Would you like to be able to somehow customize when the press gesture is cancelled on the Pressable or component by setting the max offset that the finger can move?

I don't think that the Sortable.Handle component is the right place to add this functionality and it seems that Sortable.Pressable or similar touchable component would be a better place. What do you think about that?

[GNUGradyn]

hmm, I tried this

<Sortable.Handle key={x.key}>
    <Sortable.Pressable onPress={() => { Alert.alert("test") }}>
        {x}
    </Sortable.Pressable>
</Sortable.Handle>

but even if im careful not to drag at all with a mouse in the emulator, it does a drag and the alert is not shown unless I double tap/click. Same result with Sortable.TouchableOpacity. I am wrapping the pressable in a Handle because I have customHandle enabled because that add button at the end there in the video needs to be fixed. Might be worth noting I have dragActivationDelay={0} because this is in an "edit mode" where the user is actively editing the screen.

firefox_JF6X57rtIH.mp4

as you can see, dragging works and double tapping works but a single tap does not. Thanks! Appreciate the help

[MatiPl01]

Try nesting Sortable.Handle within the Sortable.Pressable. This is how it is meant to be used.

I also don't understand why you are using Sortable.Handle if you need the entire item to be draggable, which is a default behavior.

If none of these works, there is something wrong and I should take a look at this problem.

[GNUGradyn]

Putting the pressable on the outside yields the same result. Since one of the elements needs mode="fixed" I have to enable customHandle which means all items need handles which is why they are wrapped entirely in handles

[MatiPl01]

Ok, thanks for explanation. I will look at the issue then and see what can be done.

[MatiPl01]

Hey @GNUGradyn!

I think I managed to implement a correct solution. I had to rewrite some logic and finally merged a fix #377. I am planning to add some more changes before the next version release but I am letting you know in case you might want to clone the repo and test these changes out in the example app.

[MatiPl01]

Released in 1.7.0 🚀