# react-native-sortables: drag to reorder, in grid or flex

> React Native Sortables is a TypeScript library of sortable components for React Native, built on Reanimated and Gesture Handler, that lets the children of a grid or a flex container be reordered by dragging them, with auto-scrolling past the screen edge, layout animations, optional haptics and both insertion and swapping strategies. Its one sharp edge is a gesture-handler 2.x bug on iOS that leaves a dragged item stuck.

**MatiPl01/react-native-sortables** — 🚀 Powerful Sortable Components for Flexible Content Reordering in React Native

- Repository: https://github.com/MatiPl01/react-native-sortables
- Website: https://react-native-sortables-docs.vercel.app/
- Stars: 981 · Forks: 29
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/matipl01-react-native-sortables

## Children you reorder by dragging them

React Native Sortables provides specialised components whose children can be dynamically reordered through natural dragging gestures, and the library describes itself as powerful and easy to use. The scope is narrower than a general drag and drop library, and that is what makes it small enough to learn. You do not build a draggable system; you put your items into a Grid or a Flex component and the reordering comes for free. Two layout options are supported, grid and flex, and the items may have different dimensions, which is the case that most grid implementations get wrong when a cell is not a square. The components are typed, the API is small, and the readme describes the setup as minimal. The documentation site, a separate repository of real world demos and a set of simple usage examples are linked from the readme, and there is a contributing guide for anyone who wants to add to it.

## Reanimated and Gesture Handler are the real dependencies

The library is built with react-native-reanimated and react-native-gesture-handler, and the readme pins the supported versions: Reanimated 3.x or 4.x, and Gesture Handler 2.x or 3.x. You are told to follow their own installation instructions for your project, which is a hint about how much of the setup work belongs to them rather than to this library. Both architectures are supported, the Old Architecture and the New Architecture, and the library is TypeScript throughout, with a typed render item such as SortableGridRenderItem for the generic. It is also Expo compatible, which matters more than it used to, because a drag gesture that runs on the UI thread and a library that has to work inside a managed workflow are not always compatible. The readme claims performance and reliability as a feature, which in practice means the animation work is kept off the JavaScript thread, and the version matrix above is the price of that.

## The gesture-handler 2.x bug that leaves a dragged item stuck

The readme carries one explicit warning, and it is the most useful thing on the page. On iOS with the New Architecture, gesture-handler 2.x can leave a dragged item stuck after its screen is detached and re-attached, with the example given being bottom tabs configured with detachInactiveScreens set to false, tracked as issue 349. The resolution is stated too. Gesture Handler 3 fixes it, and the library uses version 3 automatically when it is installed, while version 3 itself requires the New Architecture. The Old Architecture is unaffected, so version 2.x is the right choice there. That last sentence is the practical takeaway, because the choice of dependency version is not a preference but a consequence of your architecture, and a stuck dragged item is the kind of bug that only appears in a navigation setup you do not use during development.

## Insertion or swapping, plus the small touches

The reordering behaviour is a choice rather than a fixed rule, and the library offers different reordering strategies, insertion and swapping. Insertion means the dragged item takes a position and the others shift, swapping means two items trade places, and the difference is visible the moment a list is nearly full or the items have different sizes. Three further features are the ones that make a drag feel finished rather than functional. Auto-scrolling beyond the screen bounds lets you drag an item to a position you cannot see, which is the thing a hand-rolled implementation usually misses. Customizable layout animations handle the addition and removal of items, so the list animates instead of jumping when data changes. And haptic feedback is integrated, optionally, through react-native-pulsar, expo-haptics or react-native-haptic-feedback, which is the difference between a drag that feels physical and one that feels like a mouse.

## The API you write against

The quick start is a self contained component. You build a data array, define a render item with useCallback and a typed signature, and hand everything to the Grid:

```tsx
    return (
      <Sortable.Grid
        columns={3}
        data={DATA}
        renderItem={renderItem}
        rowGap={10}
        columnGap={10}
      />
    );
```

