Implement OnScrollEndDrag Event Handler for ScrollView

change/react-native-windows-7d6db328-7d87-4e76-816f-227c34851e98.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement onScrollEndDrag prop",
+  "packageName": "react-native-windows",
+  "email": "10109130+sharath2727@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/scrollViewSnapSample.tsx

@@ -301,6 +301,9 @@ export default class Bootstrap extends React.Component<{}, any> {
             onScrollBeginDrag={() => {
               console.log('onScrollBeginDrag');
             }}
+            onScrollEndDrag={() => {
+              console.log('onScrollEndDrag');
+            }}
             onScroll={() => {
               console.log('onScroll');
             }}

vnext/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -110,6 +110,7 @@ namespace Microsoft.ReactNative.Composition.Experimental
     void ScrollEnabled(Boolean isScrollEnabled);
     event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollPositionChanged;
     event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollBeginDrag;
+	  event Windows.Foundation.EventHandler<IScrollPositionChangedArgs> ScrollEndDrag;
     void ContentSize(Windows.Foundation.Numerics.Vector2 size);
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);

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

@@ -709,11 +709,18 @@ struct CompScrollerVisual : winrt::implements<
       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});
+      // When the user stops interacting with the object, tracker can go into two paths:
+      // 1. tracker goes into idle state immediately
+      // 2. tracker has just started gliding into Inertia state
+      // Fire ScrollEndDrag
+      m_outer->FireScrollEndDrag({args.NaturalRestingPosition().x, args.NaturalRestingPosition().y});
     }
     void InteractingStateEntered(
         typename TTypeRedirects::InteractionTracker sender,
-        typename TTypeRedirects::InteractionTrackerInteractingStateEnteredArgs args) noexcept {}
+        typename TTypeRedirects::InteractionTrackerInteractingStateEnteredArgs args) noexcept {
+      // Fire when the user starts dragging the object
+      m_outer->FireScrollBeginDrag({sender.Position().x, sender.Position().y});
+    }
     void RequestIgnored(
         typename TTypeRedirects::InteractionTracker sender,
         typename TTypeRedirects::InteractionTrackerRequestIgnoredArgs args) noexcept {}
@@ -939,6 +946,13 @@ struct CompScrollerVisual : winrt::implements<
     return m_scrollBeginDragEvent.add(handler);
   }
 
+  winrt::event_token ScrollEndDrag(
+      winrt::Windows::Foundation::EventHandler<
+          winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs> const
+          &handler) noexcept {
+    return m_scrollEndDragEvent.add(handler);
+  }
+
   void ScrollPositionChanged(winrt::event_token const &token) noexcept {
     m_scrollPositionChangedEvent.remove(token);
   }
@@ -947,6 +961,10 @@ struct CompScrollerVisual : winrt::implements<
     m_scrollBeginDragEvent.remove(token);
   }
 
+  void ScrollEndDrag(winrt::event_token const &token) noexcept {
+    m_scrollEndDragEvent.remove(token);
+  }
+
   void ContentSize(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
     m_contentSize = size;
     m_contentVisual.Size(size);
@@ -1021,6 +1039,10 @@ struct CompScrollerVisual : winrt::implements<
     m_scrollBeginDragEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));
   }
 
+  void FireScrollEndDrag(winrt::Windows::Foundation::Numerics::float2 position) noexcept {
+    m_scrollEndDragEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));
+  }
+
   void UpdateMaxPosition() noexcept {
     m_interactionTracker.MaxPosition(
         {std::max<float>(m_contentSize.x - m_visualSize.x, 0),
@@ -1042,6 +1064,9 @@ struct CompScrollerVisual : winrt::implements<
   winrt::event<winrt::Windows::Foundation::EventHandler<
       winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs>>
       m_scrollBeginDragEvent;
+  winrt::event<winrt::Windows::Foundation::EventHandler<
+      winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs>>
+      m_scrollEndDragEvent;
   typename TTypeRedirects::SpriteVisual m_visual{nullptr};
   typename TTypeRedirects::SpriteVisual m_contentVisual{nullptr};
   typename TTypeRedirects::InteractionTracker m_interactionTracker{nullptr};

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

@@ -1243,6 +1243,23 @@ void ScrollViewComponentView::StartBringIntoView(
   }
 }
 
+facebook::react::ScrollViewEventEmitter::Metrics ScrollViewComponentView::getScrollMetrics(
+    facebook::react::SharedViewEventEmitter const &eventEmitter,
+    winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) noexcept {
+  facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics{};
+  if (eventEmitter) {
+    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);
+  }
+
+  return scrollMetrics;
+}
+
 winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComponentView::createVisual() noexcept {
   auto visual = m_compContext.CreateSpriteVisual();
   m_scrollVisual = m_compContext.CreateScrollerVisual();
@@ -1264,14 +1281,7 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
           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);
+            auto scrollMetrics = getScrollMetrics(eventEmitter, args);
             std::static_pointer_cast<facebook::react::ScrollViewEventEmitter const>(eventEmitter)
                 ->onScroll(scrollMetrics);
             m_lastScrollEventTime = now;
@@ -1289,19 +1299,26 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
         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);
+          auto scrollMetrics = getScrollMetrics(eventEmitter, args);
           std::static_pointer_cast<facebook::react::ScrollViewEventEmitter const>(eventEmitter)
               ->onScrollBeginDrag(scrollMetrics);
         }
       });
 
+  m_scrollEndDragRevoker = m_scrollVisual.ScrollEndDrag(
+      winrt::auto_revoke,
+      [this](
+          winrt::IInspectable const & /*sender*/,
+          winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
+        updateStateWithContentOffset();
+        auto eventEmitter = GetEventEmitter();
+        if (eventEmitter) {
+          auto scrollMetrics = getScrollMetrics(eventEmitter, args);
+          std::static_pointer_cast<facebook::react::ScrollViewEventEmitter const>(eventEmitter)
+              ->onScrollEndDrag(scrollMetrics);
+        }
+      });
+
   return visual;
 }
 

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

@@ -129,6 +129,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool scrollRight(float delta, bool animate) noexcept;
   void updateBackgroundColor(const facebook::react::SharedColor &color) noexcept;
   void updateStateWithContentOffset() noexcept;
+  facebook::react::ScrollViewEventEmitter::Metrics getScrollMetrics(
+      facebook::react::SharedViewEventEmitter const &eventEmitter,
+      winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) noexcept;
   void updateShowsHorizontalScrollIndicator(bool value) noexcept;
   void updateShowsVerticalScrollIndicator(bool value) noexcept;
 
@@ -141,6 +144,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollBeginDrag_revoker
       m_scrollBeginDragRevoker{};
 
+  winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollEndDrag_revoker
+      m_scrollEndDragRevoker{};
+
   float m_zoomFactor{1.0f};
   bool m_isScrollingFromInertia = false;
   bool m_isScrolling = false;