React Native Sortables

Powerful Sortable Components for Flexible Content Reordering in React Native

Documentation | Real-World Examples | Simple Usage Examples | Contributing

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
✨ 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 dependency)
- Different reordering strategies (insertion, swapping)
💡 Developer Experience
- Simple API with powerful customization
- Minimal setup required
➕ More features

Installation

npm

npm install react-native-sortables

yarn

yarn add react-native-sortables

Dependencies

This library is built with:

react-native-reanimated (version 3.x, 4.x)
react-native-gesture-handler (version 2.x)

Make sure to follow their installation instructions for your project.

Quick Start

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<SortableGridRenderItem<string>>(
    ({ item }) => (
      <View style={styles.card}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#36877F',
    height: 100,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

For detailed usage and examples, check out the Documentation.

Local Library Development

Clone and setup:

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

Start an example app:
```
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:<name> <command> syntax, e.g.:
```
yarn example:fabric start
yarn example:paper android
yarn example:expo ios
```
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 for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

🌟 Star this repo to show support
🐛 Report bugs by creating an issue
💡 Request features in discussions open a discussion

(back to top)