drag and drop on an item and multiple lists

[username14415]

1. Does the library support dropping one item onto another item? Something like this:
   Something like this: https://atlassian.design/components/pragmatic-drag-and-drop/examples#grid

2. Is it possible to create a board view, something like this?
   https://atlassian.design/components/pragmatic-drag-and-drop/examples#board

3. Why the lib is so heavy? the package shows 1MB without deps

[MatiPl01]

Hey @username14415!

1. Are you referring to this grid example?

Screen.Recording.2025-11-26.at.22.57.13.mov

My main goal with this library was to support item sorting, not swapping one with another one, so by default this behavior is not supported. I think I can add this behavior if you need it, though.

This is what I got after a while of experimenting. It doesn't have the active item duplication, where the one stays at the initial place and the other moves with a finger as this would be a bit more complex to implement. Take a look if this looks fine for you:

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-11-27.at.00.39.51.mp4

2. Unfortunately, not yet. I started implementing this feature some time ago but never had enough time to finish the implementation. Here are 2 initial PRs that added some basics: 1, 2.

3. source code + all files converted to JS in a separate dir + types extracted from sources in a separate dit. Also, there are multiple different features which add up to the package size because of the amount of code required to implement them.

[username14415]

1. Yes, but I need a callback when an item is dropped onto another.
   My use case: I'm building something like a file explorer (similar to Dropbox). When a user "drag and drop" a file onto a folder and the file should be moved into that folder.

2. Ok. It's useful for a kanban board :D

3. Ok.

[MatiPl01]

1. So, basically, you don't need sorting at all, and you want to just have the drag and drop functionality? Is it something like this? It is quite hacky because the library was not meant for this purpose, but seems to work well on this example:

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-11-27.at.08.24.07.mp4

Alternatively, you can try using a different library, like this one, but it doesn't seem to be well-maintained as there are much more open issues than closed.

2. Yes, I know, but it is hard to get it working right and smooth, and I recently don't have much time to experiment with new complex features. I hope I will have more time in the future to get back to that. You can always try to implement it on your own or, if you want to, you can try to add this feature to this library.

[username14415]

1. Actually, I need both :)
   I have a sortable drag-and-drop explorer, something like this:
   https://atlassian.design/components/pragmatic-drag-and-drop/examples#tree

And I also have a regular drag-and-drop explorer like Dropbox - where the user can move folders but not reorder them, as you noticed.

I've seen that library, but it looks abandoned.

2. No problem - by the way, great work!

[username14415]

@MatiPl01 Could you share your code showing how to achieve this effect?

[MatiPl01]

Sure, here is the source code

Source Code

import { useCallback, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);

export default function PlaygroundExample() {
  const [data, setData] = useState(DATA);

  const renderItem = useCallback<SortableGridRenderItem<string>>(
    ({ item }) => (
      <View style={styles.card}>
        <Text style={styles.text}>{item}</Text>
      </View>
    ),
    []
  );

  return (
    <View style={styles.container}>
      <Sortable.Grid
        columnGap={10}
        columns={3}
        data={data}
        renderItem={renderItem}
        reorderOnDrag={false}
        rowGap={10}
        strategy='swap'
        onDragEnd={params => {
          console.log(
            'item',
            params.key,
            'moved from',
            params.fromIndex,
            'to',
            params.toIndex,
            `(${params.data[params.toIndex]})`
          );
          setData(params.data.filter(item => item !== params.key));
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: '#36877F',
    borderRadius: 12,
    height: 96,
    justifyContent: 'center'
  },
  container: {
    padding: 16
  },
  text: {
    color: '#FFFFFF',
    fontSize: 14,
    fontStyle: 'normal',
    fontWeight: '600',
    letterSpacing: 0,
    lineHeight: 20
  }
});