Draggable areas offsets in scroll views

[LucasBourgeois]

If DndProvider is above a scrollView and not directly above draggableGrid, If scrolling, the pan areas are not well positionned.
Idk if it's more a bug because of my implementation or a bug in the DndProvider.

 <DndProvider>
    <ScrollView>
		<DraggableGrid direction="row" size={3}>
                      {[1, 2, 3, 4, 5].map(i => <Draggable key={i} id={i.toString()}><Text>{i}</Text></Draggable>)}
                 </DraggableGrid>
	</ScrollView>
 <DndProvider>

Having the DndProvider directly above DraggableGrid do the tricks tho.

See videos

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

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

[yikayiyo]

It seems to be a CSS issue. You can add a border to see the size of the box. If necessary, add an overflow property to the container. @LucasBourgeois

[LucasBourgeois]

As i finally figured out what is happening, i think that it's because when using a component, RN is surrounding the content with a component named tag.
So Imo, Dnd components must nearly always be direct children or wrapped a way to do so.

Main.tsx

 <DndProvider>
   <ListComponent/>
 <DndProvider>

ListComponent.tsx

<DraggableGrid direction="row" size={3}>
      {[1, 2, 3, 4, 5].map(i => <Draggable key={i} id={i.toString()}><Text>{i}</Text></Draggable>)}
</DraggableGrid>

Rendering :

 <DndProvider>
   <ListComponent>
          <DraggableGrid direction="row" size={3}>
           {[1, 2, 3, 4, 5].map(i => <Draggable key={i} id={i.toString()}><Text>{i}</Text></Draggable>)}
          </DraggableGrid>
    </ListComponent>
 <DndProvider>

instead of :

Rendering :

 <DndProvider>
    <DraggableGrid direction="row" size={3}>
           {[1, 2, 3, 4, 5].map(i => <Draggable key={i} id={i.toString()}><Text>{i}</Text></Draggable>)}
     </DraggableGrid>
 <DndProvider>

[entropyconquers]

Hi everyone,

Regarding the issue of incorrect draggable area offsets within scroll views, I definitely faced similar positioning and gesture calculation challenges with this library. Due to these persistent difficulties and the evident lack of active maintenance here, I decided to build a new solution from scratch: react-native-reanimated-dnd.

My library is built with Reanimated 3 and RNGH, which provides a solid foundation for accurate gesture tracking and positioning, even within complex scrollable layouts. It's specifically designed to correctly calculate item positions and ensure drag behavior works as expected inside ScrollView and FlatList components.

If you're looking for an actively developed alternative that handles draggable offsets and interactions in scroll views more reliably:

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

rn-dnd-final.mp4

Hope this helps those struggling with these frustrating positioning issues!

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