[Fabric] Implement decelerationRate in ScrollView (#14528)

Author: anupriya13

change/react-native-windows-53cc2215-aea1-4487-be63-34056926b427.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement decelerationRate in ScrollView",
+  "packageName": "react-native-windows",
+  "email": "54227869+anupriya13@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/scrollViewSnapSample.tsx

@@ -251,7 +251,8 @@ export default class Bootstrap extends React.Component<{}, any> {
             }}
             onScroll={() => {
               console.log('onScroll');
-            }}>
+            }}
+            decelerationRate={0.95}>
             {this.makeItems(20, [styles.itemWrapper])}
           </ScrollView>
         </View>

vnext/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -115,6 +115,7 @@ namespace Microsoft.ReactNative.Composition.Experimental
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
     void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
     void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
+    void SetDecelerationRate(Windows.Foundation.Numerics.Vector3 decelerationRate);
     Boolean Horizontal;
   }
 

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

@@ -836,6 +836,10 @@ struct CompScrollerVisual : winrt::implements<
     UpdateInteractionModes();
   }
 
+  void SetDecelerationRate(winrt::Windows::Foundation::Numerics::float3 const &decelerationRate) noexcept {
+    m_interactionTracker.PositionInertiaDecayRate(decelerationRate);
+  }
+
   void Opacity(float opacity) noexcept {
     m_visual.Opacity(opacity);
   }

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

@@ -753,6 +753,10 @@ void ScrollViewComponentView::updateProps(
   if (!oldProps || oldViewProps.horizontal != newViewProps.horizontal) {
     m_scrollVisual.Horizontal(newViewProps.horizontal);
   }
+
+  if (!oldProps || oldViewProps.decelerationRate != newViewProps.decelerationRate) {
+    updateDecelerationRate(newViewProps.decelerationRate);
+  }
 }
 
 void ScrollViewComponentView::updateState(
@@ -1316,4 +1320,7 @@ double ScrollViewComponentView::getHorizontalSize() noexcept {
   return std::min((m_layoutMetrics.frame.size.width / m_contentSize.width * 100.0), 100.0);
 }
 
+void ScrollViewComponentView::updateDecelerationRate(float value) noexcept {
+  m_scrollVisual.SetDecelerationRate({value, value, value});
+}
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -119,6 +119,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   double getHorizontalSize() noexcept;
 
  private:
+  void updateDecelerationRate(float value) noexcept;
   void updateContentVisualSize() noexcept;
   bool scrollToEnd(bool animate) noexcept;
   bool scrollToStart(bool animate) noexcept;