Implement snapToAlignment property for ScrollView in Fabric architecture

change/react-native-windows-ae44eda2-ce08-4405-916b-db6f08ee6786.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement snapToAlignment support for Fabric ScrollView - interface and prop handling",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js

@@ -651,10 +651,11 @@ const SnapToOptions = () => {
         snapToInterval={snapToInterval}
         snapToOffsets={snapToOffsets}
         snapToStart={snapToStart}
+        testID="snap_scrollview"
         nestedScrollEnabled>
         {ITEMS.map(createItemRow)}
       </ScrollView>
-      {Platform.OS === 'ios' ? (
+      {Platform.OS === 'ios' || Platform.OS === 'windows' ? (
         <>
           <RNTesterText style={styles.rowTitle}>
             Select Snap to Alignment Mode

packages/e2e-test-app-fabric/test/ScrollViewComponentTest.test.ts

@@ -86,4 +86,13 @@ describe('ScrollView Tests', () => {
     const dump = await dumpVisualTree('scroll_pressable_sticky_header');
     expect(dump).toMatchSnapshot();
   });*/
+  test('ScrollView snapToAlignment does not cause errors', async () => {
+    // This test ensures that the snapToAlignment prop is handled without crashing
+    // We test this by navigating to the snap options example and verifying it loads
+    await goToComponentExample('<ScrollView> SnapTo Options');
+    const component = await app.findElementByTestID('snap_scrollview');
+    await component.waitForDisplayed({timeout: 20000});
+    const dump = await dumpVisualTree('snap_scrollview');
+    expect(dump).toMatchSnapshot();
+  });
 });

vnext/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -120,7 +120,7 @@ namespace Microsoft.ReactNative.Composition.Experimental
     void SetMaximumZoomScale(Single maximumZoomScale);
     void SetMinimumZoomScale(Single minimumZoomScale);
     Boolean Horizontal;
-    void SetSnapPoints(Boolean snapToStart, Boolean snapToEnd, Windows.Foundation.Collections.IVectorView<Single> offsets);
+    void SetSnapPoints(Boolean snapToStart, Boolean snapToEnd, Windows.Foundation.Collections.IVectorView<Single> offsets, Windows.UI.Xaml.Controls.SnapPointsAlignment snapToAlignment);
   }
 
   [webhosthidden]

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp

@@ -871,9 +871,11 @@ struct CompScrollerVisual : winrt::implements<
   void SetSnapPoints(
       bool snapToStart,
       bool snapToEnd,
-      winrt::Windows::Foundation::Collections::IVectorView<float> const &offsets) noexcept {
+      winrt::Windows::Foundation::Collections::IVectorView<float> const &offsets,
+      winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment snapToAlignment) noexcept {
     m_snapToStart = snapToStart;
     m_snapToEnd = snapToEnd;
+    m_snapToAlignment = snapToAlignment;
     m_snapToOffsets.clear();
     if (offsets) {
       for (auto const &offset : offsets) {
@@ -1100,6 +1102,22 @@ struct CompScrollerVisual : winrt::implements<
     }
 
     snapPositions.insert(snapPositions.end(), m_snapToOffsets.begin(), m_snapToOffsets.end());
+
+    // Adjust snap positions based on alignment
+    const float viewportSize = m_horizontal ? visualSize.x : visualSize.y;
+    if (m_snapToAlignment == winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment::Center) {
+      // For center alignment, offset snap positions by half the viewport size
+      for (auto &position : snapPositions) {
+        position = std::max(0.0f, position - viewportSize / 2.0f);
+      }
+    } else if (m_snapToAlignment == winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment::Far) {
+      // For end alignment, offset snap positions by the full viewport size
+      for (auto &position : snapPositions) {
+        position = std::max(0.0f, position - viewportSize);
+      }
+    }
+    // For Near (start) alignment, no adjustment needed
+
     std::sort(snapPositions.begin(), snapPositions.end());
     snapPositions.erase(std::unique(snapPositions.begin(), snapPositions.end()), snapPositions.end());
 
@@ -1227,6 +1245,8 @@ struct CompScrollerVisual : winrt::implements<
   bool m_snapToStart{true};
   bool m_snapToEnd{true};
   std::vector<float> m_snapToOffsets;
+  winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment m_snapToAlignment{
+      winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment::Near};
   bool m_inertia{false};
   bool m_custom{false};
   winrt::Windows::Foundation::Numerics::float3 m_targetPosition;

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -807,12 +807,30 @@ void ScrollViewComponentView::updateProps(
   }
 
   if (oldViewProps.snapToStart != newViewProps.snapToStart || oldViewProps.snapToEnd != newViewProps.snapToEnd ||
-      oldViewProps.snapToOffsets != newViewProps.snapToOffsets) {
+      oldViewProps.snapToOffsets != newViewProps.snapToOffsets ||
+      oldViewProps.snapToAlignment != newViewProps.snapToAlignment) {
     const auto snapToOffsets = winrt::single_threaded_vector<float>();
     for (const auto &offset : newViewProps.snapToOffsets) {
       snapToOffsets.Append(static_cast<float>(offset));
     }
-    m_scrollVisual.SetSnapPoints(newViewProps.snapToStart, newViewProps.snapToEnd, snapToOffsets.GetView());
+
+    // Convert React Native snapToAlignment to Windows SnapPointsAlignment enum
+    winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment snapAlignment;
+    switch (newViewProps.snapToAlignment) {
+      case facebook::react::ScrollViewSnapToAlignment::Center:
+        snapAlignment = winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment::Center;
+        break;
+      case facebook::react::ScrollViewSnapToAlignment::End:
+        snapAlignment = winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment::Far;
+        break;
+      case facebook::react::ScrollViewSnapToAlignment::Start:
+      default:
+        snapAlignment = winrt::Windows::UI::Xaml::Controls::SnapPointsAlignment::Near;
+        break;
+    }
+
+    m_scrollVisual.SetSnapPoints(
+        newViewProps.snapToStart, newViewProps.snapToEnd, snapToOffsets.GetView(), snapAlignment);
   }
 }