### Complete React Native Reanimated DnD Quick Start Example (TypeScript)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/quick-start.md

This comprehensive example demonstrates a full working drag-and-drop setup using `react-native-reanimated-dnd`. It includes the `DropProvider`, multiple `Draggable` items rendered dynamically, and a `Droppable` zone with an `onDrop` handler that displays an alert. It also incorporates `GestureHandlerRootView` and `StyleSheet` for basic styling, showcasing how to integrate all components for a functional drag-and-drop experience.

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

interface Item {
  id: string;
  title: string;
  color: string;
}

export default function QuickStartExample() {
  const [items] = useState<Item[]>([
    { id: '1', title: 'Item 1', color: '#FF6B6B' },
    { id: '2', title: 'Item 2', color: '#4ECDC4' },
    { id: '3', title: 'Item 3', color: '#45B7D1' },
  ]);

  const handleDrop = (data: Item) => {
    Alert.alert('Success!', `${data.title} was dropped!`);
  };

  return (
    <GestureHandlerRootView style={styles.container}>
      <DropProvider>
        <View style={styles.content}>
          <Text style={styles.title}>Quick Start Example</Text>
          
          {/* Draggable Items */}
          <View style={styles.itemsContainer}>
            {items.map((item) => (
              <Draggable key={item.id} data={item}>
                <View style={[styles.draggableItem, { backgroundColor: item.color }]}>
                  <Text style={styles.itemText}>{item.title}</Text>
                </View>
              </Draggable>
            ))}
          </View>

          {/* Drop Zone */}
          <Droppable onDrop={handleDrop}>
            <View style={styles.dropZone}>
              <Text style={styles.dropZoneText}>Drop items here</Text>
            </View>
          </Droppable>
        </View>
      </DropProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  itemsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 50,
  },
  draggableItem: {
    width: 80,
    height: 80,
    borderRadius: 40,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  itemText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 12,
    textAlign: 'center',
  },
  dropZone: {
    height: 150,
    backgroundColor: '#e0e0e0',
    borderWidth: 2,
    borderColor: '#999',
    borderStyle: 'dashed',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dropZoneText: {
    fontSize: 18,
    color: '#666',
    fontWeight: '500',
  },
});
```

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

### Installing Project and Example App Dependencies (Bash)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/README.md

These commands install the necessary Node.js dependencies for both the main `react-native-reanimated-dnd` project and its nested `example-app`. It ensures all required packages are available for development and running the demo.

```bash
npm install
cd example-app
npm install
```

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

### Setting Up React Native Example App Dependencies - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/CONTRIBUTING.md

This sequence of commands navigates into the `example-app` directory and then installs its specific Node.js package dependencies using npm, which are required to run and test the library's example application.

```Bash
cd example-app
npm install
```

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

### Installing React Native Reanimated DnD Dependencies - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/example-app/README.md

This command installs all necessary Node.js dependencies for the React Native Reanimated DnD example application using npm, preparing the project for execution.

```bash
npm install
```

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

### Starting React Native Reanimated DnD Development Server - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/example-app/README.md

This command starts the Expo development server for the React Native Reanimated DnD example application, enabling live reloading and debugging during development.

```bash
npx expo start
```

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

### Verifying React Native Reanimated DnD Installation with a Test Component

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This React Native component demonstrates a basic drag-and-drop setup using `react-native-reanimated-dnd` to verify successful installation. It includes a `Draggable` green box and a `Droppable` blue area, wrapped within `DropProvider` and `GestureHandlerRootView` for proper functionality. The `onDrop` callback logs data to the console, confirming interaction.

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

export default function InstallationTest() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <DropProvider>
        <View style={styles.content}>
          <Text style={styles.title}>Installation Test</Text>
          
          <Draggable data={{ id: '1', name: 'Test Item' }}>
            <View style={styles.draggable}>
              <Text>Drag me!</Text>
            </View>
          </Draggable>
          
          <Droppable onDrop={(data) => console.log('Dropped:', data)}>
            <View style={styles.droppable}>
              <Text>Drop here!</Text>
            </View>
          </Droppable>
        </View>
      </DropProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 40,
    color: '#333',
  },
  draggable: {
    width: 100,
    height: 100,
    backgroundColor: '#4CAF50',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 40,
  },
  droppable: {
    width: 200,
    height: 100,
    backgroundColor: '#2196F3',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderStyle: 'dashed',
    borderColor: '#1976D2',
  },
});
```

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

### Clearing Metro Bundler Cache for React Native and Expo

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

These commands are used to resolve Metro bundler issues by clearing its cache. `npx react-native start --reset-cache` is for React Native CLI projects, while `npx expo start -c` is for Expo projects, ensuring a clean start for the development server.

