MatiPl01
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
Installation
- npm
npm install react-native-sortables- yarn
yarn add react-native-sortablesDependencies
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 onlyStart an example app:
cd example/fabric # or any other example yarn startAvailable example apps:
fabric- React Native Fabric examplepaper- React Native Paper exampleexpo- Expo exampleweb- 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 iosBuild and run:
- iOS:
yarn iosor build in Xcode - Android:
yarn androidor build in Android Studio
- iOS:
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