fix: Collapsible items implementation on the web (#485)

## Description

This PR adjusts the example and the grid layout provider to work
properly with on the web.

Author: MatiPl01

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

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import type { ViewStyle } from 'react-native';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Animated, {
   LinearTransition,
   useAnimatedRef
@@ -46,6 +46,26 @@ function Example({ horizontal }: ExampleProps) {
 
   const renderItem = useCallback<SortableGridRenderItem<string>>(
     ({ item }) => {
+      if (IS_WEB) {
+        return (
+          // The height/width of the outermost item container must be changed immediately
+          // to the new final value so we set it here as well and change without animation
+          <View style={[{ [dimension]: collapsed ? sizes.lg : sizes.xxxl }]}>
+            <Animated.View
+              style={[
+                styles.card,
+                {
+                  [dimension]: collapsed ? sizes.lg : sizes.xxxl,
+                  // Uses Reanimated 4 CSS transitions
+                  transitionDuration: 300
+                }
+              ]}>
+              <Text style={styles.text}>{item}</Text>
+            </Animated.View>
+          </View>
+        );
+      }
+
       const layoutTransition = LinearTransition.delay(collapsed ? 0 : 50);
 
       return (

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

@@ -69,21 +69,22 @@ const routes: Routes = {
           }
         }
       },
-      ...(!IS_WEB && {
-        Miscellaneous: {
-          name: 'Miscellaneous',
-          routes: {
+
+      Miscellaneous: {
+        name: 'Miscellaneous',
+        routes: {
+          ...(!IS_WEB && {
             StaggerAnimation: {
               Component: SortableGrid.miscellaneous.StaggerAnimationExample,
               name: 'Stagger Animation'
-            },
-            CollapsibleItems: {
-              Component: SortableGrid.miscellaneous.CollapsibleItemsExample,
-              name: 'Collapsible Items'
             }
+          }),
+          CollapsibleItems: {
+            Component: SortableGrid.miscellaneous.CollapsibleItemsExample,
+            name: 'Collapsible Items'
           }
         }
-      }),
+      },
       Tests: {
         name: 'Test examples',
         routes: {

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

@@ -158,7 +158,6 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
   // GRID LAYOUT UPDATER
   useAnimatedReaction(
     () => ({
-      _: layoutRequestId.value, // Helper to force layout re-calculation
       gaps: {
         cross: crossGap.value,
         main: mainGap.value
@@ -167,7 +166,8 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
       isVertical,
       itemHeights: itemHeights.value,
       itemWidths: itemWidths.value,
-      numGroups
+      numGroups,
+      requestId: layoutRequestId.value // Helper to force layout re-calculation
     }),
     (props, prevProps) => {
       const adaptedProps: GridLayoutProps =
@@ -198,7 +198,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
 
       if (adaptedProps.shouldAnimateLayout !== undefined) {
         shouldAnimateLayout.value = adaptedProps.shouldAnimateLayout;
-      } else if (IS_WEB) {
+      } else if (IS_WEB && props.requestId === prevProps?.requestId) {
         updateShouldAnimateWeb?.(adaptedProps, prevProps);
       } else {
         shouldAnimateLayout.value = true;

packages/react-native-sortables/src/providers/shared/AutoScrollProvider/AutoScrollProvider.tsx

@@ -269,7 +269,6 @@ function AutoScrollUpdater({
 
       const distance = velocity * (cappedElapsedTime / 1000);
 
-      console.log('frameCallbackFunction', distance, ctx.progress);
       scrollBy(distance, animateScrollTo);
     },
     [