```bash
# Clear Metro cache
npx react-native start --reset-cache

# For Expo
npx expo start -c
```

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

### Building a File Manager with React Native Reanimated DnD

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This example illustrates a file manager application leveraging `DropProvider` for drag-and-drop file operations. It highlights the use of `DropProviderRef` to imperatively request position updates after file operations, ensuring accurate drag-and-drop behavior, and demonstrates `onDragStart` and `onDragEnd` for logging and state management.

```TypeScript
import React, { useState, useRef } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider, DropProviderRef } from 'react-native-reanimated-dnd';

interface FileItem {
  id: string;
  name: string;
  type: 'file' | 'folder';
  size: number;
}

function FileManager() {
  const [files, setFiles] = useState<FileItem[]>([]);
  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
  const dropProviderRef = useRef<DropProviderRef>(null);

  const handleFileOperation = useCallback((operation: string, fileId: string) => {
    // Trigger position update after file operations
    setTimeout(() => {
      dropProviderRef.current?.requestPositionUpdate();
    }, 100);
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider
        ref={dropProviderRef}
        onDragStart={(file: FileItem) => {
          console.log(`Started dragging: ${file.name}`);
          setSelectedFiles(new Set([file.id]));
        }}
        onDragEnd={(file: FileItem) => {
          console.log(`Finished dragging: ${file.name}`);
        }}
        onDroppedItemsUpdate={(droppedItems) => {
          // Update file organization
          updateFileStructure(droppedItems);
        }}
      >
        <FileExplorer 
          files={files} 
          selectedFiles={selectedFiles}
          onFileOperation={handleFileOperation}
        />
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Installing react-native-reanimated-dnd with npm

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs the `react-native-reanimated-dnd` package using npm. It's the first step to integrate the library into your project.

```bash
npm install react-native-reanimated-dnd
```

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

### Configuring DropProvider with Basic Callbacks in React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This example illustrates how to integrate `DropProvider` with common callback functions to monitor drag-and-drop events. It demonstrates logging messages for `onDragStart` (when an item begins dragging), `onDragEnd` (when dragging finishes), and `onDroppedItemsUpdate` (when the map of dropped items changes), providing basic event tracking.

```tsx
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider } from 'react-native-reanimated-dnd';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider
        onDragStart={(data) => console.log('Drag started:', data)}
        onDragEnd={(data) => console.log('Drag ended:', data)}
        onDroppedItemsUpdate={(items) => console.log('Items updated:', items)}
      >
        <YourComponents />
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Installing Expo Dependencies

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs `react-native-reanimated` and `react-native-gesture-handler` using `npx expo install`. This is the recommended way to install these dependencies in an Expo project.

```bash
npx expo install react-native-reanimated react-native-gesture-handler
```

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

### Implementing Single DropProvider per App in React Native Reanimated DnD (TypeScript)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This example illustrates the best practice of using a single DropProvider at the root of your application's drag-and-drop area. It contrasts this with an anti-pattern of multiple, nested providers, which can lead to unexpected behavior and performance issues.

```TypeScript
// ✅ Good: Single provider at the root
<GestureHandlerRootView style={{ flex: 1 }}>
  <DropProvider>
    <App />
  </DropProvider>
</GestureHandlerRootView>

// ❌ Bad: Multiple nested providers
<GestureHandlerRootView style={{ flex: 1 }}>
  <DropProvider>
    <Screen1 />
    <DropProvider> {/* Unnecessary nesting */}
      <Screen2 />
    </DropProvider>
  </DropProvider>
</GestureHandlerRootView>
```

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

### Installing react-native-reanimated-dnd with Yarn

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs the `react-native-reanimated-dnd` package using Yarn. It's an alternative to npm for integrating the library into your project.

```bash
yarn add react-native-reanimated-dnd
```

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

### Cloning React Native Reanimated DnD Repository - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/example-app/README.md

This command clones the `react-native-reanimated-dnd` repository from GitHub and then navigates into the `example-app` directory, which contains the example application.

```bash
git clone https://github.com/entropyconquers/react-native-reanimated-dnd.git
cd react-native-reanimated-dnd/example-app
```

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

### Installing All Dependencies for Expo Development Build

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs `react-native-reanimated-dnd` along with its peer dependencies using `npx expo install`. It's part of the process for creating a development build in Expo SDK 46+.

```bash
npx expo install react-native-reanimated-dnd react-native-reanimated react-native-gesture-handler
```

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

### Running the React Native Example Application (Bash)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/README.md

These commands launch the `react-native-reanimated-dnd` example application on either an iOS or Android simulator/device. This allows users to interact with and test all 15 features of the library as demonstrated in the demo app.

