-
Notifications
You must be signed in to change notification settings - Fork 25.2k
Fix maintainVisibleContentPosition calculations and add tests + docs [fixes #25239] #57294
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
aarononeal
wants to merge
5
commits into
react:main
Choose a base branch
from
aarononeal:fix/mvcp-corrections-and-tests
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+6,643
−60
Open
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
7b318f4
test(rn-tester): add maestro tests and refactor maintainVisibleConten…
aarononeal 6de675c
fix(virtualized-lists): clear cell metrics on orientation change and …
aarononeal 2e9173f
fix(ios): MVCP correction fails when anchor view is deleted or recycled
aarononeal e18f70a
fix(android): MVCP scroll position not updating due to event throttle
aarononeal 6a9032b
docs(virtualized-lists): document MVCP architecture, history, and tes…
aarononeal File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
2,066 changes: 2,066 additions & 0 deletions
2,066
...raries/Components/ScrollView/__tests__/ScrollView-maintainVisibleContentPosition-itest.js
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -68,7 +68,17 @@ public object ReactScrollViewHelper { | |
| @JvmStatic | ||
| public fun <T> emitScrollEvent(scrollView: T, xVelocity: Float, yVelocity: Float) | ||
| where T : HasScrollEventThrottle?, T : ViewGroup { | ||
| emitScrollEvent(scrollView, ScrollEventType.SCROLL, xVelocity, yVelocity) | ||
| emitScrollEvent(scrollView, ScrollEventType.SCROLL, xVelocity, yVelocity, false) | ||
| } | ||
|
|
||
| /** | ||
| * Emits a scroll event without throttling. Used by MVCP to ensure scroll position updates reach | ||
| * JS immediately when the scroll position is adjusted programmatically. | ||
| */ | ||
| @JvmStatic | ||
| public fun <T> emitScrollEventNoThrottle(scrollView: T, xVelocity: Float, yVelocity: Float) | ||
| where T : HasScrollEventThrottle?, T : ViewGroup { | ||
| emitScrollEvent(scrollView, ScrollEventType.SCROLL, xVelocity, yVelocity, true) | ||
| } | ||
|
|
||
| @JvmStatic | ||
|
|
@@ -102,20 +112,22 @@ public object ReactScrollViewHelper { | |
|
|
||
| private fun <T> emitScrollEvent(scrollView: T, scrollEventType: ScrollEventType) | ||
| where T : HasScrollEventThrottle?, T : ViewGroup { | ||
| emitScrollEvent(scrollView, scrollEventType, 0f, 0f) | ||
| emitScrollEvent(scrollView, scrollEventType, 0f, 0f, false) | ||
| } | ||
|
|
||
| private fun <T> emitScrollEvent( | ||
| scrollView: T, | ||
| scrollEventType: ScrollEventType, | ||
| xVelocity: Float, | ||
| yVelocity: Float, | ||
| skipThrottle: Boolean = false, | ||
| ) where T : HasScrollEventThrottle?, T : ViewGroup { | ||
| val now = System.currentTimeMillis() | ||
| // Throttle the scroll event if scrollEventThrottle is set to be equal or more than 17 ms. | ||
| // We limit the delta to 17ms so that small throttles intended to enable 60fps updates will not | ||
| // inadvertently filter out any scroll events. | ||
| if ( | ||
| !skipThrottle && | ||
| scrollEventType == ScrollEventType.SCROLL && | ||
| scrollView.scrollEventThrottle >= max(17, now - scrollView.lastScrollDispatchTime) | ||
| ) { | ||
|
|
@@ -274,9 +286,9 @@ public object ReactScrollViewHelper { | |
| * by calculate the "would be" initial velocity with internal friction to move to the point (x, | ||
| * y), then apply that to the animator. | ||
| */ | ||
| @JvmStatic | ||
| public fun <T> smoothScrollTo(scrollView: T, x: Int, y: Int) | ||
| where T : HasFlingAnimator?, T : HasScrollState?, T : HasStateWrapper?, T : ViewGroup { | ||
| @JvmStatic | ||
| public fun <T> smoothScrollTo(scrollView: T, x: Int, y: Int) | ||
| where T : HasFlingAnimator?, T : HasScrollEventThrottle?, T : HasScrollState?, T : HasStateWrapper?, T : ViewGroup { | ||
| if (DEBUG_MODE) { | ||
| FLog.i(TAG, "smoothScrollTo[%d] x %d y %d", scrollView.id, x, y) | ||
| } | ||
|
|
@@ -444,7 +456,7 @@ public object ReactScrollViewHelper { | |
| } | ||
|
|
||
| public fun <T> registerFlingAnimator(scrollView: T) | ||
| where T : HasFlingAnimator?, T : HasScrollState?, T : HasStateWrapper?, T : ViewGroup { | ||
| where T : HasFlingAnimator?, T : HasScrollState?, T : HasStateWrapper?, T : HasScrollEventThrottle?, T : ViewGroup { | ||
| scrollView | ||
| .getFlingAnimator() | ||
| .addListener( | ||
|
|
@@ -459,6 +471,8 @@ public object ReactScrollViewHelper { | |
| scrollView.reactScrollViewScrollState.isFinished = true | ||
| notifyUserDrivenScrollEnded(scrollView) | ||
| updateFabricScrollState(scrollView) | ||
| // Dispatch an unthrottled scroll event to ensure JS state is updated after animation | ||
| emitScrollEventNoThrottle(scrollView, 0f, 0f) | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Cancellations should get the same treatment |
||
| } | ||
|
|
||
| override fun onAnimationCancel(animator: Animator) { | ||
|
|
||
65 changes: 65 additions & 0 deletions
65
packages/rn-tester/.maestro/flatlist-append-maintainvisible.yml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| # Test FlatList maintainVisibleContentPosition with append (baseline) | ||
| # Appending items should NOT affect scroll offset (delta ~0) | ||
| appId: ${APP_ID} | ||
| --- | ||
| - launchApp | ||
| # Change to portrait | ||
| - setOrientation: portrait | ||
| - waitForAnimationToEnd: | ||
| timeout: 3000 | ||
| # Find test | ||
| - assertVisible: "Components" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "FlatList" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "FlatList" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "maintainVisibleContentPosition" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "maintainVisibleContentPosition" | ||
| # Scroll to offset 500 | ||
| - tapOn: | ||
| text: "ScrollToOffset 500" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Append item (should NOT affect scroll offset) | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetBefore = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| - tapOn: | ||
| text: "Add 1 item at bottom" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetAfter = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| - assertTrue: ${output.offsetAfter - output.offsetBefore >= -5 && output.offsetAfter - output.offsetBefore <= 5} | ||
| # Multiple appends | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetBefore = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| - tapOn: | ||
| text: "Add 1 item at bottom" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetAfter = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| - assertTrue: ${output.offsetAfter - output.offsetBefore >= -5 && output.offsetAfter - output.offsetBefore <= 5} | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetBefore = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| - tapOn: | ||
| text: "Reset" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetAfter = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| - assertTrue: ${output.offsetAfter >= 0 && output.offsetAfter <= 50} |
49 changes: 49 additions & 0 deletions
49
packages/rn-tester/.maestro/flatlist-complex-mutations-maintainvisible.yml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # Test FlatList maintainVisibleContentPosition — complex concurrent mutations | ||
| # Tests prepend + append + delete in sequence | ||
| appId: ${APP_ID} | ||
| --- | ||
| - launchApp | ||
| - setOrientation: portrait | ||
| - waitForAnimationToEnd: | ||
| timeout: 3000 | ||
| - assertVisible: "Components" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "FlatList" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "FlatList" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "maintainVisibleContentPosition" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "maintainVisibleContentPosition" | ||
| # Scroll to offset 200 | ||
| - tapOn: | ||
| text: "ScrollToOffset 100" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Record offset before mutations | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetBefore = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| # Add items at top and bottom (simulates complex mutations) | ||
| - tapOn: | ||
| text: "Add 1 item at top" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| - tapOn: | ||
| text: "Add 1 item at bottom" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Record offset after mutations | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetAfter = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| # Delta should be ~44px (only top prepend affects anchor) | ||
| - assertTrue: ${output.offsetAfter - output.offsetBefore >= 42 && output.offsetAfter - output.offsetBefore <= 46} | ||
| - tapOn: | ||
| text: "Reset" |
44 changes: 44 additions & 0 deletions
44
packages/rn-tester/.maestro/flatlist-delete-anchor-maintainvisible.yml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| # Test FlatList maintainVisibleContentPosition — delete anchor item | ||
| # When the anchor item (first visible) is deleted, MVCP should select a new anchor | ||
| appId: ${APP_ID} | ||
| --- | ||
| - launchApp | ||
| - setOrientation: portrait | ||
| - waitForAnimationToEnd: | ||
| timeout: 3000 | ||
| - assertVisible: "Components" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "FlatList" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "FlatList" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "maintainVisibleContentPosition" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "maintainVisibleContentPosition" | ||
| # Scroll to offset 200 (item 5 should be visible) | ||
| - tapOn: | ||
| text: "ScrollToOffset 100" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Record offset before delete | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetBefore = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| # Clear the list (simulates delete of all items including anchor) | ||
| - tapOn: | ||
| text: "Clear (empty list)" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Reset to restore items | ||
| - tapOn: | ||
| text: "Reset" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Verify list is restored | ||
| - assertVisible: "0" |
45 changes: 45 additions & 0 deletions
45
packages/rn-tester/.maestro/flatlist-delete-middle-maintainvisible.yml
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| # Test FlatList maintainVisibleContentPosition — delete from middle | ||
| # When items are deleted from the middle, MVCP should adjust scroll offset | ||
| appId: ${APP_ID} | ||
| --- | ||
| - launchApp | ||
| - setOrientation: portrait | ||
| - waitForAnimationToEnd: | ||
| timeout: 3000 | ||
| - assertVisible: "Components" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "FlatList" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "FlatList" | ||
| - scrollUntilVisible: | ||
| element: | ||
| id: "maintainVisibleContentPosition" | ||
| direction: DOWN | ||
| speed: 40 | ||
| - tapOn: | ||
| id: "maintainVisibleContentPosition" | ||
| # Scroll to offset 400 (item 10 should be visible) | ||
| - tapOn: | ||
| text: "ScrollToOffset 500" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Record offset before delete | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetBefore = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| # Add items at top (shifts middle items up) | ||
| - tapOn: | ||
| text: "Add 3 items at top" | ||
| - waitForAnimationToEnd: | ||
| timeout: 2000 | ||
| # Record offset after prepend | ||
| - copyTextFrom: | ||
| id: "scroll-offset-display" | ||
| - evalScript: ${output.offsetAfter = parseInt(maestro.copiedText.split(":")[1].trim())} | ||
| # Delta should be ~132px (3 items × 44px) | ||
| - assertTrue: ${output.offsetAfter - output.offsetBefore >= 128 && output.offsetAfter - output.offsetBefore <= 136} | ||
| - tapOn: | ||
| text: "Reset" |
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cc @sammy-SC is this check safe to remove?