nuclearpasta / react-native-drax

A drag-and-drop system for React Native
MIT License
554 stars 68 forks source link

[iOS | Android] DragView does not return to the initial position after React Native 0.72.4 update #161

Open arthurhts opened 1 year ago

arthurhts commented 1 year ago

Hi, have a Drag and Drop feature where a card is snapped onto another card using DragView.

1

After the updates: "react-native": "0.72.4", "react-native-gesture-handler": "~2.12.0", "expo": "49.0.8",

When dragging a card out of a slot, it used to return to its original position. However, after the updates, the card remains stuck on the screen. Example:

98dce436-c92d-4851-8bec-1c47b3521272

While debugging the code, I noticed that in the useDraxRegistry hook in method resetDragInRegistry, when calling animation.start for snapback, the finished parameter is consistently being returned as false. To work around this issue, I created a patch that removes the if (finished) {} statement.

Captura de Tela 2023-08-29 às 22 06 25

I also tested with the version 2.9.0 of react-native-gesture-handler, which was the version before the update, but the issue persists. I believe the problem lies within the React Native Animated module.

As I need to quickly release a fix for my app, this was the solution. However, we need to understand why finished is always false. I believe the animation is never being initiated.

lafiosca commented 1 year ago

Thanks for the details. I have labeled the issue and will leave it open. Unfortunately the library has not been maintained/tested with newer versions of RN and RNGH, and it's possible something changed. It's been quite a while since I worked on that code, but I assume the reason I was checking for explicit finish of the animation was in case another animation interrupted it. One of the manual tests I used to perform with the Drax example project was to set a really long/slow snapback and see how the hover views behaved if I dragged somewhere, released, and then dragged again while the snapback was still happening. Sadly I do not remember more than that, and I suspect that if we were to outright remove the "finished" check like your patch does, we might break existing functionality on older versions.

LunatiqueCoder commented 1 year ago

I managed to fix this by migrating to react-native-reanimated where the finished callback works as expected. You can find more information in #165.

▶️ Here's a video of the proof of concept: https://x.com/LunatiqueCoder/status/1721982083902394694?s=20

👍 I will open a PR after we test it in production.