react-native-sortables

React Native Sortables

Powerful Sortable Components for Flexible Content Reordering in React Native

Documentation | 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

  • Built with react-native-reanimated and 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 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)
• 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.

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)