fix: Invalid items animation on screen change

[MatiPl01]

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-native-sortables-docs	⬜️ Ignored (Inspect)	Visit Preview		Jun 15, 2025 2:51pm

[Copilot]

Pull Request Overview

This PR fixes the invalid animation behavior of items during screen changes by updating layout animation conditions and refactoring animation logic. Key changes include:

• Updated comments and type definitions for layout animation across web and native platforms.
• Removed deprecated layout transition props and refactored animation logic in layout hooks.
• Added a debug option to trace animation flows in sortable components.

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react-native-sortables/src/types/providers/shared.ts	Updated comment for shouldAnimateLayout to reflect its behavior on web resizing.
packages/react-native-sortables/src/types/props/shared.ts	Removed LayoutTransition type and its usage.
packages/react-native-sortables/src/providers/shared/hooks/useItemLayoutStyles.web.ts	Removed web-specific hook for item layout styles.
packages/react-native-sortables/src/providers/shared/hooks/useItemLayoutStyles.ts	Refactored animation updates for active/inactive items and simplified active item translation.
packages/react-native-sortables/src/providers/layout/grid/GridLayoutProvider.tsx	Modified the condition for animating the layout based on container resize state on web.
packages/react-native-sortables/src/providers/layout/flex/FlexLayoutProvider.tsx	Applied similar condition update as in GridLayoutProvider.
packages/react-native-sortables/src/constants/props.ts	Removed the itemsLayout property from default shared props.
packages/react-native-sortables/src/components/shared/SortableContainer.tsx	Adjusted animation trigger condition and added a debug prop to conditionally render the debug overlay.
packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx	Removed the unused layout prop for Animated.View.
packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx	Removed the layout prop following the upstream changes.
packages/react-native-sortables/src/components/shared/AnimatedOnLayoutView.tsx	Updated comment to clarify layout update behavior.
packages/react-native-sortables/src/components/SortableGrid.tsx	Removed itemsLayout prop and propagated the debug prop through grid components.
packages/react-native-sortables/src/components/SortableFlex.tsx	Removed itemsLayout prop and propagated the debug prop through flex components.

Comments suppressed due to low confidence (3)

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

• The condition for determining when to animate layout on web has been inverted. Verify that this change correctly handles cases when the parent container is resized.

!IS_WEB ||              !previousProps?.mainGroupSize ||              props.mainGroupSize === previousProps.mainGroupSize

packages/react-native-sortables/src/providers/shared/hooks/useItemLayoutStyles.ts:95

• The active item update now sets translateX and translateY directly from position, without subtracting any layout offset. Please ensure that this change in offset handling is consistent with the intended UI behavior.

translateX.value = position.x;

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

• The removal of the explicit IS_WEB check from the maybeAnimate function makes animation solely dependent on shouldAnimateLayout. Confirm that this change meets the intended animation behavior across different platforms.

animate && shouldAnimateLayout.value && value !== null

[MatiPl01]

🎉 This issue has been resolved in version 1.7.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