chore: Optimize and clean up item cell animated styles (#459)

## Description

Moving some code executed in each cell to the common provider and some
other cleanup of animated styles.

Author: MatiPl01

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

@@ -59,6 +59,7 @@ export default function ActiveItemPortal({
           <TeleportedItemCell
             activationAnimationProgress={activationAnimationProgress}
             cellStyle={cellStyle}
+            innerCellStyle={commonValuesContext.controlledDimensionsStyle}
             isActive={isActive}
             itemKey={itemKey}>
             {children}

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

@@ -44,12 +44,13 @@ function DraggableView({
   const { handleItemMeasurement, removeItemMeasurements } =
     useMeasurementsContext();
   const { handleDragEnd } = useDragContext();
-  const { activeItemKey, customHandle } = commonValuesContext;
+  const { activeItemKey, controlledDimensionsStyle, customHandle } =
+    commonValuesContext;
 
   const [isHidden, setIsHidden] = useState(false);
   const activationAnimationProgress = useMutableValue(0);
   const isActive = useDerivedValue(() => activeItemKey.value === key);
-  const itemStyles = useItemStyles(key, isActive, activationAnimationProgress);
+  const layoutStyle = useItemStyles(key, isActive, activationAnimationProgress);
   const gesture = useItemPanGesture(key, activationAnimationProgress);
 
   useEffect(() => {
@@ -74,10 +75,11 @@ function DraggableView({
     const innerComponent = (
       <ItemCell
         activationAnimationProgress={activationAnimationProgress}
-        cellStyle={[style, itemStyles]}
+        cellStyle={[style, layoutStyle]}
         entering={itemEntering ?? undefined}
         exiting={itemExiting ?? undefined}
         hidden={hidden}
+        innerCellStyle={controlledDimensionsStyle}
         isActive={isActive}
         itemKey={key}
         onLayout={onLayout}>

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

@@ -6,25 +6,21 @@ import {
   type ViewStyle
 } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
-import Animated, {
-  useAnimatedStyle,
-  useDerivedValue
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { HIDDEN_X_OFFSET } from '../../../constants';
 import type {
   AnimatedStyleProp,
   LayoutAnimation
 } from '../../../integrations/reanimated';
-import { useCommonValuesContext, useItemDecoration } from '../../../providers';
-import type { Dimensions } from '../../../types';
-import { resolveDimension } from '../../../utils';
+import { useItemDecorationStyle } from '../../../providers';
 import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
 
 export type ItemCellProps = PropsWithChildren<{
   itemKey: string;
   isActive: SharedValue<boolean>;
   activationAnimationProgress: SharedValue<number>;
+  innerCellStyle: AnimatedStyleProp;
   cellStyle: AnimatedStyleProp;
   onLayout?: (event: LayoutChangeEvent) => void;
   hidden?: boolean;
@@ -39,33 +35,17 @@ export default function ItemCell({
   entering,
   exiting,
   hidden,
+  innerCellStyle,
   isActive,
   itemKey,
   onLayout
 }: ItemCellProps) {
-  const { controlledItemDimensions, itemHeights, itemWidths } =
-    useCommonValuesContext();
-
-  const decoration = useItemDecoration(
+  const decorationStyle = useItemDecorationStyle(
     itemKey,
     isActive,
     activationAnimationProgress
   );
 
-  const controlledDimensions = useDerivedValue(() => {
-    const result: Partial<Dimensions> = {};
-    if (controlledItemDimensions.width) {
-      result.width = resolveDimension(itemWidths.value, itemKey) ?? undefined;
-    }
-    if (controlledItemDimensions.height) {
-      result.height = resolveDimension(itemHeights.value, itemKey) ?? undefined;
-    }
-    return result;
-  });
-
-  const decorationStyle = useAnimatedStyle(() => decoration.value);
-  const dimensionsStyle = useAnimatedStyle(() => controlledDimensions.value);
-
   return (
     <Animated.View style={cellStyle}>
       <AnimatedOnLayoutView
@@ -74,7 +54,7 @@ export default function ItemCell({
         style={[
           styles.decoration,
           decorationStyle,
-          dimensionsStyle,
+          innerCellStyle,
           hidden && styles.hidden
         ]}
         onLayout={onLayout}>

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

@@ -9,6 +9,7 @@ type TeleportedItemCellProps = Pick<
   | 'activationAnimationProgress'
   | 'cellStyle'
   | 'children'
+  | 'innerCellStyle'
   | 'isActive'
   | 'itemKey'
   | 'onLayout'
@@ -18,6 +19,7 @@ export default function TeleportedItemCell({
   activationAnimationProgress,
   cellStyle,
   children,
+  innerCellStyle,
   isActive,
   itemKey,
   onLayout
@@ -32,6 +34,7 @@ export default function TeleportedItemCell({
     <ItemCell
       activationAnimationProgress={activationAnimationProgress}
       cellStyle={[cellStyle, teleportedItemStyles]}
+      innerCellStyle={innerCellStyle}
       isActive={isActive}
       itemKey={itemKey}
       onLayout={onLayout}>

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

@@ -1,6 +1,10 @@
 import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
 import type { View } from 'react-native';
-import { useAnimatedRef, useDerivedValue } from 'react-native-reanimated';
+import {
+  useAnimatedRef,
+  useAnimatedStyle,
+  useDerivedValue
+} from 'react-native-reanimated';
 
 import type { Animatable } from '../../integrations/reanimated';
 import {
@@ -82,6 +86,12 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
     const itemHeights = useMutableValue<ItemSizes>(
       controlledItemDimensions.height ? null : {}
     );
+    const controlledHeight = useDerivedValue(() =>
+      controlledItemDimensions.height ? (itemHeights.value as number) : null
+    );
+    const controlledWidth = useDerivedValue(() =>
+      controlledItemDimensions.width ? (itemWidths.value as number) : null
+    );
     const activeItemDimensions = useMutableValue<Dimensions | null>(null);
 
     // DRAG STATE
@@ -133,6 +143,17 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
       }
     }, [itemKeys, indexToKey]);
 
+    const controlledDimensionsStyle = useAnimatedStyle(() => {
+      const result: Partial<Dimensions> = {};
+      if (controlledHeight.value !== null) {
+        result.height = controlledHeight.value;
+      }
+      if (controlledWidth.value !== null) {
+        result.width = controlledWidth.value;
+      }
+      return result;
+    });
+
     return {
       value: {
         activationAnimationDuration,
@@ -151,6 +172,7 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
         containerRef,
         containerWidth,
         controlledContainerDimensions,
+        controlledDimensionsStyle,
         controlledItemDimensions,
         customHandle,
         dragActivationDelay,

packages/react-native-sortables/src/providers/shared/hooks/index.ts

@@ -1,5 +1,5 @@
 export { default as useDebugBoundingBox } from './useDebugBoundingBox';
-export { default as useItemDecoration } from './useItemDecoration';
+export { default as useItemDecorationStyle } from './useItemDecorationStyle';
 export { default as useItemDimensions } from './useItemDimensions';
 export { default as useItemStyles } from './useItemLayoutStyle';
 export { default as useItemPanGesture } from './useItemPanGesture';

packages/react-native-sortables/src/providers/shared/hooks/useItemDecoration.ts renamed to packages/react-native-sortables/src/providers/shared/hooks/useItemDecorationStyle.ts

@@ -2,14 +2,15 @@ import type { SharedValue } from 'react-native-reanimated';
 import {
   interpolate,
   interpolateColor,
+  useAnimatedStyle,
   useDerivedValue,
   withTiming
 } from 'react-native-reanimated';
 
 import { IS_WEB } from '../../../constants';
 import { useCommonValuesContext } from '../CommonValuesProvider';
 
-export default function useItemDecoration(
+export default function useItemDecorationStyle(
   key: string,
   isActive: SharedValue<boolean>,
   activationAnimationProgress: SharedValue<number>
@@ -37,7 +38,7 @@ export default function useItemDecoration(
     );
   });
 
-  return useDerivedValue(() => {
+  const decoration = useDerivedValue(() => {
     const progress = activationAnimationProgress.value;
     const zeroProgressOpacity = interpolate(
       adjustedInactiveProgress.value,
@@ -78,4 +79,6 @@ export default function useItemDecoration(
       ]
     };
   });
+
+  return useAnimatedStyle(() => decoration.value);
 }

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

@@ -6,6 +6,7 @@ import type {
 } from 'react-native-gesture-handler';
 import type {
   AnimatedRef,
+  AnimatedStyle,
   MeasuredDimensions,
   SharedValue
 } from 'react-native-reanimated';
@@ -62,6 +63,7 @@ export type CommonValuesContextType =
       containerHeight: SharedValue<null | number>;
       itemWidths: SharedValue<ItemSizes>;
       itemHeights: SharedValue<ItemSizes>;
+      controlledDimensionsStyle: AnimatedStyle<Partial<Dimensions>>;
       activeItemDimensions: SharedValue<Dimensions | null>;
 
       // DRAG STATE