perf: Merge item decoration styles with position styles (#407)

## Description

This PR improves `ItemCell` component implementation by merging
decoration animated styles and layout styles (which results in twice
less animated views with custom props, so less commits and clones of
ShadowNodes to apply reanimated changes). It also cleans up code a bit
by separating item position calculation from animated styles hooks.

Author: MatiPl01

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

@@ -1,6 +1,5 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import { Fragment, memo, useEffect, useState } from 'react';
-import { StyleSheet, type ViewStyle } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 import {
   LayoutAnimationConfig,
@@ -12,9 +11,8 @@ import {
   CommonValuesContext,
   ItemContextProvider,
   useCommonValuesContext,
-  useItemDecorationStyles,
-  useItemLayoutStyles,
   useItemPanGesture,
+  useItemStyles,
   useMeasurementsContext,
   usePortalContext
 } from '../../../providers';
@@ -51,12 +49,7 @@ function DraggableView({
   const [isTeleported, setIsTeleported] = useState(false);
   const activationAnimationProgress = useSharedValue(0);
   const isActive = useDerivedValue(() => activeItemKey.value === key);
-  const layoutStyles = useItemLayoutStyles(key, activationAnimationProgress);
-  const decorationStyles = useItemDecorationStyles(
-    key,
-    isActive,
-    activationAnimationProgress
-  );
+  const itemStyles = useItemStyles(key, isActive, activationAnimationProgress);
   const gesture = useItemPanGesture(key, activationAnimationProgress);
 
   useEffect(() => {
@@ -79,6 +72,9 @@ function DraggableView({
     };
   }, [portalContext, teleportedItemId]);
 
+  const onMeasure = (width: number, height: number) =>
+    handleItemMeasurement(key, { height, width });
+
   const withItemContext = (component: ReactNode) => (
     <ItemContextProvider
       activationAnimationProgress={activationAnimationProgress}
@@ -89,16 +85,14 @@ function DraggableView({
     </ItemContextProvider>
   );
 
-  const renderItemCell = (styleOverride?: ViewStyle) => {
+  const renderItemCell = (hidden = false) => {
     const innerComponent = (
       <ItemCell
         {...layoutAnimations}
-        cellStyle={[style, layoutStyles, styleOverride]}
-        decorationStyles={decorationStyles}
+        cellStyle={[style, itemStyles]}
+        hidden={hidden}
         itemsOverridesStyle={itemsOverridesStyle}
-        onMeasure={(width, height) =>
-          handleItemMeasurement(key, { height, width })
-        }>
+        onMeasure={onMeasure}>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
           {children}
         </LayoutAnimationConfig>
@@ -134,7 +128,8 @@ function DraggableView({
           baseCellStyle={style}
           isActive={isActive}
           itemKey={key}
-          itemsOverridesStyle={itemsOverridesStyle}>
+          itemsOverridesStyle={itemsOverridesStyle}
+          onMeasure={onMeasure}>
           {children}
         </TeleportedItemCell>
       )}
@@ -145,7 +140,7 @@ function DraggableView({
     <Fragment>
       {/* We cannot unmount this item as its gesture detector must be still
       mounted to continue handling the pan gesture */}
-      {renderItemCell(isTeleported ? styles.hidden : undefined)}
+      {renderItemCell(isTeleported)}
       <ActiveItemPortal
         activationAnimationProgress={activationAnimationProgress}
         renderTeleportedItemCell={renderTeleportedItemCell}
@@ -156,10 +151,4 @@ function DraggableView({
   );
 }
 
-const styles = StyleSheet.create({
-  hidden: {
-    opacity: 0
-  }
-});
-
 export default memo(DraggableView);

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

@@ -1,5 +1,10 @@
 import type { PropsWithChildren } from 'react';
-import type { LayoutChangeEvent, ViewStyle } from 'react-native';
+import {
+  type LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  type ViewStyle
+} from 'react-native';
 import type { AnimatedStyle } from 'react-native-reanimated';
 import Animated from 'react-native-reanimated';
 
@@ -11,42 +16,74 @@ import type {
 import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
 
 export type ItemCellProps = PropsWithChildren<{
-  decorationStyles: AnimatedStyleProp;
   itemsOverridesStyle: AnimatedStyle<ViewStyle>;
   cellStyle: AnimatedStyleProp;
-  onMeasure?: MeasureCallback;
+  onMeasure: MeasureCallback;
+  hidden?: boolean;
   entering?: LayoutAnimation;
   exiting?: LayoutAnimation;
 }>;
 
 export default function ItemCell({
   cellStyle,
   children,
-  decorationStyles,
   entering,
   exiting,
+  hidden,
   itemsOverridesStyle,
   onMeasure
 }: ItemCellProps) {
-  const maybeOnLayout = onMeasure
-    ? ({
+  const style = [
+    styles.decoration,
+    cellStyle,
+    itemsOverridesStyle,
+    hidden && styles.hidden
+  ];
+
+  const onLayout = hidden
+    ? undefined
+    : ({
         nativeEvent: {
           layout: { height, width }
         }
       }: LayoutChangeEvent) => {
         onMeasure(width, height);
-      }
-    : undefined;
+      };
 
   return (
-    <Animated.View style={cellStyle}>
-      <AnimatedOnLayoutView
-        entering={entering}
-        exiting={exiting}
-        style={[itemsOverridesStyle, decorationStyles]}
-        onLayout={maybeOnLayout}>
-        {children}
-      </AnimatedOnLayoutView>
-    </Animated.View>
+    <AnimatedOnLayoutView style={style} onLayout={onLayout}>
+      {/* TODO - remove itemEntering and itemExiting layout animation in sortables v2 */}
+      {entering || exiting ? (
+        <Animated.View entering={entering} exiting={exiting}>
+          {children}
+        </Animated.View>
+      ) : (
+        children
+      )}
+    </AnimatedOnLayoutView>
   );
 }
+
+const styles = StyleSheet.create({
+  decoration: Platform.select<ViewStyle>({
+    android: {
+      elevation: 5
+    },
+    default: {},
+    native: {
+      shadowOffset: {
+        height: 0,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 5
+    }
+  }),
+  hidden: {
+    // TODO - find a better way to hide the item
+    // (can't use opacity and transform because they are used in animated
+    // styles, which take precedence over the js style; can't change dimensions
+    // as they trigger layout transition in the child component)
+    left: -9999
+  }
+});

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

@@ -3,11 +3,8 @@ import type { ViewStyle } from 'react-native';
 import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 import { LayoutAnimationConfig } from 'react-native-reanimated';
 
-import {
-  useItemDecorationStyles,
-  useTeleportedItemStyles
-} from '../../../providers';
-import type { AnimatedStyleProp } from '../../../types';
+import { useTeleportedItemStyles } from '../../../providers';
+import type { AnimatedStyleProp, MeasureCallback } from '../../../types';
 import ItemCell from './ItemCell';
 
 type TeleportedItemCellProps = PropsWithChildren<{
@@ -16,6 +13,7 @@ type TeleportedItemCellProps = PropsWithChildren<{
   baseCellStyle: AnimatedStyleProp;
   isActive: SharedValue<boolean>;
   itemKey: string;
+  onMeasure: MeasureCallback;
 }>;
 
 export default function TeleportedItemCell({
@@ -24,24 +22,20 @@ export default function TeleportedItemCell({
   children,
   isActive,
   itemKey,
-  itemsOverridesStyle
+  itemsOverridesStyle,
+  onMeasure
 }: TeleportedItemCellProps) {
   const teleportedItemStyles = useTeleportedItemStyles(
     itemKey,
     isActive,
     activationAnimationProgress
   );
-  const decorationStyles = useItemDecorationStyles(
-    itemKey,
-    isActive,
-    activationAnimationProgress
-  );
 
   return (
     <ItemCell
       cellStyle={[baseCellStyle, teleportedItemStyles]}
-      decorationStyles={decorationStyles}
-      itemsOverridesStyle={itemsOverridesStyle}>
+      itemsOverridesStyle={itemsOverridesStyle}
+      onMeasure={onMeasure}>
       <LayoutAnimationConfig skipEntering>{children}</LayoutAnimationConfig>
     </ItemCell>
   );

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

@@ -174,7 +174,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
     const mainDimension = isVertical ? 'width' : 'height';
     if (currentStyleOverride?.[mainDimension] !== mainGroupSize.value) {
       itemsStyleOverride.value = {
-        [mainDimension]: mainGroupSize.value
+        [mainDimension]: mainGroupSize.value + mainGap.value
       };
     }
 

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

@@ -54,7 +54,7 @@ export const calculateLayout = ({
     // Update offset of the next group
     crossAxisOffsets[crossIndex + 1] = Math.max(
       crossAxisOffsets[crossIndex + 1] ?? 0,
-      crossAxisOffset + crossItemSize + gaps.cross
+      crossAxisOffset + crossItemSize
     );
 
     // Update item position

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

@@ -1,6 +1,5 @@
 export { default as useDebugBoundingBox } from './useDebugBoundingBox';
-export { default as useItemDecorationStyles } from './useItemDecorationStyles';
-export { default as useItemLayoutStyles } from './useItemLayoutStyles';
 export { default as useItemPanGesture } from './useItemPanGesture';
+export { default as useItemStyles } from './useItemStyles';
 export { default as useOrderUpdater } from './useOrderUpdater';
 export { default as useTeleportedItemStyles } from './useTeleportedItemStyles';

…/shared/hooks/useItemDecorationStyles.ts …/shared/hooks/useItemDecorationValues.tspackages/react-native-sortables/src/providers/shared/hooks/useItemDecorationStyles.ts renamed to packages/react-native-sortables/src/providers/shared/hooks/useItemDecorationValues.ts packages/react-native-sortables/src/providers/shared/hooks/useItemDecorationStyles.ts renamed to packages/react-native-sortables/src/providers/shared/hooks/useItemDecorationValues.ts

@@ -1,24 +1,19 @@
-import { useMemo } from 'react';
-import type { ViewStyle } from 'react-native';
-import { Platform, StyleSheet } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import {
   interpolate,
   interpolateColor,
-  useAnimatedStyle,
   useDerivedValue,
   withTiming
 } from 'react-native-reanimated';
 
 import { IS_WEB } from '../../../constants';
-import type { AnimatedStyleProp } from '../../../types';
 import { useCommonValuesContext } from '../CommonValuesProvider';
 
-export default function useItemDecorationStyles(
-  itemKey: string,
+export default function useItemDecorationValues(
+  key: string,
   isActive: SharedValue<boolean>,
   activationAnimationProgress: SharedValue<number>
-): AnimatedStyleProp {
+) {
   const {
     activationAnimationDuration,
     activeItemOpacity,
@@ -31,7 +26,7 @@ export default function useItemDecorationStyles(
   } = useCommonValuesContext();
 
   const adjustedInactiveProgress = useDerivedValue(() => {
-    if (isActive.value || prevActiveItemKey.value === itemKey) {
+    if (isActive.value || prevActiveItemKey.value === key) {
       return withTiming(0, { duration: activationAnimationDuration.value });
     }
 
@@ -42,7 +37,7 @@ export default function useItemDecorationStyles(
     );
   });
 
-  const animatedStyle = useAnimatedStyle(() => {
+  return useDerivedValue(() => {
     const progress = activationAnimationProgress.value;
     const zeroProgressOpacity = interpolate(
       adjustedInactiveProgress.value,
@@ -83,23 +78,4 @@ export default function useItemDecorationStyles(
       ]
     };
   });
-
-  return useMemo(() => [styles.decoration, animatedStyle], [animatedStyle]);
 }
-
-const styles = StyleSheet.create({
-  decoration: Platform.select<ViewStyle>({
-    android: {
-      elevation: 5
-    },
-    default: {},
-    native: {
-      shadowOffset: {
-        height: 0,
-        width: 0
-      },
-      shadowOpacity: 1,
-      shadowRadius: 5
-    }
-  })
-});