[Fabric] Implement snapToInterval property for ScrollView

[anupriya13]

Description

Type of Change

• New feature (non-breaking change which adds functionality)

Why

Implement snapToInterval property for ScrollView in Fabric

Resolves #13150

What

https://reactnative.dev/docs/scrollview#snaptointerval

The snapToInterval property was available in the Paper implementation via ScrollViewManager.cpp but was missing from the Fabric implementation in ScrollViewComponentView.cpp. This meant that developers using the new architecture couldn't use interval-based snapping behavior.

Refer IOS https://github.com/facebook/react-native/blob/618279508159191f2b11c0b20446f91e82a27abf/packages/react-native/React/Views/ScrollView/RCTScrollView.m#L810C5-L813C8

Solution

Added comprehensive support for snapToInterval that:

1. Detects property changes: Modified updateProps() to check for snapToInterval changes alongside existing snap properties
2. Generates snap points: Created updateSnapPoints() helper method that converts interval values to discrete snap point offsets
3. Handles content changes: Modified updateContentVisualSize() to recalculate snap points when content size changes
4. Respects priority: Follows React Native behavior where snapToOffsets takes priority over snapToInterval

Implementation Details

updateSnapPoints() function sets up where the scroll view should snap when scrolling stops. It first checks if explicit snap positions (snapToOffsets) are provided and uses them. If not, and a snap interval is set (snapToInterval), it generates evenly spaced snap points across the content size. Finally, it updates the scroll visual to use these snap points.

// Property priority (matches React Native behavior)
if (viewProps.snapToOffsets.size() > 0) {
  // Use explicit snapToOffsets
} else if (viewProps.snapToInterval > 0) {
  // Generate snap points at regular intervals
  float interval = viewProps.snapToInterval * pointScaleFactor;
  for (float offset = 0; offset <= contentLength; offset += interval) {
    snapToOffsets.Append(offset);
  }
}

Step by Step:

✅ 1. Get the snap configuration from props

snapToOffsets: a list of exact positions to snap to

snapToInterval: a distance between each snap point

horizontal: whether the scroll is sideways

✅ 2. Decide which to use:

If snapToOffsets is provided and has items, it takes priority.

If not, but snapToInterval > 0, it generates snap points by repeating the interval.

✅ 3. Calculate how big the scrollable content is:

If horizontal, use the content width.

If vertical, use the content height.

Multiply by pointScaleFactor (to handle screen scaling).

✅ 4. Create snap points every interval distance:

For example, every 100 pixels, 200 pixels, etc.

Stop when you reach the end of content or hit a safety limit (max 1000 snap points).

✅ 5. Save the snap points in m_scrollVisual:

These will be used when scrolling stops to snap to the nearest position.

Testing

Playground tested

Changelog

Should this change be included in the release notes: yes

Add a brief summary of the change to use in the release notes for the next release.
Implement snapToInterval property for ScrollView in Fabric

Microsoft Reviewers: Open in CodeFlow

[anupriya13]

Waiting on review since long time > assigned to @sharath2727 for iteration 2507-02
Let's discuss any issues in PR here rather than offline so that it's documented

[sharath2727]

what is the scenario for this? In the sense when would this be called? is it during initialization?

[anupriya13]

It's whenever the content size is changed the offsets / intervals would be updated as per new dimensions

[sharath2727]

Ah I see. so basically if layout size changes during runtime and then this gets triggered. Got it. Thank you for helping me understand this code better. I hope all the tests are validated to the best of your knowledge.

[sharath2727]

Approved with one pending question.

[anupriya13]

Merging as discussed in the meeting