repository·master·Indexed 18 days ago
https://github.com/shisme/react-native-draggable-gridA React Native component for displaying items in a grid layout that can be reordered via drag-and-drop gestures. Version 2.2.2 provides the DraggableGrid component, which supports custom drag start animations, configurable column counts, and item-level controls such as disabling drag or re-sorting for specific elements.
To add, delete, or manually reorder items in the grid, simply modify the data prop passed to DraggableGrid. The component will automatically calculate the necessary changes (additions, deletions, or movements) based on the new array.
Important: Every object in the data array must have a unique key (or ID) so the component can track identity during transitions.
data array. The DraggableGrid will automatically re-sort the view based on the new order of your data. Ensure that every item in your data has a unique key.To add the draggable grid component to your React Native project, install it using npm:
npm install react-native-draggable-grid --saveYou can provide a custom animation to the dragStartAnimation prop. This prop accepts an object containing animation properties (like transform). You should also use the onDragStart event to trigger the animation logic (e.g., using Animated.timing).
// Inside your component
render() {
return (
<View style={styles.wrapper}>
<DraggableGrid
numColumns={4}
renderItem={this.render_item}
data={this.state.data}
onDragStart={this.onDragStart}
dragStartAnimation={{
transform: [
{ scale: this.state.animatedValue }
],
}}
/>
</View>
);
}
private onDragStart = () => {
this.state.animatedValue.setValue(1);
Animated.timing(this.state.animatedValue, {
toValue: 3,
duration: 400,
}).start();
}Each item in the data array can implement specific properties from IBaseItemType to control its behavior within the grid:
key: (Required) A unique identifier for the item.disabledDrag: If true, the item cannot be picked up to start a drag gesture.disabledReSorted: If true, the item will not move when other items are dragged around it, effectively acting as a fixed anchor in the sorting logic.You can provide a custom animation to the dragStartAnimation prop. This typically involves using Animated from react-native and triggering the animation within the onDragStart event handler.
// Inside your component
render() {
return (
<DraggableGrid
numColumns={4}
renderItem={this.render_item}
data={this.state.data}
onDragStart={this.onDragStart}
dragStartAnimation={{
transform: [
{ scale: this.state.animatedValue }
],
}}
/>
);
}
private onDragStart = () => {
this.state.animatedValue.setValue(1);
Animated.timing(this.state.animatedValue, {
toValue: 3,
duration: 400,
}).start();
}To use DraggableGrid, provide a data array where each item has a unique identifier, a numColumns value, and a renderItem function. To ensure the grid updates correctly after a user finishes dragging, you should update your component's state with the new data returned by the onDragRelease event. This allows the component to reconcile the new order with its internal cache.
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { DraggableGrid } from 'react-native-draggable-grid';
export class MyTest extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ name: '1', key: 'one' },
{ name: '2', key: 'two' },
// ... more items
],
};
}
render_item = (item) => (
<View style={styles.item} key={item.key}>
<Text style={styles.item_text}>{item.name}</Text>
</View>
);
render() {
return (
<View style={styles.wrapper}>
<DraggableGrid
numColumns={4}
renderItem={this.render_item}
data={this.state.data}
onDragRelease={(newData) => {
this.setState({ data: newData });
}}
/>
</View>
);
}
}The following props are available on the DraggableGrid component:
numColumns (number, required): how many items should be render on one row
data (array, required): data's item must have unique key, item's render will depend on the key
renderItem ((item, order:number) => ReactElement, required): Takes an item from data and renders it into the list
itemHeight (number, optional): if not set this, it will the same as itemWidth
dragStartAnimation (object, optional): custom drag start animation
style (object, optional): grid stylesWhen rendering items, you can control individual item behavior using these props (passed to the item context or handled via the component logic):
| Prop | Type | Required | Description |
|---|---|---|---|
disabledDrag | boolean | No | Disables dragging for this specific item |
disabledReSorted | boolean | No | If true, this item will be ignored during the re-sorting process when dragged |
These props can be applied to items within the grid to control their behavior:
disabledDrag (boolean, optional): It will disable drag for the item
disabledReSorted (boolean, optional): It will disable resort the itemThe following props are available for the DraggableGrid component:
| Prop | Type | Required | Description |
|---|---|---|---|
numColumns | number | Yes | Number of columns to render per row |
data | array | Yes | Data array. Each item must have a unique ID for rendering and sorting |
renderItem | (item, order: number) => ReactElement | Yes | Function to render each sub-component |
itemHeight | number | No | Height of the sub-component. If not set, it defaults to the calculated itemWidth |
dragStartAnimation | object | No | Custom animation object to trigger when dragging starts |
style | object | No | Container style for the grid |
The following event handlers are available on the DraggableGrid component:
onItemPress ((item) => void, optional): Function will execute when item on press
onDragStart ((startDragItem) => void, optional): Function will execute when item start drag
onDragRelease ((data) => void, optional): Function will execute when item release, and will return the new ordered data
onResetSort ((data) => void, optional): Function will execute when dragged item change sort
onDragging ((gestureState: PanResponderGestureState) => void, optional): Function will execute when dragging item
onDragItemActive ((item) => void, optional): Function will execute when any item active