# react-native-yet-another-sortable

> Drag-and-drop sortable scrollable grid view for React Native.

Latest version **2.0.1** (published 2026-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-yet-another-sortable
pnpm add react-native-yet-another-sortable
yarn add react-native-yet-another-sortable
bun add react-native-yet-another-sortable
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2026-05-16 |
| First published | 2020-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 8 |
| Author | k5md |
| Maintainers | k5md |
| Keywords | drag-drop, scrollable, draggable, sortable, grid, list, performance |

## Links

- npm: https://www.npmjs.com/package/react-native-yet-another-sortable
- Repository: https://github.com/k5md/react-native-yet-another-sortable
- Homepage: https://github.com/k5md/react-native-yet-another-sortable#readme
- Issues: https://github.com/k5md/react-native-yet-another-sortable/issues
- npm.io page: https://npm.io/package/react-native-yet-another-sortable

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2026-05-16
- 1.0.0 — 2020-08-16
- 0.0.0-development — 2020-08-16

## README

# react-native-yet-another-sortable

## Features
A sortable scrollable grid / list component for React Native, essentially based on `react-native-sortable-grid`. Does not require `react-native-reanimated`.
* Change number of columns and row height on the fly
* Performant item additions, deletions, order shuffles, container width/height changes
* Controllable order
* Allows for not-swappable and not-draggable grid elements
* Auto-scroll when dragged item is close to container's borders

<p align="center">
  <img src="assets/sortable-illustration.gif" alt="Demo" width="320">
</p>

## Installation
```
npm install react-native-yet-another-sortable --save
```

## Usage
Check out [example project](https://github.com/k5md/react-native-yet-another-sortable/tree/master/example).

Or check a minimal example to copy-paste:

### Minimal SortableGrid example
```jsx
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { SortableGrid } from 'react-native-yet-another-sortable';
const Component = () => {
  const [ items, setItems ] = useState(Array.from({ length: 5 }, (_, i) => ({ value: i, key: i })));
  const [ order, setOrder ] = useState(items.map(({ key }) => key));
  return (
    <SortableGrid
      items={items}
      order={order}
      renderItem={({ value }) => (<View><Text>{value}</Text></View>)}
      onDeactivateDrag={(order) => setOrder(order)}
    />
  );
};
```

## API
Autogenerated documentation is [here](./API.md).

## Q&A

### How make certain items not draggable?
When passing items array set `dragDisabled` property to `true` for those items that you don't want to be draggable.

### How to make certain items fixed?
Provide a `fixed` prop with a `Set` of keys.

### How to use custom activation animation or add haptic feedback?
1. Use `animateActiveStyle` property by providing function to animate activation progress `animation` like this:
```jsx
  (animation) => requestAnimationFrame(() => {
    animation.setValue(1);
    Animated.spring(animation, { toValue: 0, velocity: 2000, tension: 2000, friction: 5, useNativeDriver: true }).start();
  })
```
2. Use `getActiveStyle` property by providing function that maps the `animation` to active Cell style:
```jsx
  (animation) => ({
    transform: [ { rotate: animation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '1deg'] }) } ],
    elevation: 10,
    zIndex: 1,
  })
```

Other side-effects could be performed in `onActivateDrag` callback.

## Development
In order to develop the application or build android .apk from the sources one should:
1. Clone this repository
2. Navigate to parent directory and install dev dependencies with `npm ci` for linting `npm run lint` and typescript typechecking `npm run typecheck`.
3. Navigate to example folder: `cd example`
4. Install example project dependencies `npm ci`, since library has only peer dependencies
5. Run Metro bundler with `npm run start`
6. Connect physical device or an emulator via adb, like this (tested with [mEMU](https://www.memuplay.com/)):
	- `adb connect 127.0.0.1:21503`
	- `adb reverse tcp:8081 tcp:8081`
7. Build and watch with `npm run-android`, changes from src directory are picked automatically because of example metro and babel configurations.

**Note:** example project is configured in [a way](./example/metro.config.js), that may cause issues if you save anything as a regular dependency in parent library

## Contributions
PR are always welcome!

---
_Source: https://npm.io/package/react-native-yet-another-sortable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._