react-native-sortable-dynamic 0.3.3 → 0.4.2

package/lib/commonjs/Config.js

@@ -10,18 +10,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// Get screen width to calculate dynamic sizes
-const {
-  width
-} = _reactNative.Dimensions.get('window');
-
-// Default configuration for the sortable grid/list
+// Default configuration for the sortable grid/list (static fallback values)
 const defaultConfig = {
   MARGIN: 10,
   // Default margin between items
   COL: 2,
   // Default number of columns
-  SIZE: width / 2 - 10 // Default size for each item, calculated based on the number of columns and margin
+  SIZE: 100 // Temporary fallback size
 };
 
 // Create a Context for the sortable grid/list configuration
@@ -38,11 +33,9 @@ const animationConfig = exports.animationConfig = {
 };
 
 // Helper function to calculate the item's position based on its index
-// Used to position items in a grid layout
 const getPosition = (position, COL, SIZE) => {
   'worklet';
 
-  // Necessary for Reanimated 2 to run this function on the UI thread
   return {
     x: position % COL === 0 ? 0 : SIZE * (position % COL),
     y: Math.floor(position / COL) * SIZE
@@ -54,7 +47,6 @@ exports.getPosition = getPosition;
 const getOrder = (tx, ty, max, COL, SIZE) => {
   'worklet';
 
-  // Necessary for Reanimated 2 to run this function on the UI thread
   const x = Math.round(tx / SIZE) * SIZE;
   const y = Math.round(ty / SIZE) * SIZE;
   const row = Math.max(y, 0) / SIZE;
@@ -65,32 +57,23 @@ const getOrder = (tx, ty, max, COL, SIZE) => {
 /**
  * SortableConfigProvider component
  *
- * Wrap your sortable grid/list components with this provider to set custom configuration.
- * This provider allows for overriding default settings like margin and the number of columns.
- *
  * @param {Object} config - Custom configuration to override the default settings.
  * @param {number} config.MARGIN - Margin between items.
  * @param {number} config.COL - Number of columns in the grid.
  * @param {React.ReactNode} children - Child components that will use this configuration.
- *
- * Usage:
- *
- * <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
- *   <YourSortableComponent />
- * </SortableConfigProvider>
  */
 exports.getOrder = getOrder;
 const SortableConfigProvider = ({
   children,
-  config
+  config = {}
 }) => {
-  // Merge custom config with the default configuration
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
   const mergedConfig = {
     ...defaultConfig,
     ...config
   };
-
-  // Recalculate SIZE based on COL and MARGIN
   mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfigContext.Provider, {
     value: mergedConfig,

package/lib/commonjs/Config.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_react","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","width","Dimensions","defaultConfig","MARGIN","COL","SIZE","ConfigContext","createContext","useSortableConfig","useContext","exports","animationConfig","easing","Easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_react","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultConfig","MARGIN","COL","SIZE","ConfigContext","createContext","useSortableConfig","useContext","exports","animationConfig","easing","Easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","width","useWindowDimensions","mergedConfig","jsx","Provider","value","_default"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/SortableItemWrapper.js

@@ -57,7 +57,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 }) => {
   // Get safe area insets for accurate height calculation
   const inset = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const containerHeight = _reactNative.Dimensions.get('window').height - inset.top - inset.bottom;
+  const {
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const containerHeight = height - inset.top - inset.bottom;
 
   // Get the configuration for columns and size
   const {
@@ -74,6 +77,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   const position = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
   const translateX = (0, _reactNativeReanimated.useSharedValue)(position.x);
   const translateY = (0, _reactNativeReanimated.useSharedValue)(position.y);
+  const startX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const startY = (0, _reactNativeReanimated.useSharedValue)(0);
 
   // Effect to reset isGestureActive when not in editing mode
   (0, _react.useEffect)(() => {
@@ -92,80 +97,71 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
       translateY.value = (0, _reactNativeReanimated.withTiming)(pos.y, _Config.animationConfig);
     }
   });
+  const pan = _reactNativeGestureHandler.Gesture.Pan().onStart(() => {
+    if (editing && draggable) {
+      // Store the starting position
+      startX.value = translateX.value;
+      startY.value = translateY.value;
+      isGestureActive.value = false;
+    }
+  }).onUpdate(e => {
+    if (editing && draggable) {
+      // Calculate new position
+      translateX.value = startX.value + e.translationX;
+      translateY.value = startY.value + e.translationY;
 
-  // Gesture handler for dragging
-  const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onStart: (_, ctx) => {
-      if (editing && draggable) {
-        // Store the starting position
-        ctx.x = translateX.value;
-        ctx.y = translateY.value;
-        isGestureActive.value = false;
-      }
-    },
-    onActive: ({
-      translationX,
-      translationY
-    }, ctx) => {
-      if (editing && draggable) {
-        // Calculate new position
-        translateX.value = ctx.x + translationX;
-        translateY.value = ctx.y + translationY;
-
-        // Calculate new order based on position
-        const newOrder = (0, _Config.getOrder)(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
-        const oldOrder = positions.value[id];
-        if (newOrder !== oldOrder) {
-          // Find the item to swap positions with
-          const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
+      // Calculate new order based on position
+      const newOrder = (0, _Config.getOrder)(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
+      const oldOrder = positions.value[id];
+      if (newOrder !== oldOrder) {
+        // Find the item to swap positions with
+        const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
 
-          // Only swap if the target item is reorderable
-          const targetItem = data.find(tile => tile.id === Number(idToSwap));
-          if (idToSwap && targetItem?.reorderable !== false) {
-            const newPositions = {
-              ...positions.value
-            };
-            newPositions[id] = newOrder;
-            newPositions[idToSwap] = oldOrder;
-            positions.value = newPositions;
-          }
+        // Only swap if the target item is reorderable
+        const targetItem = data.find(tile => tile.id === Number(idToSwap));
+        if (idToSwap && targetItem?.reorderable !== false) {
+          const newPositions = {
+            ...positions.value
+          };
+          newPositions[id] = newOrder;
+          newPositions[idToSwap] = oldOrder;
+          positions.value = newPositions;
         }
+      }
 
-        // Handle scrolling during drag
-        const lowerBound = scrollY.value;
-        const upperBound = lowerBound + containerHeight - SIZE;
-        const maxScroll = contentHeight - containerHeight;
-        const leftToScrollDown = maxScroll - scrollY.value;
+      // Handle scrolling during drag
+      const lowerBound = scrollY.value;
+      const upperBound = lowerBound + containerHeight - SIZE;
+      const maxScroll = contentHeight - containerHeight;
+      const leftToScrollDown = maxScroll - scrollY.value;
 
-        // Scroll up
-        if (translateY.value < lowerBound) {
-          const diff = Math.min(lowerBound - translateY.value, lowerBound);
-          scrollY.value -= diff;
-          (0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
-          ctx.y -= diff;
-          translateY.value = ctx.y + translationY;
-        }
-        // Scroll down
-        if (translateY.value > upperBound) {
-          const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
-          scrollY.value += diff;
-          (0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
-          ctx.y += diff;
-          translateY.value = ctx.y + translationY;
-        }
+      // Scroll up
+      if (translateY.value < lowerBound) {
+        const diff = Math.min(lowerBound - translateY.value, lowerBound);
+        scrollY.value -= diff;
+        (0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
+        startY.value -= diff;
+        translateY.value = startY.value + e.translationY;
       }
-    },
-    onEnd: () => {
-      if (draggable) {
-        // Snap the item back into its place when the drag ends
-        const newPosition = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
-        translateX.value = (0, _reactNativeReanimated.withTiming)(newPosition.x, _Config.animationConfig, () => {
-          isGestureActive.value = false; // Set gesture to inactive
-          (0, _reactNativeReanimated.runOnJS)(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
-        });
-        translateY.value = (0, _reactNativeReanimated.withTiming)(newPosition.y, _Config.animationConfig);
+      // Scroll down
+      if (translateY.value > upperBound) {
+        const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
+        scrollY.value += diff;
+        (0, _reactNativeReanimated.scrollTo)(scrollView, 0, scrollY.value, false);
+        startY.value += diff;
+        translateY.value = startY.value + e.translationY;
       }
     }
+  }).onEnd(() => {
+    if (draggable) {
+      // Snap the item back into its place when the drag ends
+      const newPosition = (0, _Config.getPosition)(positions.value[id], COL, SIZE);
+      translateX.value = (0, _reactNativeReanimated.withTiming)(newPosition.x, _Config.animationConfig, () => {
+        isGestureActive.value = false; // Set gesture to inactive
+        (0, _reactNativeReanimated.runOnJS)(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
+      });
+      translateY.value = (0, _reactNativeReanimated.withTiming)(newPosition.y, _Config.animationConfig);
+    }
   });
 
   // Animated style for the item
@@ -191,9 +187,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
     style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.PanGestureHandler, {
-      enabled: editing,
-      onGestureEvent: onGestureEvent,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: pan,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
         style: _reactNative.StyleSheet.absoluteFill,
         children: children

package/lib/commonjs/SortableItemWrapper.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_reactNativeSafeAreaContext","_Config","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","useSafeAreaInsets","containerHeight","Dimensions","height","top","bottom","COL","SIZE","MARGIN","useSortableConfig","contentHeight","keys","value","length","isGestureActive","useSharedValue","position","getPosition","translateX","x","translateY","y","useEffect","useAnimatedReaction","newOrder","pos","withTiming","animationConfig","onGestureEvent","useAnimatedGestureHandler","onStart","_","ctx","onActive","translationX","translationY","getOrder","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","scrollTo","onEnd","newPosition","runOnJS","style","useAnimatedStyle","zIndex","scale","withSpring","left","width","margin","transform","jsx","View","PanGestureHandler","enabled","StyleSheet","absoluteFill","_default","exports"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_reactNativeSafeAreaContext","_Config","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","useSafeAreaInsets","height","useWindowDimensions","containerHeight","top","bottom","COL","SIZE","MARGIN","useSortableConfig","contentHeight","keys","value","length","isGestureActive","useSharedValue","position","getPosition","translateX","x","translateY","y","startX","startY","useEffect","useAnimatedReaction","newOrder","pos","withTiming","animationConfig","pan","Gesture","Pan","onStart","onUpdate","translationX","translationY","getOrder","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","scrollTo","onEnd","newPosition","runOnJS","style","useAnimatedStyle","zIndex","scale","withSpring","left","width","margin","transform","jsx","View","GestureDetector","gesture","StyleSheet","absoluteFill","_default","exports"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AASA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,2BAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAkE,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGlE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMW,mBAAmB,GAAGA,CAAC;EAC3BC,QAAQ;EACRC,SAAS;EACTC,EAAE;EACFC,SAAS;EACTC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,SAAS,GAAG,IAAI;EAChBC;AACF,CAAC,KAAK;EACJ;EACA,MAAMC,KAAK,GAAG,IAAAC,6CAAiB,EAAC,CAAC;EACjC,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACxC,MAAMC,eAAe,GAAGF,MAAM,GAAGF,KAAK,CAACK,GAAG,GAAGL,KAAK,CAACM,MAAM;;EAEzD;EACA,MAAM;IAAEC,GAAG;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAG,IAAAC,yBAAiB,EAAC,CAAC;;EAEjD;EACA,MAAMC,aAAa,GAAI7B,MAAM,CAAC8B,IAAI,CAACpB,SAAS,CAACqB,KAAK,CAAC,CAACC,MAAM,GAAGP,GAAG,GAAIC,IAAI;EACxE,MAAMO,eAAe,GAAG,IAAAC,qCAAc,EAAC,KAAK,CAAC,CAAC,CAAC;;EAE/C;EACA,MAAMC,QAAQ,GAAG,IAAAC,mBAAW,EAAC1B,SAAS,CAACqB,KAAK,CAACpB,EAAE,CAAC,EAAEc,GAAG,EAAEC,IAAI,CAAC;EAC5D,MAAMW,UAAU,GAAG,IAAAH,qCAAc,EAACC,QAAQ,CAACG,CAAC,CAAC;EAC7C,MAAMC,UAAU,GAAG,IAAAL,qCAAc,EAACC,QAAQ,CAACK,CAAC,CAAC;EAE7C,MAAMC,MAAM,GAAG,IAAAP,qCAAc,EAAC,CAAC,CAAC;EAChC,MAAMQ,MAAM,GAAG,IAAAR,qCAAc,EAAC,CAAC,CAAC;;EAEhC;EACA,IAAAS,gBAAS,EAAC,MAAM;IACd,IAAI,CAAC5B,OAAO,EAAE;MACZkB,eAAe,CAACF,KAAK,GAAG,KAAK;IAC/B;EACF,CAAC,EAAE,CAAChB,OAAO,EAAEkB,eAAe,CAAC,CAAC;;EAE9B;EACA,IAAAW,0CAAmB,EACjB,MAAMlC,SAAS,CAACqB,KAAK,CAACpB,EAAE,CAAC;EAAE;EAC1BkC,QAAQ,IAAK;IACZ,IAAI,CAACZ,eAAe,CAACF,KAAK,EAAE;MAC1B,MAAMe,GAAG,GAAG,IAAAV,mBAAW,EAACS,QAAQ,EAAEpB,GAAG,EAAEC,IAAI,CAAC;MAC5CW,UAAU,CAACN,KAAK,GAAG,IAAAgB,iCAAU,EAACD,GAAG,CAACR,CAAC,EAAEU,uBAAe,CAAC;MACrDT,UAAU,CAACR,KAAK,GAAG,IAAAgB,iCAAU,EAACD,GAAG,CAACN,CAAC,EAAEQ,uBAAe,CAAC;IACvD;EACF,CACF,CAAC;EAED,MAAMC,GAAG,GAAGC,kCAAO,CAACC,GAAG,CAAC,CAAC,CACtBC,OAAO,CAAC,MAAM;IACb,IAAIrC,OAAO,IAAIC,SAAS,EAAE;MACxB;MACAyB,MAAM,CAACV,KAAK,GAAGM,UAAU,CAACN,KAAK;MAC/BW,MAAM,CAACX,KAAK,GAAGQ,UAAU,CAACR,KAAK;MAC/BE,eAAe,CAACF,KAAK,GAAG,KAAK;IAC/B;EACF,CAAC,CAAC,CACDsB,QAAQ,CAAEhE,CAAC,IAAK;IACf,IAAI0B,OAAO,IAAIC,SAAS,EAAE;MACxB;MACAqB,UAAU,CAACN,KAAK,GAAGU,MAAM,CAACV,KAAK,GAAG1C,CAAC,CAACiE,YAAY;MAChDf,UAAU,CAACR,KAAK,GAAGW,MAAM,CAACX,KAAK,GAAG1C,CAAC,CAACkE,YAAY;;MAEhD;MACA,MAAMV,QAAQ,GAAG,IAAAW,gBAAQ,EACvBnB,UAAU,CAACN,KAAK,EAChBQ,UAAU,CAACR,KAAK,EAChB/B,MAAM,CAAC8B,IAAI,CAACpB,SAAS,CAACqB,KAAK,CAAC,CAACC,MAAM,GAAG,CAAC,EACvCP,GAAG,EACHC,IACF,CAAC;MAED,MAAM+B,QAAQ,GAAG/C,SAAS,CAACqB,KAAK,CAACpB,EAAE,CAAC;MACpC,IAAIkC,QAAQ,KAAKY,QAAQ,EAAE;QACzB;QACA,MAAMC,QAAQ,GAAG1D,MAAM,CAAC8B,IAAI,CAACpB,SAAS,CAACqB,KAAK,CAAC,CAAC4B,IAAI,CAC/CC,GAAG,IAAKlD,SAAS,CAACqB,KAAK,CAAC6B,GAAG,CAAC,KAAKf,QACpC,CAAC;;QAED;QACA,MAAMgB,UAAU,GAAG5C,IAAI,CAAC0C,IAAI,CAAEG,IAAI,IAAKA,IAAI,CAACnD,EAAE,KAAKoD,MAAM,CAACL,QAAQ,CAAC,CAAC;QACpE,IAAIA,QAAQ,IAAIG,UAAU,EAAEG,WAAW,KAAK,KAAK,EAAE;UACjD,MAAMC,YAAY,GAAG;YAAE,GAAGvD,SAAS,CAACqB;UAAM,CAAC;UAC3CkC,YAAY,CAACtD,EAAE,CAAC,GAAGkC,QAAQ;UAC3BoB,YAAY,CAACP,QAAQ,CAAC,GAAGD,QAAQ;UACjC/C,SAAS,CAACqB,KAAK,GAAGkC,YAAY;QAChC;MACF;;MAEA;MACA,MAAMC,UAAU,GAAGpD,OAAO,CAACiB,KAAK;MAChC,MAAMoC,UAAU,GAAGD,UAAU,GAAG5C,eAAe,GAAGI,IAAI;MACtD,MAAM0C,SAAS,GAAGvC,aAAa,GAAGP,eAAe;MACjD,MAAM+C,gBAAgB,GAAGD,SAAS,GAAGtD,OAAO,CAACiB,KAAK;;MAElD;MACA,IAAIQ,UAAU,CAACR,KAAK,GAAGmC,UAAU,EAAE;QACjC,MAAMI,IAAI,GAAGC,IAAI,CAACC,GAAG,CAACN,UAAU,GAAG3B,UAAU,CAACR,KAAK,EAAEmC,UAAU,CAAC;QAChEpD,OAAO,CAACiB,KAAK,IAAIuC,IAAI;QACrB,IAAAG,+BAAQ,EAAC5D,UAAU,EAAE,CAAC,EAAEC,OAAO,CAACiB,KAAK,EAAE,KAAK,CAAC;QAC7CW,MAAM,CAACX,KAAK,IAAIuC,IAAI;QACpB/B,UAAU,CAACR,KAAK,GAAGW,MAAM,CAACX,KAAK,GAAG1C,CAAC,CAACkE,YAAY;MAClD;MACA;MACA,IAAIhB,UAAU,CAACR,KAAK,GAAGoC,UAAU,EAAE;QACjC,MAAMG,IAAI,GAAGC,IAAI,CAACC,GAAG,CACnBjC,UAAU,CAACR,KAAK,GAAGoC,UAAU,EAC7BE,gBACF,CAAC;QACDvD,OAAO,CAACiB,KAAK,IAAIuC,IAAI;QACrB,IAAAG,+BAAQ,EAAC5D,UAAU,EAAE,CAAC,EAAEC,OAAO,CAACiB,KAAK,EAAE,KAAK,CAAC;QAC7CW,MAAM,CAACX,KAAK,IAAIuC,IAAI;QACpB/B,UAAU,CAACR,KAAK,GAAGW,MAAM,CAACX,KAAK,GAAG1C,CAAC,CAACkE,YAAY;MAClD;IACF;EACF,CAAC,CAAC,CACDmB,KAAK,CAAC,MAAM;IACX,IAAI1D,SAAS,EAAE;MACb;MACA,MAAM2D,WAAW,GAAG,IAAAvC,mBAAW,EAAC1B,SAAS,CAACqB,KAAK,CAACpB,EAAE,CAAC,EAAEc,GAAG,EAAEC,IAAI,CAAC;MAC/DW,UAAU,CAACN,KAAK,GAAG,IAAAgB,iCAAU,EAAC4B,WAAW,CAACrC,CAAC,EAAEU,uBAAe,EAAE,MAAM;QAClEf,eAAe,CAACF,KAAK,GAAG,KAAK,CAAC,CAAC;QAC/B,IAAA6C,8BAAO,EAAChE,SAAS,CAAC,CAACF,SAAS,CAACqB,KAAK,CAAC,CAAC,CAAC;MACvC,CAAC,CAAC;MACFQ,UAAU,CAACR,KAAK,GAAG,IAAAgB,iCAAU,EAAC4B,WAAW,CAACnC,CAAC,EAAEQ,uBAAe,CAAC;IAC/D;EACF,CAAC,CAAC;;EAEJ;EACA,MAAM6B,KAAK,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACnC,MAAMC,MAAM,GAAG9C,eAAe,CAACF,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;IAChD,MAAMiD,KAAK,GACTjE,OAAO,IAAIkB,eAAe,CAACF,KAAK,GAAG,IAAAkD,iCAAU,EAAC,IAAI,CAAC,GAAG,IAAAA,iCAAU,EAAC,CAAC,CAAC,CAAC,CAAC;IACvE,OAAO;MACL9C,QAAQ,EAAE,UAAU;MACpBZ,GAAG,EAAE,CAAC;MACN2D,IAAI,EAAE,CAAC;MACPC,KAAK,EAAEzD,IAAI;MACXN,MAAM,EAAEM,IAAI;MACZ0D,MAAM,EAAEzD,MAAM;MACdoD,MAAM;MACNM,SAAS,EAAE,CACT;QAAEhD,UAAU,EAAEA,UAAU,CAACN;MAAM,CAAC,EAChC;QAAEQ,UAAU,EAAEA,UAAU,CAACR;MAAM,CAAC,EAChC;QAAEiD;MAAM,CAAC;IAEb,CAAC;EACH,CAAC,CAAC;EAEF,oBACE,IAAA7F,WAAA,CAAAmG,GAAA,EAACvG,sBAAA,CAAAW,OAAQ,CAAC6F,IAAI;IAACV,KAAK,EAAEA,KAAM;IAAApE,QAAA,eAC1B,IAAAtB,WAAA,CAAAmG,GAAA,EAACtG,0BAAA,CAAAwG,eAAe;MAACC,OAAO,EAAExC,GAAI;MAAAxC,QAAA,eAC5B,IAAAtB,WAAA,CAAAmG,GAAA,EAACvG,sBAAA,CAAAW,OAAQ,CAAC6F,IAAI;QAACV,KAAK,EAAEa,uBAAU,CAACC,YAAa;QAAAlF,QAAA,EAC3CA;MAAQ,CACI;IAAC,CACD;EAAC,CACL,CAAC;AAEpB,CAAC;AAAC,IAAAmF,QAAA,GAAAC,OAAA,CAAAnG,OAAA,GAEac,mBAAmB","ignoreList":[]}

package/lib/module/Config.js

@@ -1,22 +1,17 @@
 "use strict";
 
-import { Dimensions } from 'react-native';
+import { useWindowDimensions } from 'react-native';
 import { Easing } from 'react-native-reanimated';
 import React, { createContext, useContext } from 'react';
 
-// Get screen width to calculate dynamic sizes
+// Default configuration for the sortable grid/list (static fallback values)
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  width
-} = Dimensions.get('window');
-
-// Default configuration for the sortable grid/list
 const defaultConfig = {
   MARGIN: 10,
   // Default margin between items
   COL: 2,
   // Default number of columns
-  SIZE: width / 2 - 10 // Default size for each item, calculated based on the number of columns and margin
+  SIZE: 100 // Temporary fallback size
 };
 
 // Create a Context for the sortable grid/list configuration
@@ -32,11 +27,9 @@ export const animationConfig = {
 };
 
 // Helper function to calculate the item's position based on its index
-// Used to position items in a grid layout
 export const getPosition = (position, COL, SIZE) => {
   'worklet';
 
-  // Necessary for Reanimated 2 to run this function on the UI thread
   return {
     x: position % COL === 0 ? 0 : SIZE * (position % COL),
     y: Math.floor(position / COL) * SIZE
@@ -47,7 +40,6 @@ export const getPosition = (position, COL, SIZE) => {
 export const getOrder = (tx, ty, max, COL, SIZE) => {
   'worklet';
 
-  // Necessary for Reanimated 2 to run this function on the UI thread
   const x = Math.round(tx / SIZE) * SIZE;
   const y = Math.round(ty / SIZE) * SIZE;
   const row = Math.max(y, 0) / SIZE;
@@ -58,31 +50,22 @@ export const getOrder = (tx, ty, max, COL, SIZE) => {
 /**
  * SortableConfigProvider component
  *
- * Wrap your sortable grid/list components with this provider to set custom configuration.
- * This provider allows for overriding default settings like margin and the number of columns.
- *
  * @param {Object} config - Custom configuration to override the default settings.
  * @param {number} config.MARGIN - Margin between items.
  * @param {number} config.COL - Number of columns in the grid.
  * @param {React.ReactNode} children - Child components that will use this configuration.
- *
- * Usage:
- *
- * <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
- *   <YourSortableComponent />
- * </SortableConfigProvider>
  */
 const SortableConfigProvider = ({
   children,
-  config
+  config = {}
 }) => {
-  // Merge custom config with the default configuration
+  const {
+    width
+  } = useWindowDimensions();
   const mergedConfig = {
     ...defaultConfig,
     ...config
   };
-
-  // Recalculate SIZE based on COL and MARGIN
   mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
   return /*#__PURE__*/_jsx(ConfigContext.Provider, {
     value: mergedConfig,

package/lib/module/Config.js.map

@@ -1 +1 @@
-{"version":3,"names":["Dimensions","Easing","React","createContext","useContext","jsx","_jsx","width","get","defaultConfig","MARGIN","COL","SIZE","ConfigContext","useSortableConfig","animationConfig","easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","mergedConfig","Provider","value"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,OAAOC,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAExD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAM;EAAEC;AAAM,CAAC,GAAGP,UAAU,CAACQ,GAAG,CAAC,QAAQ,CAAC;;AAE1C;AACA,MAAMC,aAAa,GAAG;EACpBC,MAAM,EAAE,EAAE;EAAE;EACZC,GAAG,EAAE,CAAC;EAAE;EACRC,IAAI,EAAEL,KAAK,GAAG,CAAC,GAAG,EAAE,CAAE;AACxB,CAAC;;AAED;AACA,MAAMM,aAAa,gBAAGV,aAAa,CAACM,aAAa,CAAC;;AAElD;AACA,OAAO,MAAMK,iBAAiB,GAAGA,CAAA,KAAMV,UAAU,CAACS,aAAa,CAAC;;AAEhE;AACA,OAAO,MAAME,eAAe,GAAG;EAC7BC,MAAM,EAAEf,MAAM,CAACgB,KAAK,CAAChB,MAAM,CAACiB,IAAI,CAAC;EACjCC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA;AACA,OAAO,MAAMC,WAAW,GAAGA,CAACC,QAAQ,EAAEV,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EAAE;EACX,OAAO;IACLU,CAAC,EAAED,QAAQ,GAAGV,GAAG,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,IAAIS,QAAQ,GAAGV,GAAG,CAAC;IACrDY,CAAC,EAAEC,IAAI,CAACC,KAAK,CAACJ,QAAQ,GAAGV,GAAG,CAAC,GAAGC;EAClC,CAAC;AACH,CAAC;;AAED;AACA,OAAO,MAAMc,QAAQ,GAAGA,CAACC,EAAE,EAAEC,EAAE,EAAEC,GAAG,EAAElB,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EAAE;EACX,MAAMU,CAAC,GAAGE,IAAI,CAACM,KAAK,CAACH,EAAE,GAAGf,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMW,CAAC,GAAGC,IAAI,CAACM,KAAK,CAACF,EAAE,GAAGhB,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMmB,GAAG,GAAGP,IAAI,CAACK,GAAG,CAACN,CAAC,EAAE,CAAC,CAAC,GAAGX,IAAI;EACjC,MAAMoB,GAAG,GAAGR,IAAI,CAACK,GAAG,CAACP,CAAC,EAAE,CAAC,CAAC,GAAGV,IAAI;EACjC,OAAOY,IAAI,CAACS,GAAG,CAACF,GAAG,GAAGpB,GAAG,GAAGqB,GAAG,EAAEH,GAAG,CAAC;AACvC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACvD;EACA,MAAMC,YAAY,GAAG;IACnB,GAAG5B,aAAa;IAChB,GAAG2B;EACL,CAAC;;EAED;EACAC,YAAY,CAACzB,IAAI,GAAGL,KAAK,GAAG8B,YAAY,CAAC1B,GAAG,GAAG0B,YAAY,CAAC3B,MAAM;EAElE,oBACEJ,IAAA,CAACO,aAAa,CAACyB,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAF,QAAA,EACzCA;EAAQ,CACa,CAAC;AAE7B,CAAC;AAED,eAAeD,sBAAsB","ignoreList":[]}
+{"version":3,"names":["useWindowDimensions","Easing","React","createContext","useContext","jsx","_jsx","defaultConfig","MARGIN","COL","SIZE","ConfigContext","useSortableConfig","animationConfig","easing","inOut","ease","duration","getPosition","position","x","y","Math","floor","getOrder","tx","ty","max","round","row","col","min","SortableConfigProvider","children","config","width","mergedConfig","Provider","value"],"sourceRoot":"../../src","sources":["Config.js"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,OAAOC,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAExD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,aAAa,GAAG;EACpBC,MAAM,EAAE,EAAE;EAAE;EACZC,GAAG,EAAE,CAAC;EAAE;EACRC,IAAI,EAAE,GAAG,CAAE;AACb,CAAC;;AAED;AACA,MAAMC,aAAa,gBAAGR,aAAa,CAACI,aAAa,CAAC;;AAElD;AACA,OAAO,MAAMK,iBAAiB,GAAGA,CAAA,KAAMR,UAAU,CAACO,aAAa,CAAC;;AAEhE;AACA,OAAO,MAAME,eAAe,GAAG;EAC7BC,MAAM,EAAEb,MAAM,CAACc,KAAK,CAACd,MAAM,CAACe,IAAI,CAAC;EACjCC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA,OAAO,MAAMC,WAAW,GAAGA,CAACC,QAAQ,EAAEV,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EACT,OAAO;IACLU,CAAC,EAAED,QAAQ,GAAGV,GAAG,KAAK,CAAC,GAAG,CAAC,GAAGC,IAAI,IAAIS,QAAQ,GAAGV,GAAG,CAAC;IACrDY,CAAC,EAAEC,IAAI,CAACC,KAAK,CAACJ,QAAQ,GAAGV,GAAG,CAAC,GAAGC;EAClC,CAAC;AACH,CAAC;;AAED;AACA,OAAO,MAAMc,QAAQ,GAAGA,CAACC,EAAE,EAAEC,EAAE,EAAEC,GAAG,EAAElB,GAAG,EAAEC,IAAI,KAAK;EAClD,SAAS;;EACT,MAAMU,CAAC,GAAGE,IAAI,CAACM,KAAK,CAACH,EAAE,GAAGf,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMW,CAAC,GAAGC,IAAI,CAACM,KAAK,CAACF,EAAE,GAAGhB,IAAI,CAAC,GAAGA,IAAI;EACtC,MAAMmB,GAAG,GAAGP,IAAI,CAACK,GAAG,CAACN,CAAC,EAAE,CAAC,CAAC,GAAGX,IAAI;EACjC,MAAMoB,GAAG,GAAGR,IAAI,CAACK,GAAG,CAACP,CAAC,EAAE,CAAC,CAAC,GAAGV,IAAI;EACjC,OAAOY,IAAI,CAACS,GAAG,CAACF,GAAG,GAAGpB,GAAG,GAAGqB,GAAG,EAAEH,GAAG,CAAC;AACvC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM,GAAG,CAAC;AAAE,CAAC,KAAK;EAC5D,MAAM;IAAEC;EAAM,CAAC,GAAGnC,mBAAmB,CAAC,CAAC;EAEvC,MAAMoC,YAAY,GAAG;IACnB,GAAG7B,aAAa;IAChB,GAAG2B;EACL,CAAC;EAEDE,YAAY,CAAC1B,IAAI,GAAGyB,KAAK,GAAGC,YAAY,CAAC3B,GAAG,GAAG2B,YAAY,CAAC5B,MAAM;EAElE,oBACEF,IAAA,CAACK,aAAa,CAAC0B,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAH,QAAA,EACzCA;EAAQ,CACa,CAAC;AAE7B,CAAC;AAED,eAAeD,sBAAsB","ignoreList":[]}

package/lib/module/SortableItemWrapper.js

@@ -1,9 +1,9 @@
 "use strict";
 
 import React, { useEffect } from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
-import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useAnimatedReaction, withSpring, scrollTo, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import Animated, { useAnimatedStyle, useAnimatedReaction, withSpring, scrollTo, withTiming, useSharedValue, runOnJS } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { animationConfig, getOrder, getPosition } from "./Config.js";
 import { useSortableConfig } from "./Config.js";
@@ -54,7 +54,10 @@ const SortableItemWrapper = ({
 }) => {
   // Get safe area insets for accurate height calculation
   const inset = useSafeAreaInsets();
-  const containerHeight = Dimensions.get('window').height - inset.top - inset.bottom;
+  const {
+    height
+  } = useWindowDimensions();
+  const containerHeight = height - inset.top - inset.bottom;
 
   // Get the configuration for columns and size
   const {
@@ -71,6 +74,8 @@ const SortableItemWrapper = ({
   const position = getPosition(positions.value[id], COL, SIZE);
   const translateX = useSharedValue(position.x);
   const translateY = useSharedValue(position.y);
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
 
   // Effect to reset isGestureActive when not in editing mode
   useEffect(() => {
@@ -89,80 +94,71 @@ const SortableItemWrapper = ({
       translateY.value = withTiming(pos.y, animationConfig);
     }
   });
+  const pan = Gesture.Pan().onStart(() => {
+    if (editing && draggable) {
+      // Store the starting position
+      startX.value = translateX.value;
+      startY.value = translateY.value;
+      isGestureActive.value = false;
+    }
+  }).onUpdate(e => {
+    if (editing && draggable) {
+      // Calculate new position
+      translateX.value = startX.value + e.translationX;
+      translateY.value = startY.value + e.translationY;
 
-  // Gesture handler for dragging
-  const onGestureEvent = useAnimatedGestureHandler({
-    onStart: (_, ctx) => {
-      if (editing && draggable) {
-        // Store the starting position
-        ctx.x = translateX.value;
-        ctx.y = translateY.value;
-        isGestureActive.value = false;
-      }
-    },
-    onActive: ({
-      translationX,
-      translationY
-    }, ctx) => {
-      if (editing && draggable) {
-        // Calculate new position
-        translateX.value = ctx.x + translationX;
-        translateY.value = ctx.y + translationY;
-
-        // Calculate new order based on position
-        const newOrder = getOrder(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
-        const oldOrder = positions.value[id];
-        if (newOrder !== oldOrder) {
-          // Find the item to swap positions with
-          const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
+      // Calculate new order based on position
+      const newOrder = getOrder(translateX.value, translateY.value, Object.keys(positions.value).length - 1, COL, SIZE);
+      const oldOrder = positions.value[id];
+      if (newOrder !== oldOrder) {
+        // Find the item to swap positions with
+        const idToSwap = Object.keys(positions.value).find(key => positions.value[key] === newOrder);
 
-          // Only swap if the target item is reorderable
-          const targetItem = data.find(tile => tile.id === Number(idToSwap));
-          if (idToSwap && targetItem?.reorderable !== false) {
-            const newPositions = {
-              ...positions.value
-            };
-            newPositions[id] = newOrder;
-            newPositions[idToSwap] = oldOrder;
-            positions.value = newPositions;
-          }
+        // Only swap if the target item is reorderable
+        const targetItem = data.find(tile => tile.id === Number(idToSwap));
+        if (idToSwap && targetItem?.reorderable !== false) {
+          const newPositions = {
+            ...positions.value
+          };
+          newPositions[id] = newOrder;
+          newPositions[idToSwap] = oldOrder;
+          positions.value = newPositions;
         }
+      }
 
-        // Handle scrolling during drag
-        const lowerBound = scrollY.value;
-        const upperBound = lowerBound + containerHeight - SIZE;
-        const maxScroll = contentHeight - containerHeight;
-        const leftToScrollDown = maxScroll - scrollY.value;
+      // Handle scrolling during drag
+      const lowerBound = scrollY.value;
+      const upperBound = lowerBound + containerHeight - SIZE;
+      const maxScroll = contentHeight - containerHeight;
+      const leftToScrollDown = maxScroll - scrollY.value;
 
-        // Scroll up
-        if (translateY.value < lowerBound) {
-          const diff = Math.min(lowerBound - translateY.value, lowerBound);
-          scrollY.value -= diff;
-          scrollTo(scrollView, 0, scrollY.value, false);
-          ctx.y -= diff;
-          translateY.value = ctx.y + translationY;
-        }
-        // Scroll down
-        if (translateY.value > upperBound) {
-          const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
-          scrollY.value += diff;
-          scrollTo(scrollView, 0, scrollY.value, false);
-          ctx.y += diff;
-          translateY.value = ctx.y + translationY;
-        }
+      // Scroll up
+      if (translateY.value < lowerBound) {
+        const diff = Math.min(lowerBound - translateY.value, lowerBound);
+        scrollY.value -= diff;
+        scrollTo(scrollView, 0, scrollY.value, false);
+        startY.value -= diff;
+        translateY.value = startY.value + e.translationY;
       }
-    },
-    onEnd: () => {
-      if (draggable) {
-        // Snap the item back into its place when the drag ends
-        const newPosition = getPosition(positions.value[id], COL, SIZE);
-        translateX.value = withTiming(newPosition.x, animationConfig, () => {
-          isGestureActive.value = false; // Set gesture to inactive
-          runOnJS(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
-        });
-        translateY.value = withTiming(newPosition.y, animationConfig);
+      // Scroll down
+      if (translateY.value > upperBound) {
+        const diff = Math.min(translateY.value - upperBound, leftToScrollDown);
+        scrollY.value += diff;
+        scrollTo(scrollView, 0, scrollY.value, false);
+        startY.value += diff;
+        translateY.value = startY.value + e.translationY;
       }
     }
+  }).onEnd(() => {
+    if (draggable) {
+      // Snap the item back into its place when the drag ends
+      const newPosition = getPosition(positions.value[id], COL, SIZE);
+      translateX.value = withTiming(newPosition.x, animationConfig, () => {
+        isGestureActive.value = false; // Set gesture to inactive
+        runOnJS(onDragEnd)(positions.value); // Call onDragEnd on the JS thread
+      });
+      translateY.value = withTiming(newPosition.y, animationConfig);
+    }
   });
 
   // Animated style for the item
@@ -188,9 +184,8 @@ const SortableItemWrapper = ({
   });
   return /*#__PURE__*/_jsx(Animated.View, {
     style: style,
-    children: /*#__PURE__*/_jsx(PanGestureHandler, {
-      enabled: editing,
-      onGestureEvent: onGestureEvent,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: pan,
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: StyleSheet.absoluteFill,
         children: children

package/lib/module/SortableItemWrapper.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Dimensions","StyleSheet","Animated","useAnimatedGestureHandler","useAnimatedStyle","useAnimatedReaction","withSpring","scrollTo","withTiming","useSharedValue","runOnJS","PanGestureHandler","useSafeAreaInsets","animationConfig","getOrder","getPosition","useSortableConfig","jsx","_jsx","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","containerHeight","get","height","top","bottom","COL","SIZE","MARGIN","contentHeight","Object","keys","value","length","isGestureActive","position","translateX","x","translateY","y","newOrder","pos","onGestureEvent","onStart","_","ctx","onActive","translationX","translationY","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","onEnd","newPosition","style","zIndex","scale","left","width","margin","transform","View","enabled","absoluteFill"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","StyleSheet","useWindowDimensions","Animated","useAnimatedStyle","useAnimatedReaction","withSpring","scrollTo","withTiming","useSharedValue","runOnJS","Gesture","GestureDetector","useSafeAreaInsets","animationConfig","getOrder","getPosition","useSortableConfig","jsx","_jsx","SortableItemWrapper","children","positions","id","onDragEnd","scrollView","scrollY","editing","draggable","data","inset","height","containerHeight","top","bottom","COL","SIZE","MARGIN","contentHeight","Object","keys","value","length","isGestureActive","position","translateX","x","translateY","y","startX","startY","newOrder","pos","pan","Pan","onStart","onUpdate","e","translationX","translationY","oldOrder","idToSwap","find","key","targetItem","tile","Number","reorderable","newPositions","lowerBound","upperBound","maxScroll","leftToScrollDown","diff","Math","min","onEnd","newPosition","style","zIndex","scale","left","width","margin","transform","View","gesture","absoluteFill"],"sourceRoot":"../../src","sources":["SortableItemWrapper.js"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sortable-dynamic",
-  "version": "0.3.3",
+  "version": "0.4.2",
   "description": "This package provides a highly customizable, animated, and performant sortable grid list component for React Native. It allows users to easily reorder grid items through drag-and-drop gestures, with smooth animations powered by react-native-reanimated and gesture handling by react-native-gesture-handler.",
   "source": "./src/index.js",
   "main": "./lib/commonjs/index.js",

package/src/Config.js

@@ -1,15 +1,12 @@
-import { Dimensions } from 'react-native';
+import { useWindowDimensions } from 'react-native';
 import { Easing } from 'react-native-reanimated';
 import React, { createContext, useContext } from 'react';
 
-// Get screen width to calculate dynamic sizes
-const { width } = Dimensions.get('window');
-
-// Default configuration for the sortable grid/list
+// Default configuration for the sortable grid/list (static fallback values)
 const defaultConfig = {
   MARGIN: 10, // Default margin between items
   COL: 2, // Default number of columns
-  SIZE: width / 2 - 10, // Default size for each item, calculated based on the number of columns and margin
+  SIZE: 100, // Temporary fallback size
 };
 
 // Create a Context for the sortable grid/list configuration
@@ -25,9 +22,8 @@ export const animationConfig = {
 };
 
 // Helper function to calculate the item's position based on its index
-// Used to position items in a grid layout
 export const getPosition = (position, COL, SIZE) => {
-  'worklet'; // Necessary for Reanimated 2 to run this function on the UI thread
+  'worklet';
   return {
     x: position % COL === 0 ? 0 : SIZE * (position % COL),
     y: Math.floor(position / COL) * SIZE,
@@ -36,7 +32,7 @@ export const getPosition = (position, COL, SIZE) => {
 
 // Helper function to determine the new order of items during drag-and-drop
 export const getOrder = (tx, ty, max, COL, SIZE) => {
-  'worklet'; // Necessary for Reanimated 2 to run this function on the UI thread
+  'worklet';
   const x = Math.round(tx / SIZE) * SIZE;
   const y = Math.round(ty / SIZE) * SIZE;
   const row = Math.max(y, 0) / SIZE;
@@ -47,28 +43,19 @@ export const getOrder = (tx, ty, max, COL, SIZE) => {
 /**
  * SortableConfigProvider component
  *
- * Wrap your sortable grid/list components with this provider to set custom configuration.
- * This provider allows for overriding default settings like margin and the number of columns.
- *
  * @param {Object} config - Custom configuration to override the default settings.
  * @param {number} config.MARGIN - Margin between items.
  * @param {number} config.COL - Number of columns in the grid.
  * @param {React.ReactNode} children - Child components that will use this configuration.
- *
- * Usage:
- *
- * <SortableConfigProvider config={{ MARGIN: 15, COL: 3 }}>
- *   <YourSortableComponent />
- * </SortableConfigProvider>
  */
-const SortableConfigProvider = ({ children, config }) => {
-  // Merge custom config with the default configuration
+const SortableConfigProvider = ({ children, config = {} }) => {
+  const { width } = useWindowDimensions();
+
   const mergedConfig = {
     ...defaultConfig,
     ...config,
   };
 
-  // Recalculate SIZE based on COL and MARGIN
   mergedConfig.SIZE = width / mergedConfig.COL - mergedConfig.MARGIN;
 
   return (

package/src/SortableItemWrapper.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
+import { StyleSheet, useWindowDimensions } from 'react-native';
 import Animated, {
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useAnimatedReaction,
   withSpring,
@@ -10,7 +9,7 @@ import Animated, {
   useSharedValue,
   runOnJS,
 } from 'react-native-reanimated';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { animationConfig, getOrder, getPosition } from './Config';
 import { useSortableConfig } from './Config';
@@ -60,8 +59,8 @@ const SortableItemWrapper = ({
 }) => {
   // Get safe area insets for accurate height calculation
   const inset = useSafeAreaInsets();
-  const containerHeight =
-    Dimensions.get('window').height - inset.top - inset.bottom;
+  const { height } = useWindowDimensions();
+  const containerHeight = height - inset.top - inset.bottom;
 
   // Get the configuration for columns and size
   const { COL, SIZE, MARGIN } = useSortableConfig();
@@ -75,6 +74,9 @@ const SortableItemWrapper = ({
   const translateX = useSharedValue(position.x);
   const translateY = useSharedValue(position.y);
 
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+
   // Effect to reset isGestureActive when not in editing mode
   useEffect(() => {
     if (!editing) {
@@ -94,21 +96,20 @@ const SortableItemWrapper = ({
     }
   );
 
-  // Gesture handler for dragging
-  const onGestureEvent = useAnimatedGestureHandler({
-    onStart: (_, ctx) => {
+  const pan = Gesture.Pan()
+    .onStart(() => {
       if (editing && draggable) {
         // Store the starting position
-        ctx.x = translateX.value;
-        ctx.y = translateY.value;
+        startX.value = translateX.value;
+        startY.value = translateY.value;
         isGestureActive.value = false;
       }
-    },
-    onActive: ({ translationX, translationY }, ctx) => {
+    })
+    .onUpdate((e) => {
       if (editing && draggable) {
         // Calculate new position
-        translateX.value = ctx.x + translationX;
-        translateY.value = ctx.y + translationY;
+        translateX.value = startX.value + e.translationX;
+        translateY.value = startY.value + e.translationY;
 
         // Calculate new order based on position
         const newOrder = getOrder(
@@ -147,8 +148,8 @@ const SortableItemWrapper = ({
           const diff = Math.min(lowerBound - translateY.value, lowerBound);
           scrollY.value -= diff;
           scrollTo(scrollView, 0, scrollY.value, false);
-          ctx.y -= diff;
-          translateY.value = ctx.y + translationY;
+          startY.value -= diff;
+          translateY.value = startY.value + e.translationY;
         }
         // Scroll down
         if (translateY.value > upperBound) {
@@ -158,12 +159,12 @@ const SortableItemWrapper = ({
           );
           scrollY.value += diff;
           scrollTo(scrollView, 0, scrollY.value, false);
-          ctx.y += diff;
-          translateY.value = ctx.y + translationY;
+          startY.value += diff;
+          translateY.value = startY.value + e.translationY;
         }
       }
-    },
-    onEnd: () => {
+    })
+    .onEnd(() => {
       if (draggable) {
         // Snap the item back into its place when the drag ends
         const newPosition = getPosition(positions.value[id], COL, SIZE);
@@ -173,8 +174,7 @@ const SortableItemWrapper = ({
         });
         translateY.value = withTiming(newPosition.y, animationConfig);
       }
-    },
-  });
+    });
 
   // Animated style for the item
   const style = useAnimatedStyle(() => {
@@ -199,11 +199,11 @@ const SortableItemWrapper = ({
 
   return (
     <Animated.View style={style}>
-      <PanGestureHandler enabled={editing} onGestureEvent={onGestureEvent}>
+      <GestureDetector gesture={pan}>
         <Animated.View style={StyleSheet.absoluteFill}>
           {children}
         </Animated.View>
-      </PanGestureHandler>
+      </GestureDetector>
     </Animated.View>
   );
 };