DraxScrollView autoscroll causing weird behavior when dragging

[ajstokar]

Hi @lafiosca ! The library has been working well for us. One question that came up recently. I have a DraxScrollView as shown below. The problem is, when I drag an item to the bottom, the autoscroll kicks in, but then I lose the item I am dragging. It's almost as if when I get to the bottom of the View, it triggers a drop event and the item I'm dragging disappears. Any idea why this would happen? Thanks as always!

<DraxScrollView
                    key={'drag-view-' + scrollViewKey}
                    contentOffset={scrollContentOffset}
                    style={styles.scrollContainer}
                    onScrollEndDrag={(event) => {
                        handleLogScrollEnd(event.nativeEvent.contentOffset);
                    }}
                    onMomentumScrollEnd={(event) => {
                        handleLogScrollEnd(event.nativeEvent.contentOffset);
                    }}>
                    {items.map((meal, idx) => (
                        <Item
                            key={'m-' + idx}
                        />
                    ))}
                    <View style={{paddingBottom: 70}} />
                </DraxScrollView>

[lafiosca]

Is this happening on iOS or only Android?

[ajstokar]

iOS. I also noticed that when this occurs, if I scroll down again in the ScrollView, it autoscrolls me back to the top.

[lafiosca]

That is certainly odd. At first I thought it was related to #2, but that was Android-only (at least back on RN 0.61). Could you possibly share more of your code? It's not clear what an Item is. Or preferably, can you create a minimal reproduction of the issue in a Snack?

[ajstokar]

As I was building out the Snack I recognized where the issue is happening. I use the onScrollEndDrag and onMomentumScrollEnd events to track the contentOffset of the DraxScrollView. The reason I need to do this is when the user scrolls down, then performs an action on the list, I re-render the entire list (because the height could change). When I re-render, I have to set the contentOffset to where the user had scrolled before rendering. If I just use the onScrollEndDrag handler, the DraxScrollView works correctly. If I use onScroll or onMomentumScrollEnd, it interrupts the drag when I get to the bottom of the view and the DraxView I am dragging disappears.

Can you think of a better way for me to track the last scroll position? Is there a different scroll event I can use that doesn't interfere with the Drax library?

Additionally, I need to know where the scroll position is when autoscroll kicks in on a drag to the bottom. Is there anyway to get that value easily?

Thanks as always!

[lafiosca]

For your final question, it seems to suggest a feature request of autoscroll lifecycle events.

Regarding the former, and perhaps also relevant to the other issue I referenced, I have been thinking that perhaps Drax needs a way to continue with a drag even if the original DraxView goes away or re-renders, although I’m not certain that will even be possible with react-native-gesture-handler as it’s currently used.

It’s not clear to me in the meantime what possible workarounds you may have. I’m guessing that whenever you do what you’re doing, most likely the react-native-gesture-handler gesture is ending; or second most likely, the DraxView is unregistering from Drax and causing the drag to reset. (Note: I have not looked into the code at all and am posting this from my phone.)