Open waelbenmustapha opened 11 months ago
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);
}`
this didnt work for me
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 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>
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.
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
.
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
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 .