react-native-drax

react-native-drax

Visit the official documentation

See the live example

Overview

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.

Built on Reanimated 4 and Gesture Handler 3 with a UI-thread-first architecture for smooth 60fps interactions.

Platforms: iOS, Android, Web

✨ 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?

See full comparison →

Installation

npm install react-native-drax
# or
yarn add react-native-drax

Peer Dependencies

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

Quick Start

Basic Drag-and-Drop

import { DraxProvider, DraxView } from 'react-native-drax';

function App() {
  return (
    
       console.log('dragging')}
        payload="hello"
      />
       {
          console.log(`received: ${payload}`);
        }}
      />
    
  );
}

Sortable List

The simplest way to make a reorderable list:

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 (
    
       item}
        onReorder={({ data }) => setItems(data)}
        renderItem={({ item }) => (
          
            {item}
          
        )}
      />
    
  );
}

DraxList is list-agnostic — pass any list component via the component prop:

import { FlashList } from '@shopify/flash-list';

 item.id}
  onReorder={({ data }) => setItems(data)}
  renderItem={({ item }) => }
  estimatedItemSize={60}
/>

Composable API

For full control, use the composable primitives directly:

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(null);

  const sortable = useSortableList({
    data: items,
    keyExtractor: (item) => item,
    onReorder: ({ data }) => setItems(data),
  });

  return (
    
      
         (
            
              {item}
            
          )}
        />
      
    
  );
}

This pattern works with any list component — FlatList, FlashList, LegendList, ScrollView, etc.

Features

✊ Drag Handles

Only the handle area starts a drag — the rest of the view scrolls normally:

import { DraxView, DraxHandle } from 'react-native-drax';

  This content scrolls normally
  
      {/* Only this starts a drag */}
  

Drag Bounds

Constrain a dragged view within a boundary:

const boundsRef = useRef(null);

  
    I can only be dragged within the parent
  

Collision Algorithms

Control how receiver detection works:

   {/* hover center inside receiver (default) */}
 {/* any overlap triggers receiving */}
   {/* dragged view must be fully inside */}

Drop Zone Acceptance

Accept or reject drops conditionally:

 items.length  addItem(dragged.payload)}
/>

Hover Styles

Style the hover layer based on drag state:

Snap Alignment

Snap dropped items to specific positions within a receiver:

import { snapToAlignment } from 'react-native-drax';

    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

  {/* spring physics */}
  {/* soft spring */}
  {/* fast spring */}
    {/* instant */}

{/* Or custom: */}

Device reduced motion settings are respected automatically.

Continuous Drag Callbacks

 { /* 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):

import {
  useSortableBoard,
  SortableBoardContainer,
  useSortableList,
  SortableContainer,
  SortableItem,
} from 'react-native-drax';

const board = useSortableBoard({
  onTransfer: ({ fromColumnId, toColumnId, fromIndex, toIndex, item }) => {
    // Move item between columns
  },
});

  {columns.map((column) => (
    
  ))}

Note: Cross-container drag is experimental. The API may change in future versions.

️ Namespace API

For convenience, all components are available under the Drax namespace:

import { Drax } from 'react-native-drax';

  
    
  

Components

Hooks

Examples

The example/ directory contains an Expo Router app with 11 screens demonstrating all features:

To run the example app:

cd example && yarn start

Migration from v0.x

v1.0.0 is a complete rewrite. Key changes:

• 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.

Changelog

See CHANGELOG.md for a full list of changes.

Contributing

Issues, pull requests, and discussion are all welcome. See the Contribution Guidelines for details.

Code of Conduct

This project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Contributors

Originally created by Joe Lafiosca. v1.0.0 rewrite led by Ovidiu Cristescu.

Thanks to all contributors who have helped make Drax better:

Joe Lafiosca

Ovidiu Cristescu

François Dupayrat

Josh Arnold

Rahul Nallappa

negue

Chris Drackett

Matti Salokangas

Andres Garcia

License

MIT

Built and maintained using OpenKit.