```bash
npx expo run:ios

# Android
npx expo run:android
```

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

### Running pod install for iOS

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command navigates into the `ios` directory and runs `pod install` to link native dependencies for iOS projects. This step is crucial for React Native CLI projects on iOS.

```bash
cd ios && pod install
```

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

### Creating Expo Android Development Build

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command initiates the creation of an Android development build for your Expo project. It's used after installing dependencies to prepare the app for native development.

```bash
npx expo run:android
```

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

### Optimizing DropProvider Callbacks with useCallback in React Native Reanimated DnD (TypeScript)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This example illustrates the use of the useCallback hook to memoize event handler functions passed to the DropProvider, such as onDragStart and onDroppedItemsUpdate. This optimization prevents unnecessary re-renders of child components and improves overall performance.

```TypeScript
const handleDragStart = useCallback((data) => {
  console.log('Drag started:', data);
}, []);

const handleDroppedItemsUpdate = useCallback((items) => {
  updateState(items);
}, []);

<GestureHandlerRootView style={{ flex: 1 }}>
  <DropProvider
    onDragStart={handleDragStart}
    onDroppedItemsUpdate={handleDroppedItemsUpdate}
  >
    <YourComponents />
  </DropProvider>
</GestureHandlerRootView>
```

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

### Installing Project Dependencies (Yarn)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/README.md

This command installs all required project dependencies using the Yarn package manager, preparing the environment for development.

```Shell
yarn
```

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

### Installing Peer Dependencies with npm

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs the required peer dependencies, `react-native-reanimated` and `react-native-gesture-handler`, using npm. These libraries are essential for `react-native-reanimated-dnd` to function correctly.

```bash
npm install react-native-reanimated react-native-gesture-handler
```

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

### Installing Peer Dependencies with Yarn

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs the required peer dependencies, `react-native-reanimated` and `react-native-gesture-handler`, using Yarn. These libraries are essential for `react-native-reanimated-dnd` to function correctly.

```bash
yarn add react-native-reanimated react-native-gesture-handler
```

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

### Creating Expo iOS Development Build

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command initiates the creation of an iOS development build for your Expo project. It's used after installing dependencies to prepare the app for native development.

```bash
npx expo run:ios
```

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

### Synchronizing Application State with Dropped Items in React Native Reanimated DnD (TypeScript)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This snippet demonstrates a common pattern for synchronizing the application's internal state with the items managed by the DropProvider. It shows how to use the onDroppedItemsUpdate callback to convert dropped items into a desired state format and persist it, for example, using AsyncStorage.

```TypeScript
function StateSyncExample() {
  const [appState, setAppState] = useState(initialState);

  const syncWithDroppedItems = useCallback((droppedItems) => {
    // Convert dropped items to your app state format
    const newState = convertDroppedItemsToState(droppedItems);
    setAppState(newState);
    
    // Persist to storage
    AsyncStorage.setItem('appState', JSON.stringify(newState));
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider onDroppedItemsUpdate={syncWithDroppedItems}>
        <YourApp state={appState} />
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Installing react-native-reanimated-dnd with npm

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/README.md

This command installs the `react-native-reanimated-dnd` library using npm, which is required to use its drag-and-drop functionalities in a React Native project.

```bash
npm install react-native-reanimated-dnd
```

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

### Basic DropProvider Setup in React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This snippet demonstrates the fundamental setup of the `DropProvider` from `react-native-reanimated-dnd`. It shows how to wrap all draggable and droppable components within `DropProvider` inside a `GestureHandlerRootView` to enable the core drag-and-drop functionality in a React Native application.

```tsx
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider } from 'react-native-reanimated-dnd';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider>
        {/* Your draggable and droppable components */}
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### JSDoc Documentation Example - TypeScript

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/CONTRIBUTING.md

This TypeScript example illustrates how to use JSDoc comments to document a component's public API, detailing parameters, callbacks, and providing a practical usage example for clarity and ease of understanding.

```typescript
/**
 * Makes a component draggable with customizable behavior
 *
 * @param data - Data associated with the draggable item
 * @param onDragStart - Callback called when dragging starts
 * @param onDragEnd - Callback called when dragging ends
 * @param collisionAlgorithm - Algorithm used for collision detection
 *
 * @example
 * ```tsx
 * <Draggable
 *   data={{ id: '1', title: 'Item' }}
 *   onDragStart={(data) => console.log('Started dragging', data)}
 *   collisionAlgorithm="intersect"
 * >
 *   <Text>Drag me!</Text>
 * </Draggable>
 * ```
 */
```

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

### Running React Native Example App on Android - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/CONTRIBUTING.md

