https://github.com/MatiPl01/react-native-sortables
🚀 Powerful Sortable Components for Flexible Content Reordering in React Native
https://github.com/MatiPl01/react-native-sortables
dnd drag-and-drop drag-n-drop draggable draggable-flex draggable-grid flex grid react-native react-native-gesture-handler react-native-reanimated sortable-flex sortable-grid
Last synced: 6 days ago
JSON representation
🚀 Powerful Sortable Components for Flexible Content Reordering in React Native
- Host: GitHub
- URL: https://github.com/MatiPl01/react-native-sortables
- Owner: MatiPl01
- License: mit
- Created: 2024-04-30T15:09:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-01T10:16:29.000Z (26 days ago)
- Last Synced: 2026-04-01T10:28:24.340Z (26 days ago)
- Topics: dnd, drag-and-drop, drag-n-drop, draggable, draggable-flex, draggable-grid, flex, grid, react-native, react-native-gesture-handler, react-native-reanimated, sortable-flex, sortable-grid
- Language: TypeScript
- Homepage: https://react-native-sortables-docs.vercel.app/
- Size: 26.9 MB
- Stars: 926
- Watchers: 3
- Forks: 24
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-sortables - Drag-and-drop sortable grid and list components with gesture-based reordering. (UI Components / Lists & Tables)
README
# 
React Native Sortables
**Powerful Sortable Components for Flexible Content Reordering in React Native**
[Documentation](https://react-native-sortables-docs.vercel.app/) | [Real-World Examples](https://github.com/MatiPl01/react-native-sortables-demos) | [Simple Usage Examples](https://react-native-sortables-docs.vercel.app/grid/examples) | [Contributing](./CONTRIBUTING.md)
## Overview
React Native Sortables is a powerful and easy-to-use library that brings smooth, intuitive content reordering to React Native. It provides specialized components whose children can be dynamically reordered through natural dragging gestures.
## Key Features
- 🎯 **Flexible Layouts**
- **Grid** and **Flex** layout options
- Support for items with **different dimensions**
- 🚀 **Performance & Reliability**
- Built with [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) and [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/)
- Supports both **Old** and **New Architecture**
- Type safe with **TypeScript**
- **Expo** compatible
- ✨ **Rich Interactions**
- **Auto-scrolling** beyond screen bounds
- Customizable **layout animations** for items addition and removal
- Built-in **haptic feedback** integration (requires [react-native-haptic-feedback](https://github.com/mkuczera/react-native-haptic-feedback) dependency)
- Different **reordering strategies** (insertion, swapping)
- 💡 **Developer Experience**
- Simple API with powerful **customization**
- **Minimal setup** required
- ➕ [More features](https://react-native-sortables-docs.vercel.app/#-key-features)
## Installation
- npm
```sh
npm install react-native-sortables
```
- yarn
```sh
yarn add react-native-sortables
```
### Dependencies
This library is built with:
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) (version 3.x, 4.x)
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/) (version 2.x)
Make sure to follow their installation instructions for your project.
## Quick Start
```tsx
import { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';
const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
export default function Grid() {
const renderItem = useCallback>(
({ item }) => (
{item}
),
[]
);
return (
);
}
const styles = StyleSheet.create({
card: {
backgroundColor: '#36877F',
height: 100,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center'
}
});
```
For detailed usage and examples, check out the [Documentation](https://react-native-sortables-docs.vercel.app/).
## Local Library Development
1. Clone and setup:
```bash
git clone https://github.com/MatiPl01/react-native-sortables.git
cd react-native-sortables
yarn
yarn pod # iOS only
```
2. Start an example app:
```bash
cd example/fabric # or any other example
yarn start
```
Available example apps:
- `fabric` - React Native Fabric example
- `paper` - React Native Paper example
- `expo` - Expo example
- `web` - Web example
You can also run commands from the project root using the `yarn example: ` syntax, e.g.:
```bash
yarn example:fabric start
yarn example:paper android
yarn example:expo ios
```
3. Build and run:
- iOS: `yarn ios` or build in Xcode
- Android: `yarn android` or build in Android Studio
## Contributing
Contributions are welcome! Please read the [Contributing Guide](./CONTRIBUTING.md) for details.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support
- 🌟 Star this repo to show support
- 🐛 Report bugs by [creating an issue](https://github.com/MatiPl01/react-native-sortables/issues)
- 💡 Request features in discussions [open a discussion](https://github.com/MatiPl01/react-native-sortables/discussions)