feat: Collapsible items support

example/app/src/examples/SortableGrid/miscellaneous/CollapsibleItemsExample.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import type { SortableGridRenderItem } from 'react-native-sortables';
+import Sortable from 'react-native-sortables';
+
+import { ScrollScreen } from '@/components';
+import { colors, radius, sizes, spacing, text } from '@/theme';
+import { getItems } from '@/utils';
+
+const DATA = getItems(3);
+
+export default function CollapsibleItemsExample() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const renderItem = useCallback<SortableGridRenderItem<string>>(
+    ({ item }) => (
+      <Animated.View
+        layout={LinearTransition}
+        style={[styles.card, { height: collapsed ? sizes.lg : sizes.xxl }]}>
+        <Animated.Text layout={LinearTransition} style={styles.text}>
+          {item}
+        </Animated.Text>
+      </Animated.View>
+    ),
+    [collapsed]
+  );
+
+  return (
+    <ScrollScreen>
+      <Sortable.Grid
+        data={DATA}
+        renderItem={renderItem}
+        rowGap={spacing.md}
+        onDragEnd={() => setCollapsed(false)}
+        onDragStart={() => setCollapsed(true)}
+      />
+    </ScrollScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    backgroundColor: '#36877F',
+    borderRadius: radius.md,
+    height: sizes.xl,
+    justifyContent: 'center'
+  },
+  text: {
+    ...text.label2,
+    color: colors.white
+  }
+});

example/app/src/examples/SortableGrid/miscellaneous/index.ts

@@ -1 +1,3 @@
+export { default as CollapsibleItemsExample } from './CollapsibleItemsExample';
+export { default as MaxOverscrollOffsetExample } from './MaxOverscrollOffsetExample';
 export { default as StaggerAnimationExample } from './StaggerAnimationExample';

example/app/src/examples/SortableGrid/tests/index.ts

@@ -1,2 +1 @@
 export { default as BottomTabsNavigatorExample } from './BottomTabsNavigatorExample';
-export { default as MaxOverscrollOffsetExample } from './MaxOverscrollOffsetExample';

example/app/src/examples/navigation/routes.ts

@@ -1,6 +1,6 @@
 /* eslint-disable perfectionist/sort-objects */
 import { SortableFlexCard, SortableGridCard } from '@/components';
-import { IS_WEB } from '@/constants';
+import { IS_IOS, IS_WEB } from '@/constants';
 import * as SortableFlex from '@/examples/SortableFlex';
 import * as SortableGrid from '@/examples/SortableGrid';
 
@@ -76,7 +76,18 @@ const routes: Routes = {
             StaggerAnimation: {
               Component: SortableGrid.miscellaneous.StaggerAnimationExample,
               name: 'Stagger Animation'
-            }
+            },
+            CollapsibleItems: {
+              Component: SortableGrid.miscellaneous.CollapsibleItemsExample,
+              name: 'Collapsible Items'
+            },
+            ...(IS_IOS && {
+              MaxOverscrollOffset: {
+                Component:
+                  SortableGrid.miscellaneous.MaxOverscrollOffsetExample,
+                name: 'Max Overscroll Offset'
+              }
+            })
           }
         }
       }),
@@ -86,10 +97,6 @@ const routes: Routes = {
           BottomTabsNavigator: {
             Component: SortableGrid.tests.BottomTabsNavigatorExample,
             name: 'Bottom Tabs Navigator'
-          },
-          MaxOverscrollOffset: {
-            Component: SortableGrid.tests.MaxOverscrollOffsetExample,
-            name: 'Max Overscroll Offset'
           }
         }
       }

packages/react-native-sortables/src/providers/layout/grid/GridLayoutProvider.tsx

@@ -1,9 +1,5 @@
 import { type PropsWithChildren, useCallback } from 'react';
-import {
-  type SharedValue,
-  useAnimatedReaction,
-  useDerivedValue
-} from 'react-native-reanimated';
+import { type SharedValue, useAnimatedReaction } from 'react-native-reanimated';
 
 import { IS_WEB } from '../../../constants';
 import { useDebugContext } from '../../../debug';
