fix(hooks): eliminate scroll jitter when prepending items at bottom#2095
fix(hooks): eliminate scroll jitter when prepending items at bottom#2095naqvitalha merged 2 commits intoShopify:mainfrom
Conversation
bdd02c9 to
8742f22
Compare
|
Thanks for the PR! There's actually an existing signal that might fit this use case perfectly: So instead of the new ref, this should work as a one-line change in scrollViewRef.current?.scrollToEnd({
animated: shouldAnimate && !recyclerViewManager.ignoreScrollEvents,
});This way animation is only skipped when an offset correction is in progress, and normal appends still animate smoothly. Could you try this out and see if it fixes the jitter in your repro? |
|
Also please sign the CLA |
8742f22 to
c2bf4e3
Compare
c2bf4e3 to
1139133
Compare
|
Thanks. This fix also works. i've updated this branch. |
naqvitalha
left a comment
There was a problem hiding this comment.
Looks good. If you can sign the CLA we can merge it.
|
Just signed the CLA. Thx! |
Description
Fixes #2094
This pull request addresses the jittery scroll animation on iOS when items are prepended to the top of the list while the list is positioned at the bottom.
The Problem
When items are added to the top, the LayoutManager immediately calculates a new scroll offset to "lock" the current visible messages in place so they don't jump.
Simultaneously, because animateAutoScrollToBottom is enabled and the list is at the bottom, the component triggers a
scrollToEnd({ animated: true }).The Fix
I have modified
useBoundDetectionto detect when the list is already anchored at the bottom (viaisNearBottom.current).animated: false) to avoid clashing with the coordinate recomputation.Reviewers’ hat-rack 🎩
isNearBottom.currentreliability: Verify this ref accurately tracks the bottom state during rapid data updates.maintainVisibleContentPosition.Screenshots or videos (if needed)
Reproduction Video (from #2094):
https://github.com/user-attachments/assets/11cc145c-f65b-4e34-8585-961a455a27bc
Fixed Behavior:
The list now remain stable when items are added to the top, and smoothly scrolls only when new items are added to the bottom.