This command launches the React Native example application on an Android emulator or connected device using Expo CLI's `npx expo run:android` command, facilitating testing of the library's features.

```Bash
npx expo run:android
```

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

### Installing Peer Dependencies for react-native-reanimated-dnd

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/README.md

This command installs the necessary peer dependencies, `react-native-reanimated` and `react-native-gesture-handler`, which are fundamental for `react-native-reanimated-dnd` to function correctly, providing animation and gesture capabilities.

```bash
npm install react-native-reanimated react-native-gesture-handler
```

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

### Cloning React Native Reanimated DnD Repository (Bash)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/README.md

This command initiates the process by cloning the `react-native-reanimated-dnd` GitHub repository to your local machine and then navigates into the newly created project directory, preparing for dependency installation.

```bash
git clone https://github.com/entropyconquers/react-native-reanimated-dnd.git
cd react-native-reanimated-dnd
```

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

### Running React Native Reanimated DnD App on Android - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/example-app/README.md

This command launches the React Native Reanimated DnD example application on an Android emulator or connected device using Expo CLI, facilitating development and testing.

```bash
npx expo run:android
```

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

### Handling Drag Start Event (TypeScript)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/api/hooks/useDraggable.md

This example demonstrates the `onDragStart` callback, which is invoked when a drag gesture begins. It receives the draggable item's data as an argument, useful for logging or triggering haptic feedback.

```TypeScript
const { animatedViewProps, gesture } = useDraggable({
  data: taskData,
  onDragStart: (data) => {
    console.log('Started dragging:', data.title);
    hapticFeedback();
  }
});
```

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

### Running React Native Example App on iOS - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/CONTRIBUTING.md

This command launches the React Native example application on an iOS simulator or connected device using Expo CLI's `npx expo run:ios` command, allowing for testing of the library's functionality.

```Bash
npx expo run:ios
```

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

### Accessing DropProvider Methods Imperatively with Ref in React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This example demonstrates how to use a React `useRef` hook to obtain an imperative reference to the `DropProvider` instance. This allows direct access to methods like `requestPositionUpdate()` for manually refreshing component positions after layout changes and `getDroppedItems()` to retrieve the current state of dropped items programmatically.

```tsx
import React, { useRef } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider, DropProviderRef } from 'react-native-reanimated-dnd';

function AppWithRef() {
  const dropProviderRef = useRef<DropProviderRef>(null);

  const handleLayoutChange = () => {
    // Manually trigger position updates after layout changes
    dropProviderRef.current?.requestPositionUpdate();
  };

  const getDroppedItems = () => {
    const items = dropProviderRef.current?.getDroppedItems();
    console.log('Current dropped items:', items);
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider
        ref={dropProviderRef}
        onLayoutUpdateComplete={() => console.log('Layout updated')}
      >
        <ScrollView onLayout={handleLayoutChange}>
          <YourComponents />
        </ScrollView>
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Running React Native Reanimated DnD App on iOS - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/example-app/README.md

This command launches the React Native Reanimated DnD example application on an iOS simulator or connected device using Expo CLI, allowing for development and testing.

```bash
npx expo run:ios
```

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

### Installing TypeScript Type Definitions for React and React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command installs the latest TypeScript type definitions for React and React Native. It is a common troubleshooting step to resolve type errors when working with TypeScript in a React Native project, ensuring proper type checking and autocompletion.

```bash
npm install @types/react @types/react-native
```

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

### Implementing Task Management with React Native Reanimated DnD

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This snippet demonstrates a task management application using `DropProvider` to enable drag-and-drop for tasks. It showcases `onDragStart` for initiating drag, `onDragEnd` for cleanup, and `onDroppedItemsUpdate` for managing task state, visual feedback, and analytics after items are dropped.

```TypeScript
import React, { useState, useCallback } from 'react';
import { View, ScrollView } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider } from 'react-native-reanimated-dnd';

interface Task {
  id: string;
  title: string;
  status: 'todo' | 'in-progress' | 'done';
  priority: 'low' | 'medium' | 'high';
}

function TaskManagementApp() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [draggedTask, setDraggedTask] = useState<Task | null>(null);

  const handleDragStart = useCallback((data: Task) => {
    setDraggedTask(data);
    // Add visual feedback
    hapticFeedback();
  }, []);

  const handleDragEnd = useCallback((data: Task) => {
    setDraggedTask(null);
    // Clean up visual feedback
  }, []);

  const handleDroppedItemsUpdate = useCallback((droppedItems) => {
    // Sync dropped items with your state management
    syncTasksWithDroppedItems(droppedItems);
    
    // Save to backend
    saveTasks(tasks);
    
    // Analytics
    analytics.track('tasks_reordered', {
      totalTasks: tasks.length,
      droppedCount: Object.keys(droppedItems).length
    });
  }, [tasks]);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
        onDroppedItemsUpdate={handleDroppedItemsUpdate}
        onDragging={({ itemData, tx, ty }) => {
          // Real-time position tracking
          updateDragPreview(itemData, tx, ty);
        }}
      >
        <View style={{ flex: 1 }}>
          <TaskBoard tasks={tasks} draggedTask={draggedTask} />
        </View>
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### App Navigation Structure

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/example-app/README.md

