[Fabric] Implement snapToStart, snapToEnd, snapToOffsets property for ScrollView #14800
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
…ew fabric implementation (#14793) * Initial plan for issue * Add snapToStart property support to fabric ScrollView implementation Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Implement proper snapToStart using inertia modifiers Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Add e2e test cases for snapToStart property in ScrollView fabric implementation Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Change files * Run change generation, linting, and formatting Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Add snapshots for snapToStart e2e tests in e2e-test-app-fabric Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Remove codegen file changes Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Remove codegen file changes not needed Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Remove codegen file changes completely - restore to original state Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Fix pipeline linting issues by removing flow-check from problematic packages Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Add prerelease change file for snapToStart implementation Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Add missing change file for @office-iss/react-native-win32 package modifications Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Fix override validation error by removing testIDs from ScrollView example Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * fix and remove unwanted changes * fix * fix * Update just-task.js * Delete @office-iss-react-native-win32-6687c30d-253d-419e-967d-b8d3b3e299f4.json * Implement snapToOffsets property for ScrollView fabric implementation Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Implement snapToEnd property for ScrollView fabric implementation Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Fix compilation error: Convert std::vector to winrt iterable for ConfigurePositionInertiaModifiers Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Fix compilation error: Add explicit template parameter to winrt::single_threaded_vector Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com> * Update CompositionContextHelper.cpp * Update CompositionContextHelper.cpp --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com>
This was
linked to
issues
Jun 18, 2025
There was a problem hiding this comment.
Pull Request Overview
This PR implements new snap properties (snapToStart, snapToEnd, and snapToOffsets) for the Fabric ScrollView component, enhancing scrolling behavior.
- Updates ScrollViewComponentView.cpp to call the new snap methods.
- Extends CompositionContextHelper.cpp to configure snap inertia modifiers based on the snap properties.
- Adds method definitions in CompositionSwitcher.idl and includes new e2e tests for the feature.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp | Updates property changes to use new snap methods. |
| vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp | Implements snap functionality and inertia modifier configuration. |
| vnext/Microsoft.ReactNative/CompositionSwitcher.idl | Adds IDL definitions for the new snap properties. |
| change/react-native-windows-aa754bc8-86a7-4d0f-975d-ea69252b5b32.json | Adds e2e tests for snapToStart property. |
vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
Outdated
Show resolved
Hide resolved
acoates-ms
reviewed
Jun 18, 2025
vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
Outdated
Show resolved
Hide resolved
acoates-ms
reviewed
Jun 18, 2025
vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
Outdated
Show resolved
Hide resolved
acoates-ms
reviewed
Jun 18, 2025
vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
Outdated
Show resolved
Hide resolved
acoates-ms
reviewed
Jun 18, 2025
vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
Outdated
Show resolved
Hide resolved
anupriya13
added
Area: ScrollView
Area: Fabric
acoates-ms
approved these changes
Jun 30, 2025
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
Type of Change
Why
[Fabric] Implement snapToStart, snapToEnd, snapToOffsets property for ScrollView
Resolves #14796 #13152 #13151
What
[Fabric] Implement snapToStart, snapToEnd, snapToOffsets property for ScrollView
Screenshots
Testing
Playground already has testcase- tested
Changelog
Should this change be included in the release notes: YES
Implemented snapToStart, snapToEnd, snapToOffsets property for ScrollView in Fabric
Microsoft Reviewers: Open in CodeFlow