Doesn't work well with ScrollView

[waelbenmustapha]

im facing an issue where if i put the draggable grid inside a scrollView it will start acting a little weird , i tried multiple methods like disabling scrollview when onDragStart but nothing worked .

[waelbenmustapha]

i changed this in the node modules and it worked , i created a fork and made the changes so i can use it now because i have a demo tomorrow but i would love if you can make the change to this repo , thanks a lot and great job ` function setActiveBlock(itemIndex: number, item: YourItemType): void { if (item.disabledDrag) return;

setPanResponderCapture(true);

if (props.onDragWillStart) {
  props.onDragWillStart();
}

setActiveItemIndex(itemIndex);

}`

[GreenFella]

this didnt work for me

[OfficialPesonen]

i changed this in the node modules and it worked , i created a fork and made the changes so i can use it now because i have a demo tomorrow but i would love if you can make the change to this repo , thanks a lot and great job ` function setActiveBlock(itemIndex: number, item: YourItemType): void { if (item.disabledDrag) return;

setPanResponderCapture(true);

if (props.onDragWillStart) {
  props.onDragWillStart();
}

setActiveItemIndex(itemIndex);

}`

Where does the onDragWillStart come from? Did you get this work with scroll view, I'd love to get some help with this.

[GreenFella]

i changed this in the node modules and it worked , i created a fork and made the changes so i can use it now because i have a demo tomorrow but i would love if you can make the change to this repo , thanks a lot and great job ` function setActiveBlock(itemIndex: number, item: YourItemType): void { if (item.disabledDrag) return;

setPanResponderCapture(true);

if (props.onDragWillStart) {
  props.onDragWillStart();
}

setActiveItemIndex(itemIndex);

}`

Where does the onDragWillStart come from? Did you get this work with scroll view, I'd love to get some help with this.

I've got a separate solution that worked for me, no need to edit the node modules file. @OfficialPesonen

const scrollViewRef = useRef(null);

const onDragStart = () => {
  if (scrollViewRef.current) {
    scrollViewRef.current.setNativeProps({ scrollEnabled: false });
  }
};

const onDragEnd = () => {
  if (scrollViewRef.current) {
    scrollViewRef.current.setNativeProps({ scrollEnabled: true });
  }
};

<ScrollView ref={scrollViewRef}>
  <DraggableGrid
       onDragRelease={(newData) => {
            onDragEnd() //This activates the above onDragEnd function when you stop dragging and just turns scrolling back on
        }}
        onDragStart={onDragStart} //This activates the above onDragStart function when you start dragging and turns scrolling off
   />
</ScrollView>

[kennethzuniga]

I'm experiencing the same issue, unfortunately @GreenFella solution didn't work for me. In my case, this problem only happens on Android by the way. Even if I disable the ScrollView using onDragStart the grid will still freeze as soon as I start dragging. It only works if I move DraggableGrid component out of the ScrollView, which I can't do due to UI requirements.

UPDATE: After testing, I found out the issue was that the my ScrollView and DraggableGrid were inside a navigation modal screen. So the problem wasn't caused by the ScrollView but modal screen itself which is also draggable to hide by sliding it down. I'm now using a normal navigation screen and the problem is gone.

[mapledan]

Try using the onDragItemActive event to set the scrollEnabled state of the ScrollView to false. Then, on the onDragRelease event, set the state back to true.

[anjalijspaceo]

i changed this in the node modules and it worked , i created a fork and made the changes so i can use it now because i have a demo tomorrow but i would love if you can make the change to this repo , thanks a lot and great job ` function setActiveBlock(itemIndex: number, item: YourItemType): void { if (item.disabledDrag) return;

setPanResponderCapture(true);

if (props.onDragWillStart) {
  props.onDragWillStart();
}

setActiveItemIndex(itemIndex);

}`

Where does the onDragWillStart come from? Did you get this work with scroll view, I'd love to get some help with this.

I've got a separate solution that worked for me, no need to edit the node modules file. @OfficialPesonen

const scrollViewRef = useRef(null);

const onDragStart = () => {
  if (scrollViewRef.current) {
    scrollViewRef.current.setNativeProps({ scrollEnabled: false });
  }
};

const onDragEnd = () => {
  if (scrollViewRef.current) {
    scrollViewRef.current.setNativeProps({ scrollEnabled: true });
  }
};

<ScrollView ref={scrollViewRef}>
  <DraggableGrid
       onDragRelease={(newData) => {
            onDragEnd() //This activates the above onDragEnd function when you stop dragging and just turns scrolling back on
        }}
        onDragStart={onDragStart} //This activates the above onDragStart function when you start dragging and turns scrolling off
   />
</ScrollView>

It worked for me