This snippet illustrates the hierarchical navigation flow of the React Native application, outlining the main screens and their relationships within the app. It provides a visual map of how different example features are organized and accessed.

```text
📱 App
├── 🏠 Home (Examples Navigation)
├── 🎵 Sortable Music Queue
├── 👆 Basic Drag & Drop
├── 🔧 Drag Handles
├── ⚡ Drag State Management
├── 📍 Dropped Items Map
├── 🎬 Custom Animations
├── ✨ Active Drop Styles
├── 📐 Alignment & Offset
├── 🎯 Collision Detection
├── 🗂️ Drop Zone Capacity
├── 📦 Bounded Dragging
├── ↔️ X-Axis Constraints
├── ↕️ Y-Axis Constraints
├── 📏 Bounded Y-Axis
└── ⚙️ Custom Draggable
```

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

### Installing Root Project Dependencies - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/CONTRIBUTING.md

This command installs all necessary Node.js package dependencies for the main React Native Reanimated DnD library project, typically located in the root directory, using npm.

```Bash
npm install
```

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

### Creating an E-commerce Product Catalog with React Native Reanimated DnD

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/setup-provider.md

This snippet shows an e-commerce product catalog where users can drag products, potentially to a cart or wishlist. It demonstrates `onDragStart` for analytics tracking, `onDroppedItemsUpdate` for updating product lists based on drop events, and `onDragging` for showing a real-time drag preview.

```TypeScript
import React, { useState } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider } from 'react-native-reanimated-dnd';

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}

function ProductCatalog() {
  const [cart, setCart] = useState<Product[]>([]);
  const [wishlist, setWishlist] = useState<Product[]>([]);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DropProvider
        onDragStart={(product: Product) => {
          analytics.track('product_drag_start', {
            productId: product.id,
            category: product.category
          });
        }}
        onDroppedItemsUpdate={(droppedItems) => {
          // Update cart and wishlist based on drops
          updateProductLists(droppedItems);
        }}
        onDragging={({ itemData, tx, ty }) => {
          // Show drag preview
          showProductPreview(itemData, tx, ty);
        }}
      >
        <ProductGrid />
        <ShoppingCart items={cart} />
        <Wishlist items={wishlist} />
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Implementing Haptic Feedback in React Native Draggable

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/visual-feedback.md

This snippet demonstrates how to integrate haptic feedback into a React Native draggable component. It triggers a light impact on drag start and a success notification on drop, enhancing user interaction. It depends on the `react-native` module for `HapticFeedback` and assumes a `Draggable` component is available.

```tsx
import { HapticFeedback } from 'react-native';

