search

wix-incubator / react-native-interactable

Experimental implementation of high performance interactable views in React Native
MIT License
5.19k stars 514 forks source link

Toss detection - if tossed left, right, or not tossed #153

Open Noitidart opened 7 years ago

Noitidart commented 7 years ago

I want to create a row drawer, that doesn't snap. I want to know if the user just dragged left and released, or if the user dragged left then tossed right. If the user tosses right I want to cancel the event. If the user just released I want to trigger a function.

Is this possible?

Noitidart commented 7 years ago

I did some funky thing which works but is not 100% fool proof. To the _deltaX animated value, I attached a listener, whenever direction changes (left/right) I set this.lastGoingLeftX or this.lastGoingRightX. Then I am using an onDrag handler and when I get state of end in it, I compare if the x received in this drag handler is equal to this.lastGoingLeftX or this.lastGoingRightX, this works, but the problem is, x is not always exactly this.lastGoingLeftX or this.lastGoingRightX.

Noitidart commented 7 years ago

Here is a screencast of demonstrating why I needed toss direction.

As user drags left, it increases price, as they drag right it reduces price. If they "release" it accepts that price and starts a fetch. If they toss right while it is in the fetch it cancels the request, screencast:

https://gfycat.com/IgnorantImmaculateCub

GavinThomas1192 commented 6 years ago

can you share the source code? I don't understand how to add an event listener to the _deltax object. I am using the demo code and need the left and right swipe backgrounds to change color. It currently works, but only once the user lets go of the row. I need to it to change immediately like your demo.