react-native-drax 0.11.0-alpha.2 → 1.1.0

package/README.md

@@ -1,291 +1,454 @@
 # react-native-drax
 
-**A drag-and-drop system for React Native**
 
-*"Not to be confused with react-native-picksaw"*
+[![React Native CLI](https://img.shields.io/badge/-React%20Native%20CLI-282C34?style=flat-square&logo=react&logoColor=61DAFB)](https://reactnative.dev/)
+[![Expo CLI](https://img.shields.io/badge/-Expo%20CLI-282C34?style=flat-square&logo=expo&logoColor=white)](https://expo.dev/)
+[![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20Web-brightgreen.svg?style=flat-square&colorB=191A17)](https://necolas.github.io/react-native-web/)
+[![GitHub top language](https://img.shields.io/github/languages/top/nuclearpasta/react-native-drax?style=flat-square)](https://github.com/nuclearpasta/react-native-drax/search?l=typescript)
+[![CI](https://github.com/nuclearpasta/react-native-drax/actions/workflows/ci.yml/badge.svg)](https://github.com/nuclearpasta/react-native-drax/actions/workflows/ci.yml)
+[![GitHub license](https://img.shields.io/github/license/nuclearpasta/react-native-drax?style=flat-square)](https://github.com/nuclearpasta/react-native-drax/blob/main/LICENSE.md)
+[![npm version](https://img.shields.io/npm/v/react-native-drax?style=flat-square)](https://www.npmjs.com/package/react-native-drax)
 
-[![npm version](https://badge.fury.io/js/react-native-drax.svg)](https://badge.fury.io/js/react-native-drax)
-[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](CODE-OF-CONDUCT.md)
 
-## Overview
 
-Drax is a declarative drag-and-drop system for React Native, written in TypeScript. It is designed to be flexible and powerful with the goal of supporting many use cases, while its stock components and default settings should cover the most common scenarios with minimal configuration.
+📚 [**Visit the official documentation**](https://nuclearpasta.com/react-native-drax)
 
-**Note: We currently only support the latest Expo and React Native versions. Other older version might work just fine, but we won't respond to bug reports or feature requests for them.**
+🎮 [**See the live example**](https://nuclearpasta.com/react-native-drax/example)
 
-### Experimental Alpha Version (v0.11.0)
+## 📖 Overview
 
-An experimental alpha version is now available that introduces significant updates and breaking changes. This version focuses on:
+Drax is a declarative drag-and-drop framework for React Native, written in TypeScript. It supports free-form drag-and-drop, sortable lists and grids, cross-list reorder, drag handles, collision algorithms, and more.
 
-- Integration with latest React Native Reanimated and React Native Gesture Handler by SoftwareMansion
-- Enhanced animation performance and capabilities
-- Works with New Architecture
+Built on [Reanimated 4](https://docs.swmansion.com/react-native-reanimated/) and [Gesture Handler 3](https://docs.swmansion.com/react-native-gesture-handler/) with a UI-thread-first architecture for smooth 60fps interactions.
 
-**Installation:** To install the experimental alpha version:
+**Platforms:** iOS, Android, Web
 
-```bash
-# npm
-npm install react-native-drax@alpha
+### ✨ Highlights
+
+- 📋 **List-agnostic sortable** — works with FlatList, FlashList, LegendList, or any list component
+- 🔀 **Cross-container drag** — move items between lists (cross-list reorder)
+- ⚡ **UI-thread hit-testing** — spatial index worklet for fast receiver detection
+- ✊ **Drag handles** — only the handle starts a drag, the rest scrolls
+- 💥 **Collision algorithms** — center, intersect, or contain
+- 📐 **Drag bounds** — constrain drags within a view
+- 🎨 **Hover styles** — conditional styles based on drag phase and receiver state
+- 🚫 **Drop zone acceptance** — accept or reject drops with `acceptsDrag`
+- 🎬 **Animation presets** — default, spring, gentle, snappy, none — or custom config
+- 🧲 **Snap alignment** — snap to 9-point alignment within receivers
+- ♿ **Accessibility** — auto-generated labels, reduced motion support
+- 📡 **19 callback events** — full drag lifecycle control
+- 🏗️ **New Architecture** compatible (Fabric)
+
+### 🤔 Why Drax?
+
+| Feature | Drax | reanimated-dnd | sortables |
+|---|:---:|:---:|:---:|
+| Free-form drag & drop | ✅ | ✅ | ➖ |
+| Sortable list / grid | ✅ | ✅ | ✅ |
+| Mixed-size grid (non-uniform spans) | ✅ | ➖ | ➖ |
+| Cross-container / cross-list reorder | ⚠️ Experimental | ➖ | ➖ |
+| List-agnostic (FlatList, FlashList, LegendList) | ✅ | ➖ | ➖ |
+| Drag handles | ✅ | ✅ | ✅ |
+| Drag state styling | 15 props + inactive | onStateChange | 5 props + hook |
+| Drop indicator | ✅ | ➖ | Grid only |
+| UI-thread DnD collision | ✅ | ➖ | ➖ |
+| Event callbacks | 19 types | ~12 types | ~10 types |
+| Accessibility + reduced motion | ✅ | Manual | Manual |
+| Web support | ✅ | ➖ | Partial |
+| Reanimated | ≥ 4 | ≥ 4.2 | ≥ 3 |
+| Gesture Handler | ≥ 2 | ≥ 2.28 | ≥ 2 |
+
+[See full comparison →](https://nuclearpasta.com/react-native-drax#comparison)
 
-# or yarn
-yarn add react-native-drax@alpha
+## 📦 Installation
+
+```bash
+npm install react-native-drax
+# or
+yarn add react-native-drax
 ```
 
-You'll also need to ensure you have the required peer dependencies:
+### 🔗 Peer Dependencies
 
 ```bash
-yarn add react-native-reanimated react-native-gesture-handler
+npm install react-native-reanimated react-native-gesture-handler
 ```
 
-**Important:** This alpha version contains breaking changes, especially to the `DraxList` component. See the [Alpha Version Breaking Changes](#alpha-version-breaking-changes) section for details.
-
-*Personal note from Joe: this project is in need of additional [contributors/shepherds](#contributing). I have not been focused on React Native over the past year, and the state of the library has fallen behind the times. At a minimum, it should be updated to use the latest RNGH and take advantage of any fixes and new features in that and RN. I apologize that I do not have the availability to maintain this project to my own high standards and thank everyone who has been understanding of that.*
-
-#### Contents
-
-* [Screenshots](#screenshots)
-* [Status](#status)
-* [Alpha Version Breaking Changes](#alpha-version-breaking-changes)
-* [Background](#background)
-* [Concept](#concept)
-* [Installation](#installation)
-* [Usage](#usage)
-* [Caveats](#caveats)
-* [Examples](#examples)
-* [Contributing](#contributing)
-* [Code of Conduct](#code-of-conduct)
-* [License](#license)
-* [Acknowledgments](#acknowledgments)
-
-<a name="screenshots"></a>
-## Screenshots
-
-<a href="docs/images/color-drag-drop.gif"><img src="docs/images/color-drag-drop.gif" width="200" alt="Color Drag-and-Drop" /></a>
-<a href="docs/images/reorderable-list.gif"><img src="docs/images/reorderable-list.gif" width="200" alt="Reorderable List" /></a>
-<a href="docs/images/knight-moves.gif"><img src="docs/images/knight-moves.gif" width="200" alt="Knight Moves" /></a>
-<a href="docs/images/deck-cards.gif"><img src="docs/images/deck-cards.gif" width="200" alt="Knight Moves" /></a>
-
-(Click images to see larger versions.)
-
-<a name="status"></a>
-## Status
-
-This library adheres to [Semantic Versioning (semver)](https://semver.org/) and is in its [0.y.z initial development phase](https://semver.org/#how-should-i-deal-with-revisions-in-the-0yz-initial-development-phase). It has been released so that early adopters (such as the project author) can begin to use it in production and identify gaps in the functionality. The API is subject to potentially significant rework until version 1.0.0 is released, and any minor version increment before then may include breaking changes. Documentation and full examples are still being written.
-
-The author of this library has not had significant availability to work on it for quite a while now, due to higher priority life and work concerns. Newer versions of Drax's major dependencies have been released in that time, and many people have opened issues asking questions about usage and potential features. Relatively small fixes and easy questions are handled reasonably often, but ultimately another round of research, testing, and architecture are what would take this library to the next level of usability. It is not clear when that might happen, but [contributors are welcome](#contributing).
-
-<a name="alpha-version-breaking-changes"></a>
-## Alpha Version Breaking Changes
-
-The experimental alpha version (v0.11.0) includes significant updates to modernize the library and improve performance. However, these changes introduce breaking changes, particularly to the `DraxList` component.
-
-### DraxList Breaking Changes
-
-   - `renderItem` property signature receives different props than before and has replaced `renderItemContent` and `renderHoverContent`
-   - Receives incoming external drag items inside the list.
-   - Added `monitoringExternalDragStyle` prop for styling during incoming external drags
-   - `parentDraxViewProps` prop for customizing the parent DraxView wrapping the FlatList. You should use this prop if you were using the `style` prop on `DraxList`. (see example below)
-
-### DraxListItem Component
-
-The alpha version introduces a new `DraxListItem` component that works with `DraxList` to simplify implementation of reorderable lists. This component handles animations, measurement caching, and shift calculations internally.
-
-#### Usage Example
-
-```jsx
-import { DraxList, DraxListItem } from 'react-native-drax';
-
-const MyReorderableList = () => (
-  <DraxList
-    data={items}
-    // BREAKING CHANGE: `style` prop is now applied to internal FlatList, not to the parent DraxView
-    style={styles.list}
-
-    // should use this prop if you were using the `style` prop on `DraxList` on v0.10.3. 
-    parentDraxViewProps={{
-      style: styles.list,
-    }}
-    renderItem={(info, itemProps) => (
-      <DraxListItem
-        itemProps={itemProps}
-        style={styles.listItem}
-        draggingStyle={styles.itemDragging}
-        dragReleasedStyle={styles.itemReleased}
-        // Any other DraxView props
-      >
-        <Text>{info.item.text}</Text>
-      </DraxListItem>
-    )}
-    onItemReorder={({fromIndex, toIndex}) => {
-      // Update your data here
-      const newData = [...items];
-      const item = newData.splice(fromIndex, 1)[0];
-      newData.splice(toIndex, 0, item);
-      setItems(newData);
-    }}
-  />
-);
+| Peer Dependency | Version |
+|---|---|
+| `react` | >= 18 |
+| `react-native` | >= 0.68 |
+| `react-native-reanimated` | ^4.0.0 |
+| `react-native-gesture-handler` | >= 2.0.0 (v3 recommended) |
+
+## 🚀 Quick Start
+
+### 👋 Basic Drag-and-Drop
+
+```tsx
+import { DraxProvider, DraxView } from 'react-native-drax';
+
+function App() {
+  return (
+    <DraxProvider>
+      <DraxView
+        style={{ width: 100, height: 100, backgroundColor: 'blue' }}
+        onDragStart={() => console.log('dragging')}
+        payload="hello"
+      />
+      <DraxView
+        style={{ width: 100, height: 100, backgroundColor: 'green' }}
+        onReceiveDragDrop={({ dragged: { payload } }) => {
+          console.log(`received: ${payload}`);
+        }}
+      />
+    </DraxProvider>
+  );
+}
 ```
 
-<a name="background"></a>
-## Background
+### 📋 Sortable List
 
-To give an idea of the problem this library is trying to solve, here is some informal background:
+The simplest way to make a reorderable list:
 
-> In our React Native application we had a screen which showed a
-> FlatList of cards that could be scrolled through or individually
-> tapped to view details. We wanted to add the ability for a user
-> to long-press a card then drag it into a different position in
-> the list; in other words, we needed a reorderable list.
->
-> I figured there must already be a library out there that would
-> suit our needs. I tried out a few different packages, which each
-> looked to have pros and cons, but nothing quite worked right how
-> we expected. To complicate things further, our application used
-> `react-navigation`, which seemed to conflict with some of them.
->
-> We also had future features on our roadmap which would necessitate
-> a more generic drag-and-drop solution. I found it a bit odd that,
-> although reorderable lists and drag-and-drop have much functional
-> overlap, there didn't seem to be a package for React Native which
-> did both. It looked like React for the web was a little more mature
-> in this arena, but that didn't help us. I asked some other
-> developers if they knew of a solid React Native library for this,
-> but they agreed that it was a gap in the ecosystem.
->
-> I decided to create my own drag-and-drop library, including
-> stock components for common behaviors. The goal, first and
-> foremost, was to fulfill our draggable reorderable list wish.
-> But beyond that, I wanted a robust foundation that could be
-> used to flexibly implement various drag-and-drop-related
-> solutions. I am sure that there are scenarios I have not
-> yet considered, and I am open to input from other people
-> who are working in this space.
+```tsx
+import { useState } from 'react';
+import { Text, View } from 'react-native';
+import { DraxProvider, DraxList } from 'react-native-drax';
+
+function App() {
+  const [items, setItems] = useState(['A', 'B', 'C', 'D', 'E']);
+
+  return (
+    <DraxProvider>
+      <DraxList
+        data={items}
+        keyExtractor={(item) => item}
+        onReorder={({ data }) => setItems(data)}
+        renderItem={({ item }) => (
+          <View style={{ padding: 16, backgroundColor: '#eee', margin: 4 }}>
+            <Text>{item}</Text>
+          </View>
+        )}
+      />
+    </DraxProvider>
+  );
+}
+```
 
-<a name="concept"></a>
-## Concept
+`DraxList` is list-agnostic — pass any list component via the `component` prop:
 
-Descriptions of the library's approach, underlying implementation, and drag-and-drop event lifecycle can be found in the [Concept Document](docs/concept.md).
+```tsx
+import { FlashList } from '@shopify/flash-list';
+
+<DraxList
+  component={FlashList}
+  data={items}
+  keyExtractor={(item) => item.id}
+  onReorder={({ data }) => setItems(data)}
+  renderItem={({ item }) => <ItemCard item={item} />}
+  estimatedItemSize={60}
+/>
+```
 
-<a name="installation"></a>
-## Installation
+### 🧱 Composable API
 
-First you must have a project using `react-native` version `>=0.62`, including `react-native-gesture-handler` version `>=1.8.0`. For further information on installing the latter, see [that library's documentation](https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html).
+For full control, use the composable primitives directly:
 
-Then simply install Drax with:
+```tsx
+import {
+  DraxProvider,
+  useSortableList,
+  SortableContainer,
+  SortableItem,
+} from 'react-native-drax';
+import { FlatList } from 'react-native';
+
+function App() {
+  const [items, setItems] = useState(['A', 'B', 'C', 'D', 'E']);
+  const listRef = useRef<FlatList>(null);
+
+  const sortable = useSortableList({
+    data: items,
+    keyExtractor: (item) => item,
+    onReorder: ({ data }) => setItems(data),
+  });
+
+  return (
+    <DraxProvider>
+      <SortableContainer sortable={sortable} scrollRef={listRef}>
+        <FlatList
+          ref={listRef}
+          data={sortable.data}
+          keyExtractor={sortable.stableKeyExtractor}
+          onScroll={sortable.onScroll}
+          onContentSizeChange={sortable.onContentSizeChange}
+          renderItem={({ item, index }) => (
+            <SortableItem sortable={sortable} index={index}>
+              <Text>{item}</Text>
+            </SortableItem>
+          )}
+        />
+      </SortableContainer>
+    </DraxProvider>
+  );
+}
+```
+
+This pattern works with any list component — FlatList, FlashList, LegendList, ScrollView, etc.
 
-`yarn add react-native-drax`
+## 🎛 Features
 
-or
+### ✊ Drag Handles
 
-`npm install react-native-drax`
+Only the handle area starts a drag — the rest of the view scrolls normally:
 
-There is no Cocoapods or native linking step here. You've already covered those needs with `react-native-gesture-handler`.
+```tsx
+import { DraxView, DraxHandle } from 'react-native-drax';
+
+<DraxView dragHandle>
+  <Text>This content scrolls normally</Text>
+  <DraxHandle>
+    <GripIcon />  {/* Only this starts a drag */}
+  </DraxHandle>
+</DraxView>
+```
 
-<a name="usage"></a>
-## Usage
+### 📐 Drag Bounds
 
-### Basic Usage
+Constrain a dragged view within a boundary:
 
-Import the library components:
+```tsx
+const boundsRef = useRef<View>(null);
 
-```ts
-import { DraxProvider, DraxView } from 'react-native-drax';
+<View ref={boundsRef} style={{ flex: 1 }}>
+  <DraxView dragBoundsRef={boundsRef}>
+    <Text>I can only be dragged within the parent</Text>
+  </DraxView>
+</View>
 ```
 
-Wrap the area of your app that will use Drax with a `DraxProvider`, and create a couple `DraxView`s, one draggable and one receptive:
+### 💥 Collision Algorithms
+
+Control how receiver detection works:
 
 ```tsx
-<DraxProvider>
-    <View style={styles.container}>
-        <DraxView
-            style={styles.draggable}
-            onDragStart={() => {
-                console.log('start drag');
-            }}
-            payload="world"
-        />
-        <DraxView
-            style={styles.receiver}
-            onReceiveDragEnter={({ dragged: { payload } }) => {
-                console.log(`hello ${payload}`);
-            }}
-            onReceiveDragExit={({ dragged: { payload } }) => {
-                console.log(`goodbye ${payload}`);
-            }}
-            onReceiveDragDrop={({ dragged: { payload } }) => {
-                console.log(`received ${payload}`);
-            }}
-        />
-    </View>
-</DraxProvider>
+<DraxView collisionAlgorithm="center" />   {/* hover center inside receiver (default) */}
+<DraxView collisionAlgorithm="intersect" /> {/* any overlap triggers receiving */}
+<DraxView collisionAlgorithm="contain" />   {/* dragged view must be fully inside */}
+```
+
+### 🚫 Drop Zone Acceptance
+
+Accept or reject drops conditionally:
+
+```tsx
+<DraxView
+  acceptsDrag={(draggedPayload) => items.length < 5}
+  onReceiveDragDrop={({ dragged }) => addItem(dragged.payload)}
+/>
 ```
 
-The styles are provided here for completeness:
-
-```ts
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    draggable: {
-        width: 100,
-        height: 100,
-        backgroundColor: 'blue',
-    },
-    receiver: {
-        width: 100,
-        height: 100,
-        backgroundColor: 'green',
-    },
+### 🎨 Hover Styles
+
+Style the hover layer based on drag state:
+
+```tsx
+<DraxView
+  hoverStyle={{ opacity: 0.8 }}
+  hoverDraggingWithReceiverStyle={{ borderColor: 'green', borderWidth: 2 }}
+  hoverDraggingWithoutReceiverStyle={{ opacity: 0.5 }}
+  hoverDragReleasedStyle={{ opacity: 0.3 }}
+/>
+```
+
+### 🧲 Snap Alignment
+
+Snap dropped items to specific positions within a receiver:
+
+```tsx
+import { snapToAlignment } from 'react-native-drax';
+
+<DraxView
+  onReceiveDragDrop={({ dragged, receiver }) =>
+    snapToAlignment(receiver, dragged, 'top-left', { x: 8, y: 8 })
+  }
+/>
+```
+
+Alignments: `center`, `top-left`, `top-center`, `top-right`, `center-left`, `center-right`, `bottom-left`, `bottom-center`, `bottom-right`
+
+### 🎬 Animation Presets
+
+```tsx
+<DraxList animationConfig="spring" />  {/* spring physics */}
+<DraxList animationConfig="gentle" />  {/* soft spring */}
+<DraxList animationConfig="snappy" />  {/* fast spring */}
+<DraxList animationConfig="none" />    {/* instant */}
+
+{/* Or custom: */}
+<DraxList animationConfig={{
+  useSpring: true,
+  springDamping: 15,
+  springStiffness: 150,
+  springMass: 1,
+}} />
+```
+
+Device reduced motion settings are respected automatically.
+
+### 📡 Continuous Drag Callbacks
+
+```tsx
+<DraxView
+  onDrag={(data) => { /* fires every frame while dragging over empty space */ }}
+  onDragOver={(data) => { /* fires every frame while over the same receiver */ }}
+/>
+```
+
+### 🔀 Cross-Container Sortable (Experimental)
+
+Move items between lists (cross-list reorder):
+
+```tsx
+import {
+  useSortableBoard,
+  SortableBoardContainer,
+  useSortableList,
+  SortableContainer,
+  SortableItem,
+} from 'react-native-drax';
+
+const board = useSortableBoard({
+  onTransfer: ({ fromColumnId, toColumnId, fromIndex, toIndex, item }) => {
+    // Move item between columns
+  },
 });
+
+<SortableBoardContainer board={board}>
+  {columns.map((column) => (
+    <Column key={column.id} board={board} column={column} />
+  ))}
+</SortableBoardContainer>
 ```
 
-This will give you a blue box which can be dragged around and a green box which it can be dragged into. Watch the console log messages while you drag the blue box around, releasing the drag either in or out of the green box.
+> **Note:** Cross-container drag is experimental. The API may change in future versions.
 
-### API
+### 🏷️ Namespace API
 
-*Full API description coming soon*
+For convenience, all components are available under the `Drax` namespace:
+
+```tsx
+import { Drax } from 'react-native-drax';
+
+<Drax.Provider>
+  <Drax.View draggable>
+    <Drax.Handle><GripIcon /></Drax.Handle>
+  </Drax.View>
+</Drax.Provider>
+```
+
+## 🧩 Components
+
+| Component | Description |
+|---|---|
+| `DraxProvider` | Context provider — wrap your app's drag-and-drop area |
+| `DraxView` | Draggable and/or receptive view with 19 callback events |
+| `DraxList` | List-agnostic sortable list (convenience wrapper) |
+| `DraxHandle` | Drag handle — only this area starts a drag |
+| `DraxScrollView` | Scrollable container with auto-scroll during drag |
+| `SortableContainer` | Monitoring wrapper for composable sortable API |
+| `SortableItem` | Per-item wrapper with shift animation |
+| `SortableBoardContainer` | Cross-container board coordinator (experimental) |
+
+## 🪝 Hooks
+
+| Hook | Description |
+|---|---|
+| `useSortableList` | List-agnostic reorder state management |
+| `useSortableBoard` | Cross-container board coordinator (experimental) |
+| `useDraxContext` | Access the Drax context |
+| `useDraxId` | Generate a unique Drax view ID |
+
+## 💡 Examples
+
+The `example/` directory contains an Expo Router app with 11 screens demonstrating all features:
+
+| Screen | Features shown |
+|---|---|
+| Color Drag & Drop | Drop acceptance, hover styles, snap alignment |
+| Reorderable List | DraxList, animation presets, auto-scroll |
+| Reorderable Grid | Sortable grid with multi-column layout |
+| Mixed-Size Grid | Items with different spans (1×1, 2×2, etc.) using `getItemSpan` and `packGrid` |
+| Drag Handles | Only the grip icon starts a drag |
+| Drag Bounds | Constrain drag within a view |
+| Collision Modes | Center vs Intersect vs Contain |
+| Cross-List Reorder | FlashList + LegendList + FlatList cross-container drag (experimental) |
+| Knight Moves | Chess knight drag puzzle |
+| Scrolling | Drag from scroll view to drop zone |
+| Stress Test | 100 items in a sortable list |
+
+To run the example app:
+
+```bash
+cd example && yarn start
+```
 
-<a name="caveats"></a>
-## Caveats
+## 🔄 Migration from v0.x
 
-This library has several [known issues and limitations](https://github.com/nuclearpasta/react-native-drax/issues?q=is%3Aissue+is%3Aopen+label%3Areproduced), particularly around the [Android](https://github.com/nuclearpasta/react-native-drax/issues?q=is%3Aissue+is%3Aopen+label%3Aandroid) platform. We hope to address these and improve the library over time. For most use cases, the current functionality is probably fine.
+v1.0.0 is a complete rewrite. Key changes:
 
-This library currently expects React Native >=0.62 and React Native Gesture Handler >=1.8. Due to complexity, we cannot support the use of the library with older versions.
+- **`DraxList` is new** — list-agnostic convenience wrapper using the new sortable architecture. The old `DraxList` / `DraxListItem` API from v0.10.x and v0.11.0-alpha is removed.
+- **New sortable architecture** — `useSortableList` + `SortableContainer` + `SortableItem` composable API replaces the old array-indexed approach.
+- **Reanimated 4 + Gesture Handler 3** — required peer dependencies (Gesture Handler v2 supported via compat layer with reduced performance).
+- **New Architecture (Fabric)** compatible.
 
-<a name="examples"></a>
-## Examples
+## 📋 Changelog
 
-A reference application can be found at [`react-native-drax-example`](https://github.com/nuclearpasta/react-native-drax-example) demonstrating several use cases.
+See [CHANGELOG.md](CHANGELOG.md) for a full list of changes.
 
-If you don't want to download and run the sample application, here are two Snack examples:
+## 🤝 Contributing
 
-- [Basic drag-and-drop](https://snack.expo.io/@lafiosca/react-native-drax---basic-drag-and-drop?platform=ios)
-- [Basic reorderable list](https://snack.expo.io/@lafiosca/react-native-drax---basic-reorderable-list?platform=ios)
+Issues, pull requests, and discussion are all welcome. See the [Contribution Guidelines](CONTRIBUTING.md) for details.
 
-Note: these Snack examples will not work in the Web device. You must use an iOS (default) or Android device.
+## 📜 Code of Conduct
 
-<a name="contributing"></a>
-## Contributing
+This project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms.
 
-Issues, pull request, and discussion are all welcome. See the [Contribution Guidelines](CONTRIBUTING.md) for details, and please reach out to [the author](https://github.com/lafiosca) if you would like to participate more significantly.
+## 🏆 Contributors
 
-<a name="code-of-conduct"></a>
-## Code of Conduct
+Originally created by [Joe Lafiosca](https://github.com/lafiosca). v1.0.0 rewrite led by [Ovidiu Cristescu](https://github.com/LunatiqueCoder).
 
-Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms.
+Thanks to all contributors who have helped make Drax better:
 
-<a name="license"></a>
-## License
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/lafiosca"><img src="https://avatars.githubusercontent.com/u/9442662?v=4" width="100px;" alt="Joe Lafiosca"/><br /><sub><b>Joe Lafiosca</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=lafiosca" title="Code">💻</a> <a href="https://github.com/nuclearpasta/react-native-drax/commits?author=lafiosca" title="Documentation">📖</a> <a href="#example-lafiosca" title="Examples">💡</a> <a href="#maintenance-lafiosca" title="Maintenance">🚧</a> <a href="#infra-lafiosca" title="Infrastructure">🚇</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/LunatiqueCoder"><img src="https://avatars.githubusercontent.com/u/55203625?v=4" width="100px;" alt="Ovidiu Cristescu"/><br /><sub><b>Ovidiu Cristescu</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=LunatiqueCoder" title="Code">💻</a> <a href="https://github.com/nuclearpasta/react-native-drax/commits?author=LunatiqueCoder" title="Documentation">📖</a> <a href="#example-LunatiqueCoder" title="Examples">💡</a> <a href="#maintenance-LunatiqueCoder" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Auticiel"><img src="https://avatars.githubusercontent.com/u/8429221?v=4" width="100px;" alt="François Dupayrat"/><br /><sub><b>François Dupayrat</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=Auticiel" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jmarnold"><img src="https://avatars.githubusercontent.com/u/181667?v=4" width="100px;" alt="Josh Arnold"/><br /><sub><b>Josh Arnold</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=jmarnold" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rnz269"><img src="https://avatars.githubusercontent.com/u/20953181?v=4" width="100px;" alt="Rahul Nallappa"/><br /><sub><b>Rahul Nallappa</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=rnz269" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/negue"><img src="https://avatars.githubusercontent.com/u/842273?v=4" width="100px;" alt="negue"/><br /><sub><b>negue</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=negue" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/chrisdrackett"><img src="https://avatars.githubusercontent.com/u/4378?v=4" width="100px;" alt="Chris Drackett"/><br /><sub><b>Chris Drackett</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=chrisdrackett" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sturdynut"><img src="https://avatars.githubusercontent.com/u/8547391?v=4" width="100px;" alt="Matti Salokangas"/><br /><sub><b>Matti Salokangas</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=sturdynut" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/afgarcia86"><img src="https://avatars.githubusercontent.com/u/3606053?v=4" width="100px;" alt="Andres Garcia"/><br /><sub><b>Andres Garcia</b></sub></a><br /><a href="https://github.com/nuclearpasta/react-native-drax/commits?author=afgarcia86" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This software library is licensed under the [MIT License](LICENSE.md).
+## 📃 License
 
-<a name="acknowledgements"></a>
-## Acknowledgments
+[MIT](LICENSE.md)
 
-The initial version of this library was written by [Joe Lafiosca](https://github.com/lafiosca) over the course of December 2019. Joe would like to give thanks to Nuclear Pasta co-founder Mark Thomas for being patient with the development process. Joe would also like to give thanks to Lena Raine, Tom Jenkinson, Rollie Pemberton, David Minnick, Tim Smith, and Danny Baranowsky for providing most of the coding background music that inspired this work.
+---
 
-Special thanks go to the folks who have contributed donations toward this project. (If you are a sponsor and would like your name listed here, please let me know! I do not want to make assumptions about people's privacy preferences.)
+Built and maintained using [OpenKit](https://www.openkit.work/).