function HapticDraggable({ data }) {
  const handleDragStart = () => {
    HapticFeedback.trigger('impactLight');
  };

  const handleDrop = () => {
    HapticFeedback.trigger('notificationSuccess');
  };

  return (
    <Draggable
      data={data}
      onDragStart={handleDragStart}
      onDrop={handleDrop}
    >
      {/* Content */}
    </Draggable>
  );
}
```

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

### Starting Local Development Server (Yarn)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/README.md

This command initiates a local development server, automatically opening a browser window. It supports live reloading, reflecting most code changes instantly without server restarts.

```Shell
yarn start
```

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

### Setting Up a Drawing Canvas with Draggable Tools in React Native (TSX)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/bounded-dragging.md

This snippet illustrates a basic setup for a drawing canvas where a draggable tool can be moved around. It defines a `View` component as the canvas and places a `Draggable` component representing a drawing tool inside it, allowing users to interact with the tool within the canvas area.

```tsx
function DrawingCanvas() {
  return (
    <View style={styles.canvas}>
      <Draggable data={{ type: 'drawing-tool' }}>
        <View style={styles.drawingTool}>
          <Text>Drawing Tool</Text>
        </View>
      </Draggable>
    </View>
  );
}
```

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

### Styling for React Native Drag and Drop Components

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/visual-feedback.md

This StyleSheet defines the visual appearance for the main container, content, status indicators, draggable items, and drop zones used in the visual feedback example. It uses `StyleSheet.create` for optimized styling in React Native.

```tsx
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  title: {

```

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

### Implementing File Drag and Drop in React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/components/draggable.md

This example illustrates a `Draggable` component used for file items, incorporating visual feedback (haptic and overlay) on drag start and end. It uses `collisionAlgorithm="intersect"` for drag detection and dynamically updates styling based on the dragging state.

```tsx
function FileItem({ file }) {
  const [isDragging, setIsDragging] = useState(false);

  return (
    <Draggable
      data={file}
      collisionAlgorithm="intersect"
      onDragStart={(data) => {
        setIsDragging(true);
        hapticFeedback();
        showDragOverlay(data);
      }}
      onDragEnd={(data) => {
        setIsDragging(false);
        hideDragOverlay();
      }}
      style={[
        styles.fileItem,
        isDragging && styles.draggingFile
      ]}
    >
      <View style={styles.fileContent}>
        <Icon 
          name={getFileIcon(file.type)} 
          size={32} 
          color={getFileColor(file.type)} 
        />
        <View style={styles.fileInfo}>
          <Text style={styles.fileName}>{file.name}</Text>
          <Text style={styles.fileSize}>{formatFileSize(file.size)}</Text>
        </View>
        {isDragging && (
          <View style={styles.dragIndicator}>
            <Text style={styles.dragText}>Dragging...</Text>
          </View>
        )}
      </View>
    </Draggable>
  );
}
```

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

### Basic DropProvider Usage Example (TSX)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/api/context/DropProvider.md

This example demonstrates the basic integration of `DropProvider` within a React Native application, wrapping the main components with `GestureHandlerRootView` and `DropProvider` to enable drag-and-drop functionality.

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DropProvider } from 'react-native-reanimated-dnd';

function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <DropProvider>
        <YourDragDropComponents />
      </DropProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Creating Multiple Category Drop Zones in React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/drop-zones.md

This example demonstrates how to render multiple `Droppable` zones dynamically based on a list of categories. Each zone allows items to be dropped and categorized, providing a flexible way to organize content.

```TypeScript
function CategoryZones({ categories }) {
  return (
    <View style={styles.categoriesContainer}>
      {categories.map((category) => (
        <Droppable
          key={category.id}
          droppableId={category.id}
          onDrop={(item) => categorizeItem(item, category)}
        >
          <View style={[styles.categoryZone, { borderColor: category.color }]}>
            <Text style={styles.categoryTitle}>{category.name}</Text>
            <Text style={styles.categoryCount}>
              {category.items.length} items
            </Text>
          </View>
        </Droppable>
      ))}
    </View>
  );
}
```

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

### Implementing Sortable List with Callbacks in React Native

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/api/components/sortable.md

This advanced example showcases how to integrate callbacks (`onMove`, `onDragStart`, `onDrop`) with `SortableItem` to handle drag-and-drop events. It demonstrates updating the list state, triggering haptic feedback on drag start, tracking analytics on move, and saving data to a backend on drop, providing a more interactive and functional user experience.

```tsx
function AdvancedTaskList() {
  const [tasks, setTasks] = useState(initialTasks);
  const [draggingTask, setDraggingTask] = useState<string | null>(null);

  const renderTask = ({ item, id, positions, ...props }) => (
    <SortableItem
      key={id}
      id={id}
      positions={positions}
      {...props}
      onMove={(itemId, fromIndex, toIndex) => {
        // Update data when items are reordered
        const newTasks = [...tasks];
        const [movedTask] = newTasks.splice(fromIndex, 1);
        newTasks.splice(toIndex, 0, movedTask);
        setTasks(newTasks);

        // Analytics tracking
        analytics.track('task_reordered', {
          taskId: itemId,
          from: fromIndex,
          to: toIndex,
          totalTasks: tasks.length
        });
      }}
      onDragStart={(itemId) => {
        // Haptic feedback
        if (Platform.OS === 'ios') {
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
        }
        setDraggingTask(itemId);
      }}
      onDrop={(itemId) => {
        setDraggingTask(null);
        // Save to backend
        saveTasks(tasks);
      }}
    >
      <Animated.View 
        style={[
          styles.taskItem,
          item.priority === 'high' && styles.highPriorityTask,
          draggingTask === id && styles.draggingTask
        ]}
      >
        <View style={styles.taskContent}>
          <Text style={styles.taskTitle}>{item.title}</Text>
          <Text style={styles.taskDue}>Due: {item.dueDate}</Text>
          <View style={styles.taskMeta}>
            <Text style={styles.taskPriority}>{item.priority}</Text>
            <Text style={styles.taskCategory}>{item.category}</Text>
          </View>
        </View>
        
        <View style={styles.taskActions}>
          <TouchableOpacity onPress={() => toggleComplete(item.id)}>
            <Icon 
              name={item.completed ? 'check-circle' : 'circle'} 
              size={24} 
              color={item.completed ? '#4CAF50' : '#ccc'} 
            />
          </TouchableOpacity>
        </View>
      </Animated.View>
    </SortableItem>
  );

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>My Tasks ({tasks.length})</Text>
        <TouchableOpacity onPress={addNewTask}>
          <Icon name="plus" size={24} color="#007AFF" />
        </TouchableOpacity>
      </View>
      
      <Sortable
        data={tasks}
        renderItem={renderTask}
        itemHeight={100}
        style={styles.sortableList}
        contentContainerStyle={styles.listContent}
      />
    </View>
  );
}
```

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

### Adding Reanimated and Gesture Handler to Android build.gradle

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

These lines ensure that `react-native-reanimated` and `react-native-gesture-handler` are correctly included as dependencies in your Android project's `build.gradle` file. This is a fallback step if automatic linking fails.

```gradle
implementation 'com.swmansion.reanimated:reanimated:3.x.x'
implementation 'com.swmansion.gesturehandler:react-native-gesture-handler:2.x.x'
```

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

### Importing Gesture Handler for React Native 0.60+

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This JavaScript import statement must be added to the very top of your `index.js` or `App.js` file for React Native versions 0.60 and above. It initializes the gesture handler system.

```javascript
import 'react-native-gesture-handler';
```

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

### Displaying Loading States for React Native Droppable Zones

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/drop-zones.md

This example demonstrates how to manage and display a loading state within a `Droppable` zone. It disables the zone during processing and shows an `ActivityIndicator`, providing clear feedback to the user about ongoing operations.

```TypeScript
function LoadingDropZone({ isProcessing }) {
  return (
    <Droppable disabled={isProcessing}>
      <View style={[styles.dropZone, isProcessing && styles.processingZone]}>
        {isProcessing ? (
          <ActivityIndicator color="#58a6ff" />
        ) : (
          <Text>Drop items here</Text>
        )}
      </View>
    </Droppable>
  );
}
```

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

### Implementing Bounded Dragging with react-native-reanimated-dnd in TypeScript

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/bounded-dragging.md

This snippet demonstrates how to create draggable items that are constrained within a specific boundary area using `react-native-reanimated-dnd`. It shows the setup with `DropProvider`, `Draggable`, and `Droppable` components, including custom `onDragging` logic for monitoring item positions and a drop zone for interaction outside the boundary. Required dependencies include `react-native-gesture-handler`.

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

interface BoundedItemData {
  id: string;
  label: string;
  color: string;
}

export function BoundedDraggingExample() {
  const [items] = useState<BoundedItemData[]>([
    { id: '1', label: 'Bounded Item 1', color: '#ff6b6b' },
    { id: '2', label: 'Bounded Item 2', color: '#4ecdc4' },
  ]);

  return (
    <GestureHandlerRootView style={styles.container}>
      <DropProvider>
        <View style={styles.content}>
          <Text style={styles.title}>Bounded Dragging</Text>
          <Text style={styles.subtitle}>
            Items are constrained within the boundary areas
          </Text>

          {/* Boundary Area */}
          <View style={styles.boundaryContainer}>
            <Text style={styles.boundaryTitle}>Drag Boundary</Text>
            <View style={styles.boundary}>
              {/* Draggable items within boundary */}
              <Draggable<BoundedItemData>
                data={items[0]}
                style={[styles.draggable, { backgroundColor: items[0].color }]}
                onDragging={({ x, y, tx, ty }) => {
                  // Custom boundary logic can be implemented here
                  console.log(`Item at position: ${x + tx}, ${y + ty}`);
                }}
              >
                <View style={styles.itemContent}>
                  <Text style={styles.itemLabel}>{items[0].label}</Text>
                  <Text style={styles.itemHint}>Drag within bounds</Text>
                </View>
              </Draggable>

              <Draggable<BoundedItemData>
                data={items[1]}
                style={[styles.draggable, { backgroundColor: items[1].color }]}
                onDragging={({ x, y, tx, ty }) => {
                  console.log(`Item at position: ${x + tx}, ${y + ty}`);
                }}
              >
                <View style={styles.itemContent}>
                  <Text style={styles.itemLabel}>{items[1].label}</Text>
                  <Text style={styles.itemHint}>Stay in boundary</Text>
                </View>
              </Draggable>
            </View>
          </View>

          {/* Drop Zone Outside Boundary */}
          <View style={styles.dropZoneArea}>
            <Droppable<BoundedItemData>
              droppableId="outside-boundary"
              onDrop={(data) => console.log(`${data.label} dropped outside boundary`)}
              style={styles.dropZone}
              activeStyle={styles.activeDropZone}
            >
              <Text style={styles.dropZoneText}>Drop Zone</Text>
              <Text style={styles.dropZoneSubtext}>Outside boundary</Text>
            </Droppable>
          </View>

          {/* Info */}
          <View style={styles.infoContainer}>
            <Text style={styles.infoTitle}>Boundary Implementation:</Text>
            <Text style={styles.infoText}>
              • Use container views to define visual boundaries{\'\n'}
              • Implement custom logic in onDragging callbacks{\'\n'}
              • Combine with drop zones for controlled interactions{\'\n'}
              • Style boundaries to provide clear visual feedback
            </Text>
          </View>
        </View>
      </DropProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#FFFFFF',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 15,
    color: '#8E8E93',
    textAlign: 'center',
    marginBottom: 30,
    lineHeight: 22,
  },
  boundaryContainer: {
    marginBottom: 40,
  },
  boundaryTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFFFFF',
    marginBottom: 12,
    textAlign: 'center',
  },
  boundary: {
    height: 300,
    backgroundColor: '#1a1a1a',
    borderRadius: 16,
    borderWidth: 2,
    borderColor: '#58a6ff',
    borderStyle: 'dashed',
    padding: 20,
    position: 'relative',
  },
  draggable: {
    width: 120,
    height: 80,
    borderRadius: 12,
    position: 'absolute',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 6,
    elevation: 8,
  },
  itemContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  },
  itemLabel: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 4,
    textAlign: 'center',
  },
  itemHint: {
    fontSize: 10,
    color: 'rgba(255, 255, 255, 0.8)',
    textAlign: 'center',
  },
  dropZoneArea: {
    alignItems: 'center',
    marginBottom: 30,
  },
  dropZone: {
    width: '60%',
    height: 100,
    borderWidth: 2,
```

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

