horizontal NestableDraggableFlatList auto-scrolls NestableScrollContainer vertically

[fierysolid]

trafficstars

Describe the bug When dragging an item in a horizontal NestedDraggableList (with a NestableScrollContainer) to the edge of the screen to trigger auto-scroll, the screen scrolls vertically instead of horizontally.

Additionally, the NestedDraggableLists don't scroll horizontally. I imagine this is because the NestableScrollContainer is stealing the gesture

To Reproduce Snack

Platform & Dependencies

• react-native-draggable-flatlist version: 4.0.0
• Platform: iOS 16
• React Native: 0 68.5
• Reanimated version: 2.13.0
• React Native Gesture Handler version: 2.8.0

[computerjazz]

mind posting the snack anyway? I've been having to patch in global__reanimatedWorkletInit in all my snacks, not sure what's up on their end -- see the shims file: https://snack.expo.dev/@computerjazz/draggable-flatlist-examples

[fierysolid]

Nice! I added that global directly to my App.tsx file, and it didn't work, but the shim works great. Here's the snack:

https://snack.expo.dev/@fierysolid/mad-churros

Btw, I've since fixed this in my project by deconstructing the NestableScrollContainer in my code. Essentially the NestedScrollContainer doesn't know that its children are horizontal, so it still tries to scroll vertically. Also, the NestableDraggableFlatList has scrollEnabled={false} hardcoded because I think it is assumed the nested lists will always be vertical.

The solution is that when the children are horizontal, we don't need to use the useNestedAutoScroll hook, and we need to set scrollEnabled={true} on the child lists. My recommendation would be to pass in childDirection="horizontal" to the NestedScrollContainer and have that pass down to the child lists so that it is controlled at the top level and we can set our state values from the top down as needed.

[computerjazz]

cool thanks! last question -- do you know if you actually need the NestableScrollContainer? The purpose of the container was to be able to autoscroll an outer container when using draggable lists in the same orientation as the container (eg. I have a vertically-scrollable menu with many sections that each contain a vertically-draggable list). I don't think this comes into play for you? Sounds like a good bug to squash nonetheless.

[fierysolid]

That was the first thing I tried actually. The gestures for the parent ScrollView get stolen by the FlatList children, so you need to use the ScrollContainerContext to pass information between them, so you know which one should be getting the swiping vertical vs horizontal swipe gestures.

[computerjazz]

Hm, I'm guessing the fact that the nestable version works is just a side effect of it having a default activationDistance prop, which is there for this purpose -- to prevent the children from stealing gestures: https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/src/components/NestableDraggableFlatList.tsx#L92

I bet if you added activationDistance of 20 to the regular DraggableFlatList it would work just the same.

[fierysolid]

Yeah, that worked... wow so much effort with such an easy solution. Thank you