fix: Invalid items animation on screen change (#396)

## Description

Describe what was changed in this pull request

## Changes showcase

Include example images/recordings if the new feature introduces some
visual changes or the PR fixes a UI bug

Author: MatiPl01

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

@@ -27,12 +27,12 @@ function SortableFlex(props: SortableFlexProps) {
       ...styleProps
     },
     sharedProps: {
+      debug,
       dimensionsAnimationType,
       DropIndicatorComponent,
       dropIndicatorStyle,
       itemEntering,
       itemExiting,
-      itemsLayout,
       overflow,
       reorderTriggerOrigin,
       showDropIndicator,
@@ -64,6 +64,7 @@ function SortableFlex(props: SortableFlexProps) {
     <SharedProvider
       {...sharedProps}
       controlledContainerDimensions={controlledContainerDimensions}
+      debug={debug}
       initialItemsStyleOverride={styles.styleOverride}
       itemKeys={itemKeys}
       onDragEnd={onDragEnd}>
@@ -77,12 +78,12 @@ function SortableFlex(props: SortableFlexProps) {
         />
         <SortableFlexInner
           childrenArray={childrenArray}
+          debug={debug}
           dimensionsAnimationType={dimensionsAnimationType}
           DropIndicatorComponent={DropIndicatorComponent}
           dropIndicatorStyle={dropIndicatorStyle}
           itemEntering={itemEntering}
           itemExiting={itemExiting}
-          itemsLayout={itemsLayout}
           overflow={overflow}
           showDropIndicator={showDropIndicator}
           style={[
@@ -102,10 +103,10 @@ type SortableFlexInnerProps = DropIndicatorSettings &
   Required<
     Pick<
       SortableFlexProps,
+      | 'debug'
       | 'dimensionsAnimationType'
       | 'itemEntering'
       | 'itemExiting'
-      | 'itemsLayout'
       | 'overflow'
     >
   > & {
@@ -117,7 +118,6 @@ function SortableFlexInner({
   childrenArray,
   itemEntering,
   itemExiting,
-  itemsLayout,
   style,
   ...containerProps
 }: SortableFlexInnerProps) {
@@ -128,8 +128,7 @@ function SortableFlexInner({
           entering={itemEntering ?? undefined}
           exiting={itemExiting ?? undefined}
           itemKey={key}
-          key={key}
-          layout={itemsLayout ?? undefined}>
+          key={key}>
           {child}
         </DraggableView>
       ))}

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

@@ -44,12 +44,12 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
       strategy
     },
     sharedProps: {
+      debug,
       dimensionsAnimationType,
       DropIndicatorComponent,
       dropIndicatorStyle,
       itemEntering,
       itemExiting,
-      itemsLayout,
       overflow,
       reorderTriggerOrigin,
       showDropIndicator,
@@ -87,6 +87,7 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
     <SharedProvider
       {...sharedProps}
       controlledContainerDimensions={controlledContainerDimensions}
+      debug={debug}
       itemKeys={itemKeys}
       initialItemsStyleOverride={
         isVertical ? undefined : styles.horizontalStyleOverride
@@ -110,6 +111,7 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
         <SortableGridInner
           columnGap={columnGapValue}
           data={data}
+          debug={debug}
           dimensionsAnimationType={dimensionsAnimationType}
           DropIndicatorComponent={DropIndicatorComponent}
           dropIndicatorStyle={dropIndicatorStyle}
@@ -118,7 +120,6 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
           itemEntering={itemEntering}
           itemExiting={itemExiting}
           itemKeys={itemKeys}
-          itemsLayout={itemsLayout}
           overflow={overflow}
           renderItem={renderItem}
           rowGap={rowGapValue}
@@ -135,10 +136,10 @@ type SortableGridInnerProps<I> = DropIndicatorSettings &
     Pick<
       SortableGridProps<I>,
       | 'data'
+      | 'debug'
       | 'dimensionsAnimationType'
       | 'itemEntering'
       | 'itemExiting'
-      | 'itemsLayout'
       | 'overflow'
       | 'renderItem'
       | 'rowHeight'
@@ -159,7 +160,6 @@ function SortableGridInner<I>({
   itemEntering,
   itemExiting,
   itemKeys,
-  itemsLayout,
   renderItem,
   rowGap,
   rowHeight,
@@ -190,7 +190,6 @@ function SortableGridInner<I>({
           item={item}
           itemKey={key}
           key={key}
-          layout={itemsLayout ?? undefined}
           renderItem={renderItem}
           style={animatedItemStyle}
         />

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

@@ -24,7 +24,7 @@ const AnimatedViewWeb = componentWithRef<
       onLayout={e => {
         const el = (e.nativeEvent as unknown as { target: HTMLElement }).target;
         // We want to call onLayout only for displayed views to prevent
-        // layout animation on navigation between screens
+        // layout updates on navigation between screens
         if (el?.offsetParent) {
           onLayout(e);
         }

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

@@ -21,7 +21,6 @@ import {
   type AnimatedStyleProp,
   ItemPortalState,
   type LayoutAnimation,
-  type LayoutTransition,
   type MeasureCallback
 } from '../../../types';
 import { getContextProvider } from '../../../utils';
@@ -35,7 +34,6 @@ export type DraggableViewProps = PropsWithChildren<{
   itemKey: string;
   entering: LayoutAnimation | undefined;
   exiting: LayoutAnimation | undefined;
-  layout: LayoutTransition | undefined;
   style?: AnimatedStyleProp;
 }>;
 

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

@@ -3,11 +3,9 @@ import { type ViewStyle } from 'react-native';
 import type { AnimatedStyle } from 'react-native-reanimated';
 import Animated from 'react-native-reanimated';
 
-import { IS_WEB } from '../../../constants';
 import type {
   AnimatedStyleProp,
   LayoutAnimation,
-  LayoutTransition,
   MeasureCallback
 } from '../../../types';
 import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
@@ -19,7 +17,6 @@ export type ItemCellProps = PropsWithChildren<{
   onMeasure: MeasureCallback;
   entering?: LayoutAnimation;
   exiting?: LayoutAnimation;
-  layout?: LayoutTransition;
 }>;
 
 export default function ItemCell({
@@ -29,11 +26,10 @@ export default function ItemCell({
   entering,
   exiting,
   itemsOverridesStyle,
-  layout,
   onMeasure
 }: ItemCellProps) {
   return (
-    <Animated.View layout={!IS_WEB ? layout : undefined} style={cellStyle}>
+    <Animated.View style={cellStyle}>
       <AnimatedOnLayoutView
         entering={entering}
         exiting={exiting}

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

@@ -32,12 +32,14 @@ type AnimatedHeightContainerProps = PropsWithChildren<
   DropIndicatorSettings & {
     dimensionsAnimationType: DimensionsAnimation;
     overflow: Overflow;
+    debug?: boolean;
     style?: StyleProp<ViewStyle>;
   }
 >;
 
 export default function SortableContainer({
   children,
+  debug,
   dimensionsAnimationType,
   DropIndicatorComponent,
   dropIndicatorStyle,
@@ -67,7 +69,7 @@ export default function SortableContainer({
     }
 
     const maybeAnimate = (value: null | number, animate: boolean) =>
-      animate && (!IS_WEB || shouldAnimateLayout.value) && value !== null
+      animate && shouldAnimateLayout.value && value !== null
         ? withTiming(value)
         : value;
 
@@ -140,7 +142,7 @@ export default function SortableContainer({
         {children}
       </Animated.View>
       {/* Renders an overlay view helpful for debugging */}
-      <DebugOutlet />
+      {debug && <DebugOutlet />}
     </Animated.View>
   );
 }

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

@@ -1,5 +1,4 @@
 import type { ViewStyle } from 'react-native';
-import { LinearTransition } from 'react-native-reanimated';
 
 import { DefaultDropIndicator } from '../components/defaults';
 import type {
@@ -57,7 +56,6 @@ export const DEFAULT_SHARED_PROPS = {
   // fixed in `react-native-reanimated` in the future.
   itemEntering: IS_WEB ? null : SortableItemEntering,
   itemExiting: IS_WEB ? null : SortableItemExiting,
-  itemsLayout: IS_WEB ? null : LinearTransition,
   itemsLayoutTransitionMode: 'all',
   onActiveItemDropped: undefined,
   onDragMove: undefined,

packages/react-native-sortables/src/providers/layout/flex/FlexLayoutProvider.tsx

@@ -153,11 +153,11 @@ const { FlexLayoutProvider, useFlexLayoutContext } = createProvider(
 
           onChange(
             props && calculateLayout(props),
-            // Animate layout only if parent container is not resized
+            // On web, animate layout only if parent container is not resized
             // (e.g. skip animation when the browser window is resized)
-            IS_WEB &&
-              (!previousProps?.limits ||
-                haveEqualPropValues(props?.limits, previousProps?.limits))
+            !IS_WEB ||
+              !previousProps?.limits ||
+              haveEqualPropValues(props?.limits, previousProps?.limits)
           );
         }
       ),

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

@@ -134,11 +134,11 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
 
           onChange(
             calculateLayout(props),
-            // Animate layout only if parent container is not resized
+            // On web, animate layout only if parent container is not resized
             // (e.g. skip animation when the browser window is resized)
-            IS_WEB &&
-              (!previousProps?.mainGroupSize ||
-                props.mainGroupSize === previousProps.mainGroupSize)
+            !IS_WEB ||
+              !previousProps?.mainGroupSize ||
+              props.mainGroupSize === previousProps.mainGroupSize
           );
         }
       ),