fix: Entering layout animation flickering (#509)

## Description

Flickering was caused by the animated style assigned on the same view as
the entering layout animation. Unfortunately, the two shouldn't be
mixed. I moved the overridden cell dimensions to the outer view to keep
the inner `Animated.View` having only entering and exiting animations.

## Example recordings

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/19a4b330-5adc-4e89-b351-cbd7386162d9"
/> | <video
src="https://github.com/user-attachments/assets/dd569d13-7552-498a-a92b-eb9879856706"
/> |

Author: MatiPl01

packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx

@@ -42,31 +42,30 @@ export default function ItemCell({
   layoutStyleValue,
   onLayout
 }: ItemCellProps) {
-  const { controlledItemDimensionsStyle } = useCommonValuesContext();
+  const { overriddenCellDimensions } = useCommonValuesContext();
 
   const decorationStyleValue = useItemDecoration(
     itemKey,
     isActive,
     activationAnimationProgress
   );
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      ...decorationStyleValue.value,
-      ...layoutStyleValue.value,
-      transform: [
-        ...((layoutStyleValue.value.transform ?? []) as TransformsArray),
-        ...((decorationStyleValue.value.transform ?? []) as TransformsArray)
-      ]
-    };
-  });
+  const animatedCellStyle = useAnimatedStyle(() => ({
+    ...overriddenCellDimensions.value,
+    ...decorationStyleValue.value,
+    ...layoutStyleValue.value,
+    transform: [
+      ...((layoutStyleValue.value.transform ?? []) as TransformsArray),
+      ...((decorationStyleValue.value.transform ?? []) as TransformsArray)
+    ]
+  }));
 
   return (
-    <Animated.View style={[baseStyle, styles.decoration, animatedStyle]}>
+    <Animated.View style={[baseStyle, styles.decoration, animatedCellStyle]}>
       <AnimatedOnLayoutView
         entering={entering}
         exiting={exiting}
-        style={[controlledItemDimensionsStyle, hidden && styles.hidden]}
+        style={hidden && styles.hidden}
         onLayout={onLayout}>
         {children}
       </AnimatedOnLayoutView>

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

@@ -57,6 +57,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
     itemHeights,
     itemPositions,
     itemWidths,
+    overriddenCellDimensions,
     shouldAnimateLayout
   } = useCommonValuesContext();
   const { applyControlledContainerDimensions } = useMeasurementsContext();
@@ -134,6 +135,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
 
       if (isVertical) {
         itemWidths.value = value;
+        overriddenCellDimensions.value = { width: value + mainGap.value };
       } else {
         itemHeights.value = value;
       }

packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts

@@ -1,11 +1,8 @@
 import { type PropsWithChildren, useEffect, useMemo } from 'react';
-import type { View, ViewStyle } from 'react-native';
-import {
-  useAnimatedRef,
-  useAnimatedStyle,
-  useDerivedValue
-} from 'react-native-reanimated';
+import type { View } from 'react-native';
+import { useAnimatedRef, useDerivedValue } from 'react-native-reanimated';
 
+import { EMPTY_OBJECT } from '../../constants';
 import type { Animatable } from '../../integrations/reanimated';
 import {
   useAnimatableValue,
@@ -87,16 +84,8 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
       controlledItemDimensions.height ? null : {}
     );
     const activeItemDimensions = useMutableValue<Dimensions | null>(null);
-    const controlledItemWidth = useDerivedValue(() =>
-      typeof itemWidths.value === 'number' ? itemWidths.value : undefined
-    );
-    const controlledItemHeight = useDerivedValue(() =>
-      typeof itemHeights.value === 'number' ? itemHeights.value : undefined
-    );
-    const controlledItemDimensionsStyle = useAnimatedStyle<ViewStyle>(() => ({
-      height: controlledItemHeight.value,
-      width: controlledItemWidth.value
-    }));
+    const overriddenCellDimensions =
+      useMutableValue<Partial<Dimensions>>(EMPTY_OBJECT);
 
     // DRAG STATE
     const activeItemKey = useMutableValue<null | string>(null);
@@ -167,7 +156,6 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
         containerWidth,
         controlledContainerDimensions,
         controlledItemDimensions,
-        controlledItemDimensionsStyle,
         customHandle,
         dragActivationDelay,
         dragActivationFailOffset,
@@ -182,6 +170,7 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
         itemsLayoutTransitionMode,
         itemWidths,
         keyToIndex,
+        overriddenCellDimensions,
         prevActiveItemKey,
         shouldAnimateLayout,
         snapOffsetX,

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

@@ -1,12 +1,11 @@
 import type { ReactNode } from 'react';
-import type { ScrollView, View, ViewStyle } from 'react-native';
+import type { ScrollView, View } from 'react-native';
 import type {
   GestureTouchEvent,
   GestureType
 } from 'react-native-gesture-handler';
 import type {
   AnimatedRef,
-  AnimatedStyle,
   MeasuredDimensions,
   SharedValue
 } from 'react-native-reanimated';
@@ -79,8 +78,8 @@ export type CommonValuesContextType =
       containerHeight: SharedValue<null | number>;
       itemWidths: SharedValue<ItemSizes>;
       itemHeights: SharedValue<ItemSizes>;
+      overriddenCellDimensions: SharedValue<Partial<Dimensions>>;
       activeItemDimensions: SharedValue<Dimensions | null>;
-      controlledItemDimensionsStyle: AnimatedStyle<ViewStyle>;
 
       // DRAG STATE
       prevActiveItemKey: SharedValue<null | string>;