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.

• 🎯 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

• npm

npm install react-native-sortables

• yarn

yarn add react-native-sortables

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.

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.

1. Clone and setup:

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

2. 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

3. Build and run:

   • iOS: yarn ios or build in Xcode
   • Android: yarn android or build in Android Studio

Contributions are welcome! Please read the Contributing Guide for details.

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

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

(back to top)