### Displaying Proximity Feedback in React Native (TSX)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/examples/visual-feedback.md

This component provides visual feedback based on the proximity of a draggable item to a target. It calculates an `intensity` based on `distance` and a `threshold`, then applies dynamic opacity and scale transformations to an indicator. This gives a visual cue as an item gets closer to a drop zone.

```tsx
function ProximityFeedback({ distance, threshold = 50 }) {
  const intensity = Math.max(0, 1 - distance / threshold);
  
  return (
    <View style={[
      styles.proximityIndicator,
      { opacity: intensity, transform: [{ scale: 0.8 + intensity * 0.2 }] }
    ]}>
      <Text style={styles.proximityText}>Drop Zone Near</Text>
    </View>
  );
}
```

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

### Cloning Forked React Native Reanimated DnD Repository - Bash

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/CONTRIBUTING.md

This command sequence clones your forked React Native Reanimated DnD repository from GitHub to your local machine and then navigates into the newly created project directory, preparing for further setup.

```Bash
git clone https://github.com/YOUR_USERNAME/react-native-reanimated-dnd.git
cd react-native-reanimated-dnd
```

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

### Basic Draggable Component Setup (JSX)

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/api/hooks/useDraggable.md

Demonstrates the minimal setup for a draggable component using `useDraggable`. It shows how to spread `animatedViewProps` onto an `Animated.View` and attach the `gesture` object to a `GestureDetector` to enable basic drag functionality.

