A React Native component for creating draggable and sortable grid layouts with customizable animations.
react-native-draggable-grid is a React Native library that provides a flexible grid component where items can be dragged and reordered. It enables developers to build interactive interfaces like customizable dashboards, icon arrangements, or sortable lists within mobile applications by offering smooth drag-and-drop functionality with configurable layouts and event handling.
React Native developers building mobile applications that require interactive, reorderable grid layouts, such as customizable dashboards, app icon organizers, or sortable content lists.
Developers choose this library for its simplicity, performance, and high customizability, including support for custom drag-start animations, granular event handling, and the ability to disable drag or reordering for specific items, providing a smooth user interaction experience.
A draggable and sortable grid of react-native
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows configurable number of columns and item dimensions through props like numColumns and itemHeight, enabling adaptive grid designs as shown in the usage example.
Supports multiple drag events such as onDragStart, onDragRelease, and onItemPress, providing fine-tuned control over user interactions detailed in the event props table.
Enables custom drag-start animations using React Native's Animated API, demonstrated in the README with transform scales for enhanced visual feedback.
Offers options to disable drag or reordering for specific items via disabledDrag and disabledReSorted props, allowing for mixed interactive states as illustrated in the example GIF.
The README provides basic usage and prop tables but lacks advanced examples, troubleshooting guides, or best practices, which could hinder complex implementations.
Uses the NPL (996 Prohibited License), which is controversial and may not be suitable for all projects, especially in corporate or commercial environments.
Requires developers to manually update the data array on drag release, as shown in the onDragRelease callback where this.setState({data}) is needed, adding complexity.
Focused on single-grid reordering without built-in features for dragging items between multiple grids or lists, limiting more complex interface designs.