Implement onScrollBeginDrag property for ScrollView for fabric (#14446)

anupriya13 · web-flow · commit f176a4dff6c2 · 2025-04-01T01:01:35.000+05:30
diff --git a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement OnScrollBeginDrag Event",
+  "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
@@ -245,7 +245,13 @@ export default class Bootstrap extends React.Component<{}, any> {
             snapToStart={this.state.snapToStartValue}
             snapToEnd={this.state.snapToEndValue}
             snapToAlignment={this.state.alignToStartValue ? 'start' : 'end'}
-            horizontal={this.state.horizontalValue}>
+            horizontal={this.state.horizontalValue}
+            onScrollBeginDrag={() => {
+              console.log('onScrollBeginDrag');
+            }}
+            onScroll={() => {
+              console.log('onScroll');
+            }}>
             {this.makeItems(20, [styles.itemWrapper])}
           </ScrollView>
         </View>
diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl
@@ -109,6 +109,7 @@ namespace Microsoft.ReactNative.Composition.Experimental
     void Brush(IBrush brush);
     void ScrollEnabled(Boolean isScrollEnabled);
     event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;
+    event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollBeginDrag;
     void ContentSize(Windows.Foundation.Numerics.Vector2 size);
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
@@ -708,6 +708,8 @@ struct CompScrollerVisual : winrt::implements<
         typename TTypeRedirects::InteractionTrackerInertiaStateEnteredArgs args) noexcept {
       m_outer->m_custom = false;
       m_outer->m_inertia = true;
+      m_outer->m_currentPosition = args.NaturalRestingPosition();
+      m_outer->FireScrollBeginDrag({args.NaturalRestingPosition().x, args.NaturalRestingPosition().y});
     }
     void InteractingStateEntered(
         typename TTypeRedirects::InteractionTracker sender,
@@ -918,10 +920,21 @@ struct CompScrollerVisual : winrt::implements<
     return m_scrollPositionChangedEvent.add(handler);
   }
 
+  winrt::event_token ScrollBeginDrag(
+      winrt::Windows::Foundation::EventHandler<
+          winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs> const
+          &handler) noexcept {
+    return m_scrollBeginDragEvent.add(handler);
+  }
+
   void ScrollPositionChanged(winrt::event_token const &token) noexcept {
     m_scrollPositionChangedEvent.remove(token);
   }
 
+  void ScrollBeginDrag(winrt::event_token const &token) noexcept {
+    m_scrollBeginDragEvent.remove(token);
+  }
+
   void ContentSize(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
     m_contentSize = size;
     m_contentVisual.Size(size);
@@ -992,6 +1005,10 @@ struct CompScrollerVisual : winrt::implements<
     m_scrollPositionChangedEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));
   }
 
+  void FireScrollBeginDrag(winrt::Windows::Foundation::Numerics::float2 position) noexcept {
+    m_scrollBeginDragEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));
+  }
+
   void UpdateMaxPosition() noexcept {
     m_interactionTracker.MaxPosition(
         {std::max<float>(m_contentSize.x - m_visualSize.x, 0),
@@ -1010,6 +1027,9 @@ struct CompScrollerVisual : winrt::implements<
   winrt::event<winrt::Windows::Foundation::EventHandler<
       winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs>>
       m_scrollPositionChangedEvent;
+  winrt::event<winrt::Windows::Foundation::EventHandler<
+      winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs>>
+      m_scrollBeginDragEvent;
   typename TTypeRedirects::SpriteVisual m_visual{nullptr};
   typename TTypeRedirects::SpriteVisual m_contentVisual{nullptr};
   typename TTypeRedirects::InteractionTracker m_interactionTracker{nullptr};
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
@@ -1217,6 +1217,28 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
               ->onScroll(scrollMetrics);
         }
       });
+
+  m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag(
+      winrt::auto_revoke,
+      [this](
+          winrt::IInspectable const & /*sender*/,
+          winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
+        updateStateWithContentOffset();
+        auto eventEmitter = GetEventEmitter();
+        if (eventEmitter) {
+          facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics;
+          scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height;
+          scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width;
+          scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor;
+          scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor;
+          scrollMetrics.zoomScale = 1.0;
+          scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height);
+          scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width);
+          std::static_pointer_cast<facebook::react::ScrollViewEventEmitter const>(eventEmitter)
+              ->onScrollBeginDrag(scrollMetrics);
+        }
+      });
+
   return visual;
 }
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h
@@ -135,6 +135,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   std::shared_ptr<ScrollBarComponent> m_verticalScrollbarComponent{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker
       m_scrollPositionChangedRevoker{};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollBeginDrag_revoker
+      m_scrollBeginDragRevoker{};
 
   float m_zoomFactor{1.0f};
   bool m_isScrollingFromInertia = false;