The props are the ordinary grid props, the column count, the data, the render function and the two gap values, and the library does the rest. The import style is a default import of Sortable from react-native-sortables, with the types imported separately as type imports, which is what a strict TypeScript project wants. A minimal setup does not mean a small API in the sense of features, it means a small API in the sense of concepts, and the readme points at the documentation site for the detailed usage and for the grid examples.

## Running the four example apps

The repository is a Yarn workspaces monorepo and the examples are part of it, so the local workflow is a clone, an install and a start. The setup steps are:

```bash
git clone https://github.com/MatiPl01/react-native-sortables.git
cd react-native-sortables
yarn
yarn pod  # iOS only
```

The pod step installs the iOS native dependencies, and the readme notes it is iOS only. There are four example applications, fabric for the React Native Fabric renderer, paper for the React Native Paper example, expo for the Expo workflow, and web. You enter one and start it:

```bash
cd example/fabric  # or any other example
yarn start
```

The same thing can be run from the project root with a workspace-prefixed command, for example yarn example:fabric start, yarn example:paper android or yarn example:expo ios, and the app is then built with yarn ios or yarn android, or in Xcode and Android Studio. Having the example apps in the tree is the useful part, because a drag can be checked in a running app rather than assumed to work.

## The repository conventions behind the library

The tooling in the root tells you how the project is maintained. Yarn 4.9.2 is the pinned package manager, the workspace layout puts the library, the documentation package and the example apps side by side, and the scripts are workspace aware, with a lib script for the library, a docs script, and example scripts for each app. Formatting and linting run through husky and lint-staged, which formats the code with Prettier and fixes it with ESLint, and it also runs syncpack format on the package.json files so that dependency version ranges stay consistent across workspaces. The ESLint setup uses a shared config package, eslint-config-react-native-matipl01, and the tests use Jest with ts-jest. There is an .nvmrc, an .editorconfig, a .prettierrc and a .yarnrc.yml, so the environment is pinned rather than assumed. The library is MIT licensed, the newest release is v1.10.1 from 2026-09-26 after v1.10.0 in July, and the last push was on the same day as that release, so the project moves with its own release cycle rather than a fixed schedule.

## Conclusion

The library fits any React Native app that needs a reorderable list or grid, especially a photo or task board, because it handles the parts that are tedious to build: auto-scrolling past the edge, the layout animations when an item is added or removed, and the haptic feedback that makes a drag feel physical. It is the wrong choice if you cannot take on Reanimated and Gesture Handler as dependencies, or if you need a behaviour it does not offer, such as multi-select dragging. Before you install, read the gesture-handler note carefully, because the right version of that dependency depends on whether you are on the New Architecture, and pin the version of the library you tested since the API is still moving.

## FAQ

### What is React Native Sortables?

It is a TypeScript library of sortable components for React Native. The children of a Grid or a Flex component can be reordered by dragging them, with support for items of different dimensions, auto-scrolling beyond the screen, layout animations and optional haptic feedback.

### How do I install React Native Sortables?

Run npm install react-native-sortables or yarn add react-native-sortables. The library is built on react-native-reanimated 3.x or 4.x and react-native-gesture-handler 2.x or 3.x, and you are expected to follow those projects' own installation instructions.

### Which version of react-native-gesture-handler should I use?

On the New Architecture, use gesture-handler 3.x, because version 2.x can leave a dragged item stuck on iOS after a screen is detached and re-attached, tracked as issue 349. The Old Architecture is unaffected, so 2.x is the right choice there.

### Does React Native Sortables work with Expo?

Yes, Expo compatibility is listed as a feature. The repository also ships an Expo example app alongside the Fabric, Paper and web examples, all of which can be started with yarn from the example directory or with a workspace prefixed command from the root.

## Sources

- [License: MIT](https://github.com/MatiPl01/react-native-sortables/blob/main/LICENSE)
- [MatiPl01/react-native-sortables on GitHub](https://github.com/MatiPl01/react-native-sortables)
- [Project website](https://react-native-sortables-docs.vercel.app/)
- [README](https://github.com/MatiPl01/react-native-sortables/blob/main/README.md)
- [Releases](https://github.com/MatiPl01/react-native-sortables/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/matipl01-react-native-sortables