React Native: Solving Auto-Scroll Behavior in Nested Drag-and-Drop

TL;DR

• Struggled with implementing drag-and-drop in React Native using nested views.
• Faced issues with auto-scroll not triggering upon reaching the edge of a scroll view.
• Discovered the responder system’s impact on event handling and auto-scroll.
• Tried simultaneous handlers for drag-and-drop and parent view scroll detection.
• Plan to use scroll refs to programmatically handle scroll behavior.

Today, I tackled a complex issue in React Native involving nested scroll views and drag-and-drop behavior. The challenge was ensuring the auto-scroll behavior activated when dragging items close to the window’s edge.

Initially, the problem arose because the drag and drop overrides the responder, preventing the expected auto-scroll. Through debugging, I learned the responder must be manually configured to allow the parent scroll view to respond to threshold events.

I experimented with simultaneous handlers for the drag-and-drop container. One handler managed the drag action, while another on the parent view identified threshold breaches and initiated scrolling.

By wrapping the draggable component within the correct context, I isolated the calcuations to adjacent list items, which unfortunately disabled auto-scrolling due to unknown interactions. This behavior prompted me to use scroll refs. I attached a reference to the parent scroll view and attempted to invoke scrolling through code when reaching the threshold.

Despite progress, it seems that a React Native upgrade altered previous behavior. Now, manual intervention is necessary where it previously was built-in. This experience has broadened my understanding of React Native’s responder system and event propagation. I’m hopeful the adjustments with scroll refs will solve the issue.