react-native-swappable-grid 1.0.0 → 1.0.1
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 +56 -24
- package/package.json +20 -20
package/README.md
CHANGED
|
@@ -13,6 +13,11 @@ 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
|
+
## Example Project
|
|
17
|
+
|
|
18
|
+
To see common usages and examples. Check out the example project 🚀
|
|
19
|
+
- [react-native-swappable-grid-example-app-repo](https://github.com/WilliamDanielsson/react-native-swappable-grid-example)
|
|
20
|
+
|
|
16
21
|
## Installation
|
|
17
22
|
|
|
18
23
|
```bash
|
|
@@ -33,8 +38,35 @@ yarn add react react-native react-native-gesture-handler react-native-reanimated
|
|
|
33
38
|
|
|
34
39
|
**Important**: Make sure to follow the setup instructions for:
|
|
35
40
|
|
|
36
|
-
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)
|
|
37
|
-
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/
|
|
41
|
+
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/)
|
|
42
|
+
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
|
|
43
|
+
|
|
44
|
+
**TLDR**: Wrap your app with the GestureHandlerRootView inside RootLayout in _layout.tsx
|
|
45
|
+
|
|
46
|
+
Additional fix for now: Disable Strict Mode for Reanimated because of logger warnings did I did not manage to get rid of.
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { Slot } from "expo-router";
|
|
50
|
+
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
|
51
|
+
import {
|
|
52
|
+
configureReanimatedLogger,
|
|
53
|
+
ReanimatedLogLevel,
|
|
54
|
+
} from "react-native-reanimated";
|
|
55
|
+
|
|
56
|
+
// Strict mode is disabled because it gave warnings in SwappableGrid with useSharedValue()
|
|
57
|
+
configureReanimatedLogger({
|
|
58
|
+
level: ReanimatedLogLevel.warn, // Only log warnings & errors
|
|
59
|
+
strict: false, // Disable strict mode warnings
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
export default function RootLayout() {
|
|
63
|
+
return (
|
|
64
|
+
<GestureHandlerRootView>
|
|
65
|
+
<Slot />
|
|
66
|
+
</GestureHandlerRootView>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
38
70
|
|
|
39
71
|
## Basic Usage
|
|
40
72
|
|
|
@@ -54,7 +86,7 @@ const MyComponent = () => {
|
|
|
54
86
|
<SwappableGrid
|
|
55
87
|
itemWidth={100}
|
|
56
88
|
itemHeight={100}
|
|
57
|
-
numColumns={3}
|
|
89
|
+
numColumns={3} /* leave excluded for dynamic columns */
|
|
58
90
|
gap={8}
|
|
59
91
|
onOrderChange={(keys) => {
|
|
60
92
|
// Reorder items based on new key order
|
|
@@ -81,27 +113,27 @@ const MyComponent = () => {
|
|
|
81
113
|
|
|
82
114
|
### SwappableGrid Props
|
|
83
115
|
|
|
84
|
-
| Prop | Type |
|
|
116
|
+
| Prop | Type | Usage | Default | Description |
|
|
85
117
|
| ------------------------ | --------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
|
|
86
|
-
| `children` | `ReactNode` |
|
|
87
|
-
| `itemWidth` | `number` |
|
|
88
|
-
| `itemHeight` | `number` |
|
|
89
|
-
| `gap` | `number` |
|
|
90
|
-
| `containerPadding` | `number` |
|
|
91
|
-
| `longPressMs` | `number` |
|
|
92
|
-
| `numColumns` | `number` |
|
|
93
|
-
| `wiggle` | `{ duration: number; degrees: number }` |
|
|
94
|
-
| `onDragEnd` | `(ordered: ChildNode[]) => void` |
|
|
95
|
-
| `onOrderChange` | `(keys: string[]) => void` |
|
|
96
|
-
| `onDelete` | `(key: string) => void` |
|
|
97
|
-
| `dragSizeIncreaseFactor` | `number` |
|
|
98
|
-
| `scrollSpeed` | `number` |
|
|
99
|
-
| `scrollThreshold` | `number` |
|
|
100
|
-
| `style` | `StyleProp<ViewStyle>` |
|
|
101
|
-
| `trailingComponent` | `ReactNode` |
|
|
102
|
-
| `deleteComponent` | `ReactNode` |
|
|
103
|
-
| `deleteComponentStyle` | `StyleProp<ViewStyle>` |
|
|
104
|
-
| `reverse` | `boolean` |
|
|
118
|
+
| `children` | `ReactNode` | Required | - | The child components to render in the grid. Each child should have a unique key. |
|
|
119
|
+
| `itemWidth` | `number` | Required | - | Width of each grid item in pixels |
|
|
120
|
+
| `itemHeight` | `number` | Required | - | Height of each grid item in pixels |
|
|
121
|
+
| `gap` | `number` | Optional | `8` | Gap between grid items in pixels |
|
|
122
|
+
| `containerPadding` | `number` | Optional | `8` | Padding around the container in pixels |
|
|
123
|
+
| `longPressMs` | `number` | Optional | `300` | Duration in milliseconds to hold before drag starts |
|
|
124
|
+
| `numColumns` | `number` | Optional | Auto | Number of columns in the grid. If not provided, will be calculated automatically based on container width |
|
|
125
|
+
| `wiggle` | `{ duration: number; degrees: number }` | Optional | - | Wiggle animation configuration when items are in drag mode or delete mode |
|
|
126
|
+
| `onDragEnd` | `(ordered: ChildNode[]) => void` | Optional | - | Callback fired when drag ends, providing the ordered array of child nodes |
|
|
127
|
+
| `onOrderChange` | `(keys: string[]) => void` | Optional | - | Callback fired when the order changes, providing an array of keys in the new order |
|
|
128
|
+
| `onDelete` | `(key: string) => void` | Optional | - | Callback fired when an item is deleted, providing the key of the deleted item |
|
|
129
|
+
| `dragSizeIncreaseFactor` | `number` | Optional | `1.06` | Factor by which the dragged item scales up |
|
|
130
|
+
| `scrollSpeed` | `number` | Optional | `10` | Speed of auto-scrolling when dragging near edges |
|
|
131
|
+
| `scrollThreshold` | `number` | Optional | `100` | Distance from edge in pixels that triggers auto-scroll |
|
|
132
|
+
| `style` | `StyleProp<ViewStyle>` | Optional | - | Custom style for the ScrollView container |
|
|
133
|
+
| `trailingComponent` | `ReactNode` | Optional | - | Component to render after all grid items (e.g., an "Add" button) |
|
|
134
|
+
| `deleteComponent` | `ReactNode` | Optional | - | Component to render as a delete target (shown when dragging). If provided, disables hold-to-delete feature |
|
|
135
|
+
| `deleteComponentStyle` | `StyleProp<ViewStyle>` | Optional | - | Custom style for the delete component. If provided, allows custom positioning |
|
|
136
|
+
| `reverse` | `boolean` | Optional | `false` | If true, reverses the order of items (right-to-left, bottom-to-top) |
|
|
105
137
|
|
|
106
138
|
### SwappableGridRef
|
|
107
139
|
|
|
@@ -128,7 +160,7 @@ gridRef.current?.cancelDeleteMode();
|
|
|
128
160
|
<SwappableGrid
|
|
129
161
|
itemWidth={100}
|
|
130
162
|
itemHeight={100}
|
|
131
|
-
numColumns={3}
|
|
163
|
+
numColumns={3} /* leave excluded for dynamic columns */
|
|
132
164
|
wiggle={{ duration: 200, degrees: 3 }}
|
|
133
165
|
onOrderChange={(keys) => console.log("New order:", keys)}
|
|
134
166
|
>
|
package/package.json
CHANGED
|
@@ -1,4 +1,24 @@
|
|
|
1
1
|
{
|
|
2
|
+
"name": "react-native-swappable-grid",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "A React Native component for creating draggable, swappable grid layouts with reordering, delete functionality, and smooth animations",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react-native",
|
|
7
|
+
"grid",
|
|
8
|
+
"draggable",
|
|
9
|
+
"swappable",
|
|
10
|
+
"reorder",
|
|
11
|
+
"drag-and-drop",
|
|
12
|
+
"gesture",
|
|
13
|
+
"layout"
|
|
14
|
+
],
|
|
15
|
+
"author": "William Danielsson",
|
|
16
|
+
"license": "ISC",
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/WilliamDanielsson/react-native-swappable-grid"
|
|
20
|
+
},
|
|
21
|
+
"type": "commonjs",
|
|
2
22
|
"main": "lib/commonjs/index.js",
|
|
3
23
|
"module": "lib/module/index.js",
|
|
4
24
|
"types": "lib/typescript/index.d.ts",
|
|
@@ -29,26 +49,6 @@
|
|
|
29
49
|
"react-native-reanimated": "^4.2.1",
|
|
30
50
|
"typescript": "^5.9.3"
|
|
31
51
|
},
|
|
32
|
-
"name": "react-native-swappable-grid",
|
|
33
|
-
"version": "1.0.0",
|
|
34
|
-
"description": "A React Native component for creating draggable, swappable grid layouts with reordering, delete functionality, and smooth animations",
|
|
35
|
-
"keywords": [
|
|
36
|
-
"react-native",
|
|
37
|
-
"grid",
|
|
38
|
-
"draggable",
|
|
39
|
-
"swappable",
|
|
40
|
-
"reorder",
|
|
41
|
-
"drag-and-drop",
|
|
42
|
-
"gesture",
|
|
43
|
-
"layout"
|
|
44
|
-
],
|
|
45
|
-
"author": "William Danielsson",
|
|
46
|
-
"license": "ISC",
|
|
47
|
-
"repository": {
|
|
48
|
-
"type": "git",
|
|
49
|
-
"url": "https://github.com/WilliamDanielsson/react-native-swappable-grid"
|
|
50
|
-
},
|
|
51
|
-
"type": "commonjs",
|
|
52
52
|
"react-native-builder-bob": {
|
|
53
53
|
"source": "src",
|
|
54
54
|
"output": "lib",
|