```tsx
const { animatedViewProps, gesture } = useDraggable({ data: taskData });

return (
  <GestureDetector gesture={gesture}>
    <Animated.View {...animatedViewProps}>
      <Text>Draggable content</Text>
    </Animated.View>
  </GestureDetector>
);
```

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

### Cleaning Android Gradle Project Build Cache

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This command navigates into the Android project directory and executes the Gradle clean task. It is used to clear the Android build cache, which can resolve various Gradle-related build issues, especially after dependency changes or updates.

```bash
cd android && ./gradlew clean
```

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

### Configuring Reanimated Plugin in Expo app.config.js

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This JavaScript snippet demonstrates how to add the `react-native-reanimated/plugin` to your `app.config.js` file. This configuration is necessary for Reanimated functionality in Expo projects.

```javascript
export default {
  expo: {
    plugins: [
      'react-native-reanimated/plugin'
    ]
  }
};
```

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

### Configuring Reanimated Plugin in babel.config.js

Source: https://github.com/entropyconquers/react-native-reanimated-dnd/blob/main/documentation/web-docs/docs/getting-started/installation.md

This JavaScript snippet shows how to add the `react-native-reanimated/plugin` to your `babel.config.js` file. It's crucial that this plugin is the last item in the plugins array for proper functionality.

```javascript
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // This must be last
  ],
};
```