Feature/draggable flatlist

[leosilberg]

Hi @mgcrea

I would appreciate your feedback on this feature. I'm trying to use the DraggableStack hook on a flatlist component, one of the issues I found was the findActiveLayoutId function not being able to match the correct layout due to the gesture event position which doesn't account for scroll offset.

After adding a scrollOffset to the DndProvider I have managed to reorder with the correct layout being found. Are there any other functions which would need to account for the scrollOffset such as draggableOffsets?

[mgcrea]

Hi, thank you for the PR, I had worked on a DraggableFlatList in the past but never ended up pushing it due to complex drag & scroll issues (drag an item and try to scroll with it to drop it somewhere else of-screen), did only target iOS at the time but might worth a revisit.

I don't use react-native on the web so it's not currently the focus of the library. The code should first work well on iOS then Android then Web as a bonus.

Anyway would be nice to have a working DraggableFlatList component!

I will investigate a bit my past work vs. this PR.

[leosilberg]

Hi

I've been working on resolving the drag and scroll issue. Currently the logic for activating scroll updates while dragging is as follows

Scroll forward

When the draggable position + its size is greater than the size of the FlatList container + the current scroll offset

Scroll backward

When the draggable position - its size is less than the current scroll offset

Basically it's checking if the draggable is at the edge of the visible container and needs to activate scroll.

Are there any improvement to make with regards to this and the Reanimated functions added for better performance?

The next step would be to update the draggable layout offsets in the useDraggableStack hook as well , but I'm unsure exactly which offsets if you could explain a bit where to focus that be great