feat: Customizable dimensions animation type - layout and worklet (#355)

## Description

This PR removes `animateHeight` and `animateWidth` props and replaces
them with `dimensionsAnimationType` property. This prop is used for both
- height and width animation. It is not just a boolean flag but accepts
string these values:

- `'none'` - no animation - default,
- `'layout'` - uses reanimated layout animations for container
dimensions animation - more efficient but doesn't influence other
components (rendered below, near the sortable component),
- `'worklet'` - worklet-based animations using `useAnimatedStyle` - less
efficient but also affect layout of other views (if other components are
rendered below, near the sortable component)

Author: MatiPl01

example/app/src/examples/SortableFlex/features/DataChangeExample.tsx

@@ -141,9 +141,9 @@ export default function DataChangeExample() {
 
             <Sortable.Flex
               columnGap={spacing.sm}
+              dimensionsAnimationType='worklet'
               rowGap={spacing.xs}
               scrollableRef={scrollableRef}
-              animateHeight
               hapticsEnabled
               onDragEnd={({ order }) => setData(order(data))}>
               {data.map(item => (

example/app/src/examples/SortableGrid/features/DataChangeExample.tsx

@@ -149,10 +149,10 @@ export default function DataChangeExample() {
               columnGap={spacing.sm}
               columns={COLUMNS}
               data={data}
+              dimensionsAnimationType='worklet'
               renderItem={renderItem}
               rowGap={spacing.xs}
               scrollableRef={scrollableRef}
-              animateHeight
               hapticsEnabled
               onDragEnd={({ data: newData }) => setData(newData)}
             />

example/app/src/examples/SortableGrid/features/DragHandleExample.tsx

@@ -67,6 +67,7 @@ export default function DragHandleExample() {
           columnGap={10}
           columns={columns}
           data={DATA}
+          dimensionsAnimationType='layout'
           dragActivationDelay={0}
           overDrag={overDrag}
           renderItem={renderItem}

example/app/src/examples/SortableGrid/features/OrderingStrategyExample.tsx

@@ -25,10 +25,10 @@ export default function OrderingStrategyExample() {
             columnGap={spacing.xs}
             columns={COLUMNS}
             data={DATA}
+            dimensionsAnimationType='worklet'
             renderItem={renderItem}
             rowGap={spacing.xs}
             strategy='insert'
-            animateHeight
           />
         </Section>
 
@@ -39,10 +39,10 @@ export default function OrderingStrategyExample() {
             columnGap={spacing.xs}
             columns={COLUMNS}
             data={DATA}
+            dimensionsAnimationType='worklet'
             renderItem={renderItem}
             rowGap={spacing.xs}
             strategy='swap'
-            animateHeight
           />
         </Section>
       </Stagger>

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

@@ -67,10 +67,10 @@ export default function StaggerAnimationExample() {
         columnGap={10}
         columns={3}
         data={data}
+        dimensionsAnimationType='worklet'
         overflow='visible'
         renderItem={renderItem}
         rowGap={10}
-        animateHeight
         onDragEnd={handleDragEnd}
       />
 

packages/react-native-sortables/src/components/SortableFlex.tsx

@@ -28,8 +28,7 @@ function SortableFlex(props: SortableFlexProps) {
     },
     sharedProps: {
       DropIndicatorComponent,
-      animateHeight,
-      animateWidth,
+      dimensionsAnimationType,
       dropIndicatorStyle,
       itemEntering,
       itemExiting,
@@ -77,9 +76,8 @@ function SortableFlex(props: SortableFlexProps) {
           useAdditionalValues={useFlexLayoutContext}
         />
         <SortableFlexInner
-          animateHeight={animateHeight}
-          animateWidth={animateWidth}
           childrenArray={childrenArray}
+          dimensionsAnimationType={dimensionsAnimationType}
           DropIndicatorComponent={DropIndicatorComponent}
           dropIndicatorStyle={dropIndicatorStyle}
           itemEntering={itemEntering}
@@ -107,8 +105,7 @@ type SortableFlexInnerProps = {
   Required<
     Pick<
       SortableFlexProps,
-      | 'animateHeight'
-      | 'animateWidth'
+      | 'dimensionsAnimationType'
       | 'itemEntering'
       | 'itemExiting'
       | 'itemsLayout'

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -45,8 +45,7 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
     },
     sharedProps: {
       DropIndicatorComponent,
-      animateHeight,
-      animateWidth,
+      dimensionsAnimationType,
       dropIndicatorStyle,
       itemEntering,
       itemExiting,
@@ -109,10 +108,9 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
           useAdditionalValues={useGridLayoutContext}
         />
         <SortableGridInner
-          animateHeight={animateHeight}
-          animateWidth={animateWidth}
           columnGap={columnGapValue}
           data={data}
+          dimensionsAnimationType={dimensionsAnimationType}
           DropIndicatorComponent={DropIndicatorComponent}
           dropIndicatorStyle={dropIndicatorStyle}
           groups={groups}
@@ -142,9 +140,8 @@ type SortableGridInnerProps<I> = {
   Required<
     Pick<
       SortableGridProps<I>,
-      | 'animateHeight'
-      | 'animateWidth'
       | 'data'
+      | 'dimensionsAnimationType'
       | 'itemEntering'
       | 'itemExiting'
       | 'itemsLayout'

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

@@ -6,6 +6,7 @@ import {
   type ViewStyle
 } from 'react-native';
 import Animated, {
+  LinearTransition,
   useAnimatedStyle,
   withTiming
 } from 'react-native-reanimated';
@@ -16,30 +17,29 @@ import {
   useCommonValuesContext,
   useMeasurementsContext
 } from '../../providers';
-import {
-  AbsoluteLayoutState,
-  type DropIndicatorSettings,
-  type Overflow
+import type {
+  DimensionsAnimation,
+  DropIndicatorSettings,
+  Overflow
 } from '../../types';
+import { AbsoluteLayoutState } from '../../types';
 import AnimatedOnLayoutView from './AnimatedOnLayoutView';
 import DropIndicator from './DropIndicator';
 
 const SCREEN_DIMENSIONS = Dimensions.get('screen');
 
 type AnimatedHeightContainerProps = PropsWithChildren<
   {
-    animateHeight: boolean;
-    animateWidth: boolean;
+    dimensionsAnimationType: DimensionsAnimation;
     overflow: Overflow;
     style?: StyleProp<ViewStyle>;
   } & DropIndicatorSettings
 >;
 
 export default function SortableContainer({
   DropIndicatorComponent,
-  animateHeight,
-  animateWidth,
   children,
+  dimensionsAnimationType,
   dropIndicatorStyle,
   overflow,
   showDropIndicator,
@@ -58,6 +58,9 @@ export default function SortableContainer({
   const { handleHelperContainerMeasurement, measurementsContainerRef } =
     useMeasurementsContext();
 
+  const animateWorklet = dimensionsAnimationType === 'worklet';
+  const animateLayout = dimensionsAnimationType === 'layout';
+
   const outerContainerStyle = useAnimatedStyle(() => {
     if (absoluteLayoutState.value !== AbsoluteLayoutState.COMPLETE) {
       return EMPTY_OBJECT;
@@ -73,18 +76,18 @@ export default function SortableContainer({
     return {
       height: maybeAnimate(
         ctrl.height ? containerHeight.value : null,
-        animateHeight
+        animateWorklet
       ),
       overflow:
         activeItemKey.value !== null || !activeItemDropped.value
           ? 'visible'
           : overflow,
       width: maybeAnimate(
         ctrl.width ? containerWidth.value : null,
-        animateWidth
+        animateWorklet
       )
     };
-  }, [animateHeight, animateWidth]);
+  }, [dimensionsAnimationType]);
 
   const innerContainerStyle = useAnimatedStyle(() => {
     if (absoluteLayoutState.value !== AbsoluteLayoutState.COMPLETE) {
@@ -119,6 +122,7 @@ export default function SortableContainer({
 
   return (
     <Animated.View
+      layout={animateLayout ? LinearTransition : undefined}
       // @ts-expect-error - contain is a correct CSS prop on web
       style={[outerContainerStyle, IS_WEB && { contain: 'layout' }]}>
       {showDropIndicator && (

packages/react-native-sortables/src/constants/props.ts

@@ -30,14 +30,13 @@ export const DEFAULT_SHARED_PROPS = {
   activeItemOpacity: 1,
   activeItemScale: 1.1,
   activeItemShadowOpacity: 0.2,
-  animateHeight: false,
-  animateWidth: false,
   autoScrollActivationOffset: 75,
   autoScrollDirection: 'vertical',
   autoScrollEnabled: true,
   autoScrollSpeed: 1,
   customHandle: false,
   debug: false,
+  dimensionsAnimationType: 'none',
   dragActivationDelay: 200,
   dragActivationFailOffset: 5,
   dropAnimationDuration: 300,

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

@@ -222,14 +222,14 @@ export type SortableCallbacks = {
 
 export type Overflow = 'hidden' | 'visible';
 
+export type DimensionsAnimation = 'layout' | 'none' | 'worklet';
+
 export type SharedProps = Simplify<
   Omit<SortableCallbacks, 'onDragEnd'> &
     Partial<
       {
-        /** Whether to animate container height changes when items are moved */
-        animateHeight: boolean;
-        /** Whether to animate container width changes when items are moved */
-        animateWidth: boolean;
+        /** Whether and how to animate container dimensions changes */
+        dimensionsAnimationType: DimensionsAnimation;
         /** Enable haptic feedback when sorting items */
         hapticsEnabled: boolean;
         /** Controls whether sorting functionality is enabled */