[Fabric] Implement decelerationRate in ScrollView (#14528)

anupriya13 · web-flow · commit e3da8102466c · 2025-04-14T23:24:06.000+05:30
diff --git a/change/react-native-windows-53cc2215-aea1-4487-be63-34056926b427.json b/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"
+}
diff --git a/packages/playground/Samples/scrollViewSnapSample.tsx b/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>
diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/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;
   }
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/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);
   }
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/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
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/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;

Original file line number	Diff line number	Diff line change
`@@ -115,6 +115,7 @@ namespace Microsoft.ReactNative.Composition.Experimental`
`115`	`115`	`void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);`
`116`	`116`	`void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);`
`117`	`117`	`void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);`
	`118`	`+ void SetDecelerationRate(Windows.Foundation.Numerics.Vector3 decelerationRate);`
`118`	`119`	`Boolean Horizontal;`
`119`	`120`	`}`
`120`	`121`
Original file line number	Diff line number	Diff line change
`@@ -836,6 +836,10 @@ struct CompScrollerVisual : winrt::implements<`
`836`	`836`	`UpdateInteractionModes();`
`837`	`837`	`}`
`838`	`838`
	`839`	`+ void SetDecelerationRate(winrt::Windows::Foundation::Numerics::float3 const &decelerationRate) noexcept {`
	`840`	`+ m_interactionTracker.PositionInertiaDecayRate(decelerationRate);`
	`841`	`+ }`
	`842`	`+`
`839`	`843`	`void Opacity(float opacity) noexcept {`
`840`	`844`	`m_visual.Opacity(opacity);`
`841`	`845`	`}`
Original file line number	Diff line number	Diff line change
`@@ -753,6 +753,10 @@ void ScrollViewComponentView::updateProps(`
`753`	`753`	`if (!oldProps \|\| oldViewProps.horizontal != newViewProps.horizontal) {`
`754`	`754`	`m_scrollVisual.Horizontal(newViewProps.horizontal);`
`755`	`755`	`}`
	`756`	`+`
	`757`	`+ if (!oldProps \|\| oldViewProps.decelerationRate != newViewProps.decelerationRate) {`
	`758`	`+ updateDecelerationRate(newViewProps.decelerationRate);`
	`759`	`+ }`
`756`	`760`	`}`
`757`	`761`
`758`	`762`	`void ScrollViewComponentView::updateState(`
`@@ -1316,4 +1320,7 @@ double ScrollViewComponentView::getHorizontalSize() noexcept {`
`1316`	`1320`	`return std::min((m_layoutMetrics.frame.size.width / m_contentSize.width * 100.0), 100.0);`
`1317`	`1321`	`}`
`1318`	`1322`
	`1323`	`+void ScrollViewComponentView::updateDecelerationRate(float value) noexcept {`
	`1324`	`+ m_scrollVisual.SetDecelerationRate({value, value, value});`
	`1325`	`+}`
`1319`	`1326`	`} // namespace winrt::Microsoft::ReactNative::Composition::implementation`