computerjazz
Drag with onPressIn not working with scrollable list on Android
Describe the bug Dragging often does not work as expected on Android when the list is large enough to scroll (I am using Android 13 on a Pixel 4a).
When there are enough elements in the list to enable scrolling and I scroll to the middle of the scrollview, then start dragging an item with onPressIn immediately after pressing down, the screen will scroll slightly, the item may move a little, and isActive will be set to true for that item. Then after .25 seconds or so as I try to move up/down the screen, neither the screen scrolls nor the item drags. If I release the press, isActive is still set to true for that item and the item is stuck mid-transition in the ui. If I press down again anywhere on the screen and start moving, that item will start moving again and then de-activate properly on the next release.
The above behavior happens nearly every time if I start moving immediately after pressing down. I've gotten it to happen with onLongPress as well, but it's more obvious/reproducable with onPressIn.
The versions noted below are for my app, although I am able to reproduce this bug with the following snack on Android, which has the same package versions as the example snack from this repo. I am using the nestable list so I used that in the snack.
To Reproduce Snack
Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).
- react-native-draggable-flatlist version: 4.0.1
- Platform: Pixel 4a, Android 13
- React Native version: 0.71.3 (not Expo managed)
- Reanimated version: 2.14.4
- React Native Gesture Handler version: 2.9.0
Sadly the same thing happens to me on iOS. I tried to disable the scroll on drag but it didn't work. I couldn't find any hack to make it work correctly for this case.
Sadly the same thing happens to me on iOS. I tried to disable the scroll on drag but it didn't work. I couldn't find any hack to make it work correctly for this case.
Dang figured it was only Android, I'm not testing against iOS. The snack seems to work fine on the web.
I just added a PR that (in my case) makes the propagation of events between the pan gesture and the FlatList more reliable, in case you want to do some testing. I hope it will be useful 🙏
Copied the changes locally, unfortunately it seems to lock up scrolling when the issue would have occurred (Android).
Hi @iRockE, could you try again? I created a new PR (from scratch) with new adjustments using only the simultaneousHandlers to avoid problems in the current implementation.
(For my case) the scrolling seems to work correctly on both platforms (Android / iOS) and even more reliably.
Again, I hope it is useful and works correctly for you 🙏
No luck. Sometimes dragging quickly works, but most of the time the same bug happens and if I press down again, scrolling is locked and the item doesn't drag unless I start a new drag (then scrolling will unlock).
Weird, are you sure it is taking the changes from my PR? By chance, could you share a piece of code to see what you are doing? Is it the same as the one in the snack? It would be very useful.
Yeah the behavior changed when I copied the most recent changes.
My usage is pretty straightforward, basically what is in the snack. A couple of NestableDraggableFlatList components inside of a NestableScrollContainer component, with drag firing from onPressIn on a handle in the rendered list item, with enough items in the list to where you need to scroll.
If you can apply your changes to that snack I can test it. I'm not sure how to reference your package without it being published with the appropriate types, etc.
I'm facing the exact same issue as well. @outaTiME I also tried you fix locally, didn't help sadly :/ On android it's even worst : dragin start and stop instantly. I guess when starting to drag, the NestableScrollContainer scroll is kind of stopped and then the drag stop as well.