@@ -42,6 +38,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
   rowHeight
 }) => {
   const {
+    activeItemKey,
     indexToKey,
     itemDimensions,
     itemPositions,
@@ -115,7 +112,9 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
     (
       idxToKey: SharedValue<Array<string>>,
       onChange: (layout: GridLayout | null, shouldAnimate: boolean) => void
-    ) =>
+    ) => {
+      const prevLayout = useMutableValue<GridLayout | null>(null);
+
       useAnimatedReaction(
         () => ({
           gaps: {
@@ -130,34 +129,25 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
         }),
         (props, previousProps) => {
           onChange(
-            calculateLayout(props),
+            calculateLayout(props, prevLayout.value, activeItemKey.value),
             // On web, animate layout only if parent container is not resized
             // (e.g. skip animation when the browser window is resized)
             !IS_WEB ||
               !previousProps?.mainGroupSize ||
               props.mainGroupSize === previousProps.mainGroupSize
           );
         }
-      ),
-    [mainGroupSize, mainGap, crossGap, numGroups, isVertical, itemDimensions]
-  );
-
-  const useGridLayout = useCallback(
-    (idxToKey: SharedValue<Array<string>>) =>
-      useDerivedValue(() =>
-        calculateLayout({
-          gaps: {
-            cross: crossGap.value,
-            main: mainGap.value
-          },
-          indexToKey: idxToKey.value,
-          isVertical,
-          itemDimensions: itemDimensions.value,
-          mainGroupSize: mainGroupSize.value,
-          numGroups
-        })
-      ),
-    [mainGroupSize, mainGap, crossGap, numGroups, isVertical, itemDimensions]
+      );
+    },
+    [
+      mainGroupSize,
+      mainGap,
+      crossGap,
+      numGroups,
+      isVertical,
+      itemDimensions,
+      activeItemKey
+    ]
   );
 
   // GRID LAYOUT UPDATER
@@ -194,7 +184,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
       mainGap,
       mainGroupSize,
       numGroups,
-      useGridLayout
+      useGridLayoutReaction
     }
   };
 });

packages/react-native-sortables/src/providers/layout/grid/updates/common.ts

@@ -1,8 +1,9 @@
-import type { SharedValue } from 'react-native-reanimated';
+import { type SharedValue, useSharedValue } from 'react-native-reanimated';
 
 import type {
   Coordinate,
   Dimension,
+  GridLayout,
   ReorderFunction,
   SortStrategyFactory
 } from '../../../../types';
@@ -29,14 +30,19 @@ export const createGridStrategy =
       mainGap,
       mainGroupSize,
       numGroups,
-      useGridLayout
+      useGridLayoutReaction
     } = useGridLayoutContext();
     const { fixedItemKeys } = useCustomHandleContext() ?? {};
 
     const othersIndexToKey = useInactiveIndexToKey();
-    const othersLayout = useGridLayout(othersIndexToKey);
+    const othersLayout = useSharedValue<GridLayout | null>(null);
     const debugBox = useDebugBoundingBox();
 
+    useGridLayoutReaction(othersIndexToKey, layout => {
+      'worklet';
+      othersLayout.value = layout;
+    });
+
     let mainContainerSize: SharedValue<null | number>;
     let crossContainerSize: SharedValue<null | number>;
     let mainCoordinate: Coordinate;

packages/react-native-sortables/src/providers/layout/grid/utils/layout.ts

@@ -7,14 +7,18 @@ import type {
 } from '../../../../types';
 import { getCrossIndex, getMainIndex } from './helpers';
 
-export const calculateLayout = ({
-  gaps,
-  indexToKey,
-  isVertical,
-  itemDimensions,
-  mainGroupSize,
-  numGroups
-}: GridLayoutProps): GridLayout | null => {
+export const calculateLayout = (
+  {
+    gaps,
+    indexToKey,
+    isVertical,
+    itemDimensions,
+    mainGroupSize,
+    numGroups
+  }: GridLayoutProps,
+  prevLayout: GridLayout | null,
+  activeItemKey: null | string
+): GridLayout | null => {
   'worklet';
   if (!mainGroupSize) {
     return null;
@@ -41,6 +45,7 @@ export const calculateLayout = ({
 
   for (const [itemIndex, itemKey] of indexToKey.entries()) {
     const crossItemSize = itemDimensions[itemKey]?.[crossDimension];
+    console.log('crossItemSize', itemKey, crossItemSize);
 
     // Return if the item is not yet measured
     if (crossItemSize === undefined) {
@@ -66,6 +71,12 @@ export const calculateLayout = ({
 
   const lastCrossOffset = crossAxisOffsets[crossAxisOffsets.length - 1];
 
+  // TODO - clean this up
+  if (activeItemKey) {
+    const newActivePosition = itemPositions[activeItemKey]?.[crossCoordinate];
+    console.log('newActivePosition', activeItemKey, newActivePosition);
+  }
+
   return {
     calculatedDimensions: {
       [crossDimension]: lastCrossOffset

packages/react-native-sortables/src/types/providers/layout.ts

@@ -8,9 +8,10 @@ export type GridLayoutContextType = {
   mainGap: SharedValue<number>;
   crossGap: SharedValue<number>;
   isVertical: boolean;
-  useGridLayout: (
-    idxToKey: SharedValue<Array<string>>
-  ) => SharedValue<GridLayout | null>;
+  useGridLayoutReaction: (
+    idxToKey: SharedValue<Array<string>>,
+    onChange: (layout: GridLayout | null, shouldAnimate: boolean) => void
+  ) => void;
 };
 
 export type FlexLayoutContextType = {