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": "[email protected]",
+  "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 {}
@@ -931,6 +938,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);
   }
@@ -939,6 +953,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);
@@ -1013,6 +1031,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),
@@ -1034,6 +1056,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

@@ -1205,6 +1205,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();
@@ -1220,18 +1237,8 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
           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)
-              ->onScroll(scrollMetrics);
-        }
+        auto scrollMetrics = getScrollMetrics(eventEmitter, args);
+        std::static_pointer_cast<facebook::react::ScrollViewEventEmitter const>(eventEmitter)->onScroll(scrollMetrics);
       });
 
   m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag(
@@ -1241,18 +1248,21 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
           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);
-        }
+        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();
+        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;