React Native Reanimated DnD

https://react-native-reanimated-dnd.netlify.app/docs/intro
Admin
React Native Reanimated DnD is a powerful, performant, and comprehensive drag-and-drop library for...
Tokens:1,234
Snippets:20
Trust Score:7.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### React Native DnD Quick Example

Source: https://react-native-reanimated-dnd.netlify.app/docs/intro/index

A basic implementation of drag-and-drop using React Native Reanimated DnD, Gesture Handler, and Reanimated. It demonstrates a draggable item and a droppable area with console logging on drop.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider, Draggable, Droppable } from 'react-native-reanimated-dnd';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider>
        <View style={{ flex: 1, padding: 20 }}>
          <Draggable data={{ id: '1', name: 'Task 1' }}>
            <View style={{ padding: 20, backgroundColor: '#e3f2fd' }}>
              <Text>Drag me!</Text>
            </View>
          </Draggable>

          <Droppable onDrop={(data) => console.log('Dropped:', data)}>
            <View style={{ padding: 40, backgroundColor: '#f3e5f5', marginTop: 20 }}>
              <Text>Drop here!</Text>
            </View>
          </Droppable>
        </View>
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Sortable List Implementation

Source: https://react-native-reanimated-dnd.netlify.app/docs/intro/index

Example of using the Sortable component for creating reorderable lists. It requires data, a renderItem function, and itemHeight. The onMove callback handles the reordering logic.

```javascript
<Sortable   
  data={items}   
  renderItem={({ item, id, positions, ...props }) => (
    <SortableItem   
      key={id}
      id={id}
      positions={positions}
      {...props}
      onMove={(itemId, from, to) => {
        // Handle reordering
        const newItems = [...items];
        const [movedItem] = newItems.splice(from, 1);
        newItems.splice(to, 0, movedItem);
        setItems(newItems);
      }}
    >
      <ItemComponent item={item} />
    </SortableItem>
  )}
  itemHeight={60}
/>
```

--------------------------------

### Droppable Component Usage

Source: https://react-native-reanimated-dnd.netlify.app/docs/intro/index

Shows how to create a drop zone using the Droppable component. It accepts an onDrop callback function to handle dropped items.

```javascript
<Droppable onDrop={(data) => handleDrop(data)}>
  <YourDropZone />
</Droppable>
```

--------------------------------

### Draggable Component Usage

Source: https://react-native-reanimated-dnd.netlify.app/docs/intro/index

Demonstrates how to make a component draggable using the Draggable component from React Native Reanimated DnD. It supports passing a data payload.

```javascript
<Draggable data={{ id: '1', name: 'Item' }}>
  <YourComponent />
</Draggable>
```
Tokens:
Raw