react-native-swappable-grid 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,6 +13,52 @@ A powerful React Native component for creating draggable, swappable grid layouts
|
|
|
13
13
|
- 🔄 **Order Tracking**: Callbacks for order changes and drag end events
|
|
14
14
|
- ⚡ **Performance**: Built with React Native Reanimated and Gesture Handler for 60fps animations
|
|
15
15
|
|
|
16
|
+
## 📱 Demo
|
|
17
|
+
|
|
18
|
+
<h3 align="center">
|
|
19
|
+
Drag and swap items
|
|
20
|
+
</h3>
|
|
21
|
+
|
|
22
|
+
<div align="center">
|
|
23
|
+
<img src="./assets/re-order.gif" width="300" height="auto" />
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
</br>
|
|
27
|
+
</br>
|
|
28
|
+
|
|
29
|
+
<h3 align="center">
|
|
30
|
+
Add new items. Grid adjustes its size dynamically
|
|
31
|
+
</h3>
|
|
32
|
+
|
|
33
|
+
<div align="center">
|
|
34
|
+
<img src="./assets/add-items-and-re-order.gif" width="300" height="auto" />
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</br>
|
|
38
|
+
</br>
|
|
39
|
+
|
|
40
|
+
<h3 align="center">
|
|
41
|
+
Hold still to Delete items
|
|
42
|
+
</h3>
|
|
43
|
+
|
|
44
|
+
<div align="center">
|
|
45
|
+
<img src="./assets/hold-to-delete.gif" width="300" height="auto" />
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
</br>
|
|
49
|
+
</br>
|
|
50
|
+
|
|
51
|
+
<h3 align="center">
|
|
52
|
+
Drag to Delete items
|
|
53
|
+
</h3>
|
|
54
|
+
|
|
55
|
+
<div align="center">
|
|
56
|
+
<img src="./assets/drag-to-delete.gif" width="300" height="auto" />
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
</br>
|
|
60
|
+
</br>
|
|
61
|
+
|
|
16
62
|
## Example Project
|
|
17
63
|
|
|
18
64
|
To see common usages and examples. Check out the example project 🚀
|
|
@@ -163,9 +209,6 @@ return (
|
|
|
163
209
|
<SwappableGrid ref={gridRef} ... />
|
|
164
210
|
</Pressable>
|
|
165
211
|
)
|
|
166
|
-
|
|
167
|
-
// Cancel delete mode programmatically
|
|
168
|
-
gridRef.current?.cancelDeleteMode();
|
|
169
212
|
```
|
|
170
213
|
|
|
171
214
|
| Method | Description |
|
|
@@ -255,7 +298,7 @@ gridRef.current?.cancelDeleteMode();
|
|
|
255
298
|
</SwappableGrid>
|
|
256
299
|
```
|
|
257
300
|
|
|
258
|
-
### With Delete Component (custom component where you can drag items into
|
|
301
|
+
### With Delete Component (custom component where you can drag items into to delete. Kind of like a trashcan)
|
|
259
302
|
|
|
260
303
|
**Note**: By default HoldToDelete is enabled if you have a onDelete prop. If you use DeleteComponent then only DeleteComponent is used as the way to delete. In other words. You can choose to either delete items by holding or by using DeleteComponent.
|
|
261
304
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-swappable-grid",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "A React Native component for creating draggable, swappable grid layouts with reordering, delete functionality, and smooth animations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|