DndProvider prevent scroll in scrollView

[LucasBourgeois]

If having a DndProvider taking the whole scrollView place, i can't scroll.
DndProvider shouldn't control gesture but it touched target is a draggable ?

DndProvider is in blue background.
If scroll down on blue nothing happens

Enregistrement.de.l.ecran.2024-12-17.a.12.20.43.mov

[leosilberg]

I'm also experiencing this issue with scrolling , is there a way to solve this using activationDelay and minDistance props of the DndProvider?

[leosilberg]

This is the use case I'm trying to achieve - a column of draggablestacks which the column can be scrolled down

 <ScrollView>
      <DndProvider style={{ flexDirection: "column", gap: 16 }}>
        {rows?.map((row, index) => ( 
           <DraggableStack
              direction="row"
              gap={10}
              onOrderChange={onStackOrderChange}
            >
              {row?.map((job) => (
                <Droppable key={job._id} id={job._id} data={{ job }}>
                  <Draggable id={job._id} data={{ job }} activeOpacity={1}>
                    <JobCard job={job} />
                  </Draggable>
                </Droppable>
              ))}
            </DraggableStack>
        ))}
      </DndProvider>
    </ScrollView>

So far I have patched the DndProvider code and made progress on web and mobile.

The web fix

Mobile fix

@mgcrea Thank you for your work on this library I have found it to be the most up to date Dnd library for native, it would be great to have this resolved if you have time to look into the above

[LucasBourgeois]

Using activationDelay and minDistance props seems to do the trick !
at least, when scrolling (with finger touching the blue area) on DndProvider using activationDelay={600} minDistance={1000}; i can scroll down my scroll view with no issue !

It seems that its more a thing about having a delay greater than scroll event.
If i remember well, 600 is the minimum, but it's purely arbitrary

[leosilberg]

@LucasBourgeois do you have a resource to share for those numbers or it was through testing ?

Can you also confirm if it works for you on web for mobile devices?

I was able to use activationDelay and minDistance for mobile native but still got stuck on web , only managed to scroll by patching the DndProvider <GestureDetector ... touchAction="pan-y">

[Kenddriz]

With my code below, I can scroll vertically, someone has an idea to scroll only DraggableGrid content ?
I want also to sync drag item to scroll position.

const items: string[] = new Array(10)
.fill(0)
.map((_, index) => String.fromCharCode(index + 65));

const DraggableGridExample: FunctionComponent = () => {
const scrollOffsetY = useRef(0);
const scrollViewRef = useRef(null); // Ref for ScrollView

const [data, setData] = useState<ObjectWithId[]>(
    items.map((letter, index) => ({
        id: `${index}-${letter}`,
        value: letter,
    })),
);
const { width: screenWidth, height: screenHeight } = useWindowDimensions();
const itemWidh = screenWidth * 0.95;
const onGridOrderChange: DraggableGridProps['onOrderChange'] = value => {
    console.log(value);
};

const onScroll = (e: any) => {
    scrollOffsetY.current = e.nativeEvent.contentOffset.y;
};

const maybeScroll = (y: number) => {
    const EDGE_THRESHOLD = 100;
    const SCROLL_STEP = 10;

    // Scroll down
    if (y > screenHeight - EDGE_THRESHOLD) {
        scrollViewRef.current?.scrollTo({
            y: scrollOffsetY.current + SCROLL_STEP,
            animated: false,
        });
    }

    // Scroll up
    if (y < EDGE_THRESHOLD) {
        scrollViewRef.current?.scrollTo({
            y: Math.max(scrollOffsetY.current - SCROLL_STEP, 0),
            animated: false,
        });
    }
};

const onUpdate: DndProviderProps['onUpdate'] = event => {
    'worklet';
    runOnJS(maybeScroll)(event.y);
};

const handleDragEnd: DndProviderProps['onDragEnd'] = ({ active, over }) => {
    'worklet';
    if (over) {
        console.log(`Current count is ${active.data.value.count}`);
    }
};

return (
    <GestureHandlerRootView style={{ backgroundColor: 'white', flex: 1 }}>
        <Text>DraggableGrid{'\n'}Example</Text>
        <ScrollView
            ref={scrollViewRef}
            style={{ flex: 1 }}
            scrollEventThrottle={16}
            onScroll={onScroll}
        >
            <DndProvider
                activationDelay={200}
                minDistance={200}
                onDragEnd={handleDragEnd}
                onUpdate={onUpdate}
            >
                <DraggableGrid
                    direction="row"
                    size={1}
                    style={{
                        gap: 10,
                        width: itemWidh,
                    }}
                >
                    {data.map(item => (
                        <Draggable
                            key={item.id}
                            data={item}
                            id={`${item.id}`}
                            style={{
                                height: 100,
                                width: itemWidh,
                                backgroundColor: 'red',
                            }}
                        >
                            <Text>{`${item.value}`}</Text>
                        </Draggable>
                    ))}
                </DraggableGrid>
            </DndProvider>
        </ScrollView>
    </GestureHandlerRootView>
);

};

export default DraggableGridExample;

[entropyconquers]

Hi everyone,

I see many of you are struggling with issues like scrolling being blocked/broken within ScrollView or FlatList components when using this DndProvider (as mentioned in #46, #45, #43, #36, #17). I know how incredibly frustrating this can be, as I faced these exact same problems and found no clear solutions or active maintenance here. This ultimately led me to build my own drag-and-drop library from scratch: react-native-reanimated-dnd.

My library is built with Reanimated 3 and RNGH, and it's specifically designed to handle scroll interactions within FlatList and ScrollView components smoothly. It supports auto-scrolling when dragging items near the edges of scrollable containers, and gestures are managed to allow both dragging and scrolling as expected.

If you're looking for an actively developed alternative that addresses these persistent scrolling and gesture conflicts, I'd encourage you to check it out:

GitHub Repo: https://github.com/entropyconquers/react-native-reanimated-dnd
Video Demo :

rn-dnd-final.mp4

Hope this can save some of you the headaches I went through!

Best,
entropyconquers (Author of react-native-reanimated-dnd)

[leosilberg]

@entropyconquers thanks for your work on this feature, do you plan on including a Flashlist and legend-list components ?

[LucasBourgeois]

@entropyconquers Ive an additional question:
Ive encountered a main issue, but managed to fix it by adding a key to my DnDProvider (from this repo not yours) which is updated each time my items.lengh changes.

In short : It's a picture gallery, so i can add / remove items then reorders them without leaving the view.
After changing the number of items, reordering it was causing an issue of item positioning.
ex: ive added an item, reordering an other item after the added one, the added one goes out of screen for an unknown reason.

Did you rethink the way how datasource is managed to handle dynamic datasource?

Still, ill give a try to your repo 👌

regards