Skip to main content

Introduction

Welcome to React Native Reanimated DnD - a powerful, performant drag-and-drop library built on React Native Reanimated 3 and Gesture Handler.

What is React Native Reanimated DnD?​

React Native Reanimated DnD is a comprehensive drag-and-drop solution that provides:

  • Smooth 60fps animations powered by React Native Reanimated 3
  • Gesture-based interactions using React Native Gesture Handler
  • Flexible collision detection with multiple algorithms
  • TypeScript support with full type safety
  • Cross-platform compatibility for iOS and Android

Key Features​

🎯 Easy to Use​

Simple API that works out of the box with minimal configuration.

⚡ High Performance​

All animations run on the UI thread for consistent 60fps performance.

🎨 Highly Customizable​

Extensive customization options for animations, collision detection, and visual feedback.

📱 Mobile Optimized​

Designed specifically for mobile touch interactions with proper gesture handling.

🔧 TypeScript Ready​

Full TypeScript support with comprehensive type definitions.

Quick Example​

Here's a simple drag-and-drop implementation:

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>
  );
}

Core Components​

Draggable​

Make any component draggable with data payload support:

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

Droppable​

Create drop zones that receive draggable items:

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

Sortable​

High-level component for reorderable lists:

<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}
/>

Use Cases​

React Native Reanimated DnD is perfect for:

  • Kanban boards and task management
  • File managers with drag-and-drop organization
  • Photo galleries with reordering
  • Form builders with draggable components
  • Shopping carts with drag-to-add functionality
  • Sortable lists and data tables
  • Game interfaces with draggable elements

Why Choose This Library?​

Performance First​

  • UI thread animations via Reanimated 3
  • Optimized collision detection algorithms
  • Minimal JavaScript bridge communication
  • Smooth interactions even on lower-end devices

Developer Experience​

  • Intuitive API design
  • Comprehensive TypeScript support
  • Extensive documentation with examples
  • Active community support

Production Ready​

  • Battle-tested in production apps
  • Comprehensive error handling
  • Memory leak prevention
  • Cross-platform consistency

Getting Started​

Ready to add drag-and-drop to your app? Start with our quick setup guide:

  1. Installation - Install the library and dependencies
  2. Quick Start - Build your first drag-and-drop interface
  3. Basic Concepts - Understand the core concepts
  4. API Reference - Explore all available components and hooks

Community​

License​

MIT License - see the LICENSE file for details.