SHISME / react-native-draggable-grid

A draggable and sortable grid of react-native
315 stars 95 forks source link

Scrolling When Hitting End of Scrollview #78

Open harryrein3 opened 1 year ago

harryrein3 commented 1 year ago

Hello, I have a list of 25 items that are each 25% of the screen height. When I try to move the first item to the 10th spot, the containing scrollview does not scroll when you hit the bottom of the parent view.

Have you handled this case in your solution?

I built a custom "auto-scroller", but the issue is when you scroll the scrollview behind the scenes, the cell being dragged also scrolls since the positioning seems relative to the scrollview.

  const [startDragPosition, setStartDragPosition] = useState(scrollViewRefScrollY);
  const [isAutoDragging, setIsAutoDragging] = useState(false);
  const [dragDistance, setDragDistance] = useState(scrollViewRefScrollY);
  const handleAutoScroll = data => {
   if (!enableAutoScroll || isAutoDragging) return;
   const screenHeightRatio = (100 * data.moveY) / DEVICE.height;
   const isNearTop = screenHeightRatio < 20;
   const isNearBottom = screenHeightRatio > 80;

    if (isNearTop) {
      const totalDragDistance = dragDistance - 200;
      setIsAutoDragging(true);
      scrollViewRef?.current?.scrollTo({ y: startDragPosition + totalDragDistance, animated: true });
      setTimeout(() => setIsAutoDragging(false), 200);
      setDragDistance(totalDragDistance);
    }
    if (isNearBottom) {
      const totalDragDistance = dragDistance + 200;
      setIsAutoDragging(true);
      scrollViewRef?.current?.scrollTo({ y: startDragPosition + totalDragDistance, animated: true });
      setTimeout(() => setIsAutoDragging(false), 200);
      setDragDistance(totalDragDistance);
    }
  };

Can you assist?

arunvignesh-foodhub commented 1 year ago

Any update on the above one? If so kindly assist

harryrein3 commented 1 year ago

Nothing yet, waiting on a solution as well

MianIbrarHussain commented 1 year ago

Have anybody found the solution?