feat: Better collapsible auto-scroll behavior #457
Merged
+680
−361
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
MatiPl01
force-pushed
the
feat/better-collapsible-items-autoscroll
branch
from
f6feb58 to
0904a8e
Compare
MatiPl01
force-pushed
the
feat/better-collapsible-items-autoscroll
branch
3 times, most recently
from
e2a1d1f to
d1a1529
Compare
MatiPl01
force-pushed
the
feat/better-collapsible-items-autoscroll
branch
from
562fae8 to
43b1248
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR significantly improves the collapsible auto-scroll behavior in sortable grid components by re-implementing the core logic to perform updates synchronously with layout changes, reducing glitches and unexpected behavior. It also introduces smart scroll offset restoration after items expand to their normal positions.
- Renamed and restructured the auto-adjustment provider for better functionality
- Enhanced scroll behavior with better interpolation and timing mechanisms
- Improved measurement update logic to avoid unnecessary mutations
Reviewed Changes
Copilot reviewed 26 out of 26 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 | Updates AutoScrollContextType with new scrollBy method and scrollableRef |
| packages/react-native-sortables/src/types/providers/grid.ts | Renames and enhances AutoOffsetAdjustmentContextType with adaptLayoutProps |
| packages/react-native-sortables/src/types/props/grid.ts | Moves and restructures AutoAdjustOffsetSettings configuration |
| packages/react-native-sortables/src/types/layout/grid.ts | Updates GridLayoutProps with new layout control properties |
| packages/react-native-sortables/src/providers/shared/hooks/useItemLayout.ts | Refactors animation interpolation logic with new helper functions |
| packages/react-native-sortables/src/providers/shared/MeasurementsProvider.ts | Fixes measurement update logic to create new objects instead of mutating |
| packages/react-native-sortables/src/providers/shared/LayerProvider.tsx | Removes unused StyleSheet and simplifies component structure |
| packages/react-native-sortables/src/providers/shared/ItemsProvider/store.ts | Renames renderNode to renderItem for consistency |
| packages/react-native-sortables/src/providers/shared/DragProvider.ts | Improves drop animation duration calculation |
| packages/react-native-sortables/src/providers/shared/AutoScrollProvider/AutoScrollProvider.tsx | Refactors auto-scroll logic with new scrollBy function |
| packages/react-native-sortables/src/providers/grid/GridProvider.tsx | Updates provider integration with new AutoOffsetAdjustmentProvider |
| packages/react-native-sortables/src/providers/grid/GridLayoutProvider/utils/layout.ts | Refactors layout calculation functions |
| packages/react-native-sortables/src/providers/grid/GridLayoutProvider/GridLayoutProvider.tsx | Enhances layout provider with new adaptation logic |
| packages/react-native-sortables/src/providers/grid/AutoOffsetAdjustmentProvider.tsx | Completely new provider replacing AdditionalCrossOffsetProvider |
| packages/react-native-sortables/src/integrations/reanimated/utils/interpolation.ts | New interpolation utility functions |
| packages/react-native-sortables/src/integrations/reanimated/utils/animatedTimeout.ts | Fixes timeout comparison logic |
| packages/react-native-sortables/src/constants/props.ts | Adds new default properties for auto-adjustment settings |
| packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx | Minor refactoring of animated style logic |
| packages/react-native-sortables/src/components/shared/DraggableView/ActiveItemPortal.tsx | Adds safety check for teleport updates |
| packages/react-native-sortables/src/components/SortableGrid.tsx | Minor formatting change |
| example/app/src/examples/SortableGrid/miscellaneous/CollapsibleItemsExample.tsx | Updates example to showcase new collapsible behavior |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
MatiPl01
pushed a commit
that referenced
this pull request
Sep 13, 2025
# [1.9.0](v1.8.0...v1.9.0) (2025-09-13) ### Bug Fixes * A bunch of issues, like shaky scroll, invalid grid layout, added items flickering ([#463](#463)) ([3b160b6](3b160b6)) * Active item touch start position on Android ([#462](#462)) ([7704729](7704729)) * Autoscroll exceeding bounds ([#473](#473)) ([eddd21b](eddd21b)) * Collapsible items implementation on the web ([#485](#485)) ([4d261db](4d261db)) * Collapsible items shift when size changes ([#451](#451)) ([e816b6a](e816b6a)) * Incorrect drag start position, no item size animation when teleported ([#456](#456)) ([1730fb8](1730fb8)) * Invalid builder bob config ([#475](#475)) ([11cf84a](11cf84a)) * Invalid grid layout on mount ([#461](#461)) ([a47ed72](a47ed72)) * onActiveItemDropped not being fired when item is touched quickly ([#449](#449)) ([f66d980](f66d980)) * Pre-release fixes and improvements ([#476](#476)) ([736fb7b](736fb7b)) * Prevent auto scroll from over scrolling content container ([#484](#484)) ([db586d7](db586d7)), closes [#473](#473) ### Features * Add custom shadow example to docs, clean up decoration style ([#466](#466)) ([1169928](1169928)) * Add example app build check CIs ([#480](#480)) ([5ad420c](5ad420c)) * Add style property to the handle component ([#477](#477)) ([28c9099](28c9099)) * Better collapsible auto-scroll behavior ([#457](#457)) ([2d24b14](2d24b14)), closes [#444](#444) * Collapsible items support ([#444](#444)) ([66c03b6](66c03b6)) * Data provider ([#472](#472)) ([5dc34b6](5dc34b6)) * Improved teleported items behavior ([#452](#452)) ([72dadef](72dadef)) * Make layout update in sync with positions change on grid columns change ([#441](#441)) ([ef37d8c](ef37d8c)) * New auto scroll implementation ([#454](#454)) ([c4facec](c4facec)), closes [#285](#285) [#453](#453) [#285](#285) ### Performance Improvements * Optimize rerenders caused by inlined callbacks, clean up drag state management ([#474](#474)) ([f5e3c89](f5e3c89)) * Reduce the number of layout calculations ([#442](#442)) ([f9c9875](f9c9875))
|
🎉 This issue has been resolved in version 1.9.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is a huge improvement over the initial collapsible items implementation introduced in the #444 PR. It re-implements the core logic so that updates are performed synchronously with layout changes, thanks to which there are far less glitches and unexpected actions.
It also implements a smart way of scroll offset restoration after items expand to their normal positions.
Changes showcase
Untitled.mp4
TODO