react-native-windows 0.78.5 → 0.78.7

package/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp

@@ -43,6 +43,7 @@ constexpr float loadingActivitySize = 12.0f;
 constexpr float loadingActivityHorizontalOffset = 16.0f;
 constexpr float loadingBarHeight = 36.0f;
 constexpr float loadingBarFontSize = 20.0f;
+constexpr float loadingBarMinFontSize = 8.0f;
 constexpr float loadingTextHorizontalOffset = 48.0f;
 
 //! This class ensures that we access ReactRootView from UI thread.
@@ -195,6 +196,8 @@ void ReactNativeIsland::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewH
     return;
   }
 
+  m_props = nullptr;
+
   if (m_reactViewHost) {
     UninitRootView();
     m_reactViewHost.DetachViewInstance();
@@ -374,11 +377,12 @@ winrt::IInspectable ReactNativeIsland::GetUiaProvider() noexcept {
   if (m_uiaProvider == nullptr) {
     m_uiaProvider =
         winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider>(*this);
-    if (m_hwnd && !m_island) {
+    if (m_hwnd || m_island) {
       auto pRootProvider =
           static_cast<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider *>(
               m_uiaProvider.as<IRawElementProviderSimple>().get());
       if (pRootProvider != nullptr) {
+        pRootProvider->SetIsland(m_island);
         pRootProvider->SetHwnd(m_hwnd);
       }
     }
@@ -517,13 +521,6 @@ void ReactNativeIsland::UpdateRootViewInternal() noexcept {
   }
 }
 
-struct AutoMRE {
-  ~AutoMRE() {
-    mre.Set();
-  }
-  Mso::ManualResetEvent mre;
-};
-
 void ReactNativeIsland::UninitRootView() noexcept {
   if (!m_isInitialized) {
     return;
@@ -533,20 +530,9 @@ void ReactNativeIsland::UninitRootView() noexcept {
     if (m_context.Handle().LoadingState() == winrt::Microsoft::ReactNative::LoadingState::HasError)
       return;
 
-    auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-        winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
-    uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(RootTag()));
-
-    // This is needed to ensure that the unmount JS logic is completed before the the instance is shutdown during
-    // instance destruction. Aligns with similar code in ReactInstanceWin::DetachRootView for paper Future: Instead
-    // this method should return a Promise, which should be resolved when the JS logic is complete. The task will auto
-    // set the event on destruction to ensure that the event is set if the JS Queue has already been shutdown
-    Mso::ManualResetEvent mre;
-    m_context.JSDispatcher().Post([autoMRE = std::make_unique<AutoMRE>(AutoMRE{mre})]() {});
-    mre.Wait();
-
-    // Paper version gives the JS thread time to finish executing - Is this needed?
-    // m_jsMessageThread.Load()->runOnQueueSync([]() {});
+    if (auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
+            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties())))
+      uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(RootTag()));
   }
 
   m_rootTag = -1;
@@ -577,7 +563,9 @@ void ReactNativeIsland::ShowInstanceLoaded() noexcept {
         winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
 
     m_rootTag = ::Microsoft::ReactNative::getNextRootViewTag();
-    auto initProps = DynamicWriter::ToDynamic(Mso::Copy(m_reactViewOptions.InitialProps()));
+
+    auto initProps =
+        m_props.isNull() ? DynamicWriter::ToDynamic(Mso::Copy(m_reactViewOptions.InitialProps())) : m_props;
     if (initProps.isNull()) {
       initProps = folly::dynamic::object();
     }
@@ -606,6 +594,14 @@ facebook::react::AttributedStringBox CreateLoadingAttributedString() noexcept {
   return facebook::react::AttributedStringBox{attributedString};
 }
 
+facebook::react::ParagraphAttributes CreateLoadingParagraphAttributes() noexcept {
+  facebook::react::ParagraphAttributes pa;
+  pa.adjustsFontSizeToFit = true;
+  pa.minimumFontSize = loadingBarMinFontSize;
+  pa.maximumFontSize = loadingBarFontSize;
+  return pa;
+}
+
 facebook::react::Size ReactNativeIsland::MeasureLoading(
     const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraints) const noexcept {
   facebook::react::LayoutConstraints fbLayoutConstraints;
@@ -614,7 +610,7 @@ facebook::react::Size ReactNativeIsland::MeasureLoading(
   auto attributedStringBox = CreateLoadingAttributedString();
   winrt::com_ptr<::IDWriteTextLayout> textLayout;
   facebook::react::TextLayoutManager::GetTextLayout(
-      attributedStringBox, {} /*paragraphAttributes*/, fbLayoutConstraints, textLayout);
+      attributedStringBox, CreateLoadingParagraphAttributes(), fbLayoutConstraints, textLayout);
 
   DWRITE_TEXT_METRICS tm;
   winrt::check_hresult(textLayout->GetMetrics(&tm));
@@ -696,7 +692,7 @@ Composition::Experimental::IDrawingSurfaceBrush ReactNativeIsland::CreateLoading
 
       winrt::com_ptr<::IDWriteTextLayout> textLayout;
       facebook::react::TextLayoutManager::GetTextLayout(
-          attributedStringBox, {} /*paragraphAttributes*/, constraints, textLayout);
+          attributedStringBox, CreateLoadingParagraphAttributes(), constraints, textLayout);
 
       DWRITE_TEXT_METRICS tm;
       textLayout->GetMetrics(&tm);
@@ -778,7 +774,7 @@ winrt::Windows::Foundation::Size ReactNativeIsland::Measure(
   facebook::react::LayoutConstraints constraints;
   ApplyConstraints(layoutConstraints, constraints);
 
-  if (m_isInitialized && m_rootTag != -1) {
+  if (m_isInitialized && m_rootTag != -1 && m_hasRenderedVisual) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
             winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
@@ -809,7 +805,7 @@ void ReactNativeIsland::Arrange(
   facebook::react::LayoutConstraints fbLayoutConstraints;
   ApplyConstraints(layoutConstraints, fbLayoutConstraints);
 
-  if (m_isInitialized && m_rootTag != -1 && !m_isFragment) {
+  if (m_isInitialized && m_rootTag != -1 && !m_isFragment && m_hasRenderedVisual) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
             winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
@@ -871,14 +867,7 @@ winrt::Microsoft::UI::Content::ContentIsland ReactNativeIsland::Island() {
             winrt::Microsoft::UI::Content::ContentIsland const &,
             winrt::Microsoft::UI::Content::ContentIslandAutomationProviderRequestedEventArgs const &args) {
           if (auto pThis = weakThis.get()) {
-            auto provider = pThis->GetUiaProvider();
-            auto pRootProvider =
-                static_cast<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider *>(
-                    provider.as<IRawElementProviderSimple>().get());
-            if (pRootProvider != nullptr) {
-              pRootProvider->SetIsland(pThis->m_island);
-            }
-            args.AutomationProvider(std::move(provider));
+            args.AutomationProvider(pThis->GetUiaProvider());
             args.Handled(true);
           }
         });
@@ -900,16 +889,6 @@ winrt::Microsoft::UI::Content::ContentIsland ReactNativeIsland::Island() {
             if (args.DidLayoutDirectionChange()) {
               pThis->Arrange(pThis->m_layoutConstraints, pThis->m_viewportOffset);
             }
-#ifndef USE_EXPERIMENTAL_WINUI3 // Use this in place of Connected/Disconnected events for now. -- Its not quite what we
-                                // want, but it will do for now.
-            if (args.DidSiteVisibleChange()) {
-              if (island.IsSiteVisible()) {
-                pThis->OnMounted();
-              } else {
-                pThis->OnUnmounted();
-              }
-            }
-#endif
           }
         });
 #ifdef USE_EXPERIMENTAL_WINUI3
@@ -965,6 +944,24 @@ void ReactNativeIsland::OnUnmounted() noexcept {
   }
 }
 
+void ReactNativeIsland::SetProperties(winrt::Microsoft::ReactNative::JSValueArgWriter props) noexcept {
+  auto initProps = DynamicWriter::ToDynamic(props);
+  if (initProps.isNull()) {
+    initProps = folly::dynamic::object();
+  }
+
+  if (m_isJSViewAttached) {
+    if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
+            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
+      initProps["concurrentRoot"] = true;
+      fabricuiManager->setProps(static_cast<facebook::react::SurfaceId>(m_rootTag), initProps);
+      return;
+    }
+  }
+
+  m_props = initProps;
+}
+
 winrt::com_ptr<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>
 ReactNativeIsland::GetComponentView() noexcept {
   if (auto portal = m_portal.get()) {
@@ -979,10 +976,10 @@ ReactNativeIsland::GetComponentView() noexcept {
 
   if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
           winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
-    auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(
-        static_cast<facebook::react::SurfaceId>(m_rootTag));
-    return rootComponentViewDescriptor.view
-        .as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>();
+    if (auto view = fabricuiManager->GetViewRegistry().findComponentViewWithTag(
+            static_cast<facebook::react::SurfaceId>(m_rootTag))) {
+      return view.as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>();
+    }
   }
   return nullptr;
 }

package/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.h

@@ -76,6 +76,8 @@ struct ReactNativeIsland
   float ScaleFactor() noexcept;
   void ScaleFactor(float value) noexcept;
 
+  void SetProperties(winrt::Microsoft::ReactNative::JSValueArgWriter props) noexcept;
+
   float FontSizeMultiplier() const noexcept;
 
   winrt::event_token SizeChanged(
@@ -154,11 +156,14 @@ struct ReactNativeIsland
   bool m_isJSViewAttached{false};
   bool m_hasRenderedVisual{false};
   bool m_showingLoadingUI{false};
-  bool m_mounted{false};
+  bool m_mounted{true};
   winrt::weak_ref<winrt::Microsoft::ReactNative::Composition::PortalComponentView> m_portal{nullptr};
   IReactDispatcher m_uiDispatcher{nullptr};
   winrt::IInspectable m_uiaProvider{nullptr};
 
+  // If SetProps is called before the surface is loaded, store it locally to use on start
+  folly::dynamic m_props;
+
   // This is the surfaceId that this island belongs to.
   // In the case of portal content root, this will be the surfaceId that contains the portal.
   int64_t m_rootTag{-1};

package/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp

@@ -76,7 +76,10 @@ void RootComponentView::updateLayoutMetrics(
 winrt::Microsoft::ReactNative::ComponentView RootComponentView::GetFocusedComponent() noexcept {
   return m_focusedComponent;
 }
-void RootComponentView::SetFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &value) noexcept {
+
+void RootComponentView::SetFocusedComponent(
+    const winrt::Microsoft::ReactNative::ComponentView &value,
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept {
   if (m_focusedComponent == value)
     return;
 
@@ -90,11 +93,10 @@ void RootComponentView::SetFocusedComponent(const winrt::Microsoft::ReactNative:
     if (auto rootView = m_wkRootView.get()) {
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->TrySetFocus();
     }
-    auto args = winrt::make<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>(value);
+    m_focusedComponent = value;
+    auto args = winrt::make<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>(value, direction);
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(value)->onGotFocus(args);
   }
-
-  m_focusedComponent = value;
 }
 
 bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept {
@@ -118,7 +120,8 @@ bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::Focus
 
 bool RootComponentView::TrySetFocusedComponent(
     const winrt::Microsoft::ReactNative::ComponentView &view,
-    winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept {
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+    bool forceNoSelectionIfCannotMove /*= false*/) noexcept {
   auto target = view;
   auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
   if (selfView && !selfView->focusable()) {
@@ -126,7 +129,7 @@ bool RootComponentView::TrySetFocusedComponent(
               direction == winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous)
         ? FocusManager::FindLastFocusableElement(target)
         : FocusManager::FindFirstFocusableElement(target);
-    if (!target)
+    if (!target && !forceNoSelectionIfCannotMove)
       return false;
     selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
   }
@@ -151,7 +154,9 @@ bool RootComponentView::TrySetFocusedComponent(
 
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(losingFocusArgs.NewFocusedComponent())
         ->rootComponentView()
-        ->SetFocusedComponent(gettingFocusArgs.NewFocusedComponent());
+        ->SetFocusedComponent(gettingFocusArgs.NewFocusedComponent(), direction);
+  } else {
+    SetFocusedComponent(nullptr, direction);
   }
 
   return true;
@@ -241,7 +246,7 @@ void RootComponentView::start(const winrt::Microsoft::ReactNative::ReactNativeIs
 }
 
 void RootComponentView::stop() noexcept {
-  SetFocusedComponent(nullptr);
+  SetFocusedComponent(nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
   if (m_visualAddedToIsland) {
     if (auto rootView = m_wkRootView.get()) {
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->RemoveRenderedVisual(

package/Microsoft.ReactNative/Fabric/Composition/RootComponentView.h

@@ -27,10 +27,13 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
   winrt::Microsoft::ReactNative::ComponentView GetFocusedComponent() noexcept;
-  void SetFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &value) noexcept;
+  void SetFocusedComponent(
+      const winrt::Microsoft::ReactNative::ComponentView &value,
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept;
   bool TrySetFocusedComponent(
       const winrt::Microsoft::ReactNative::ComponentView &view,
-      winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept;
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+      bool forceNoSelectionIfCannotMove = false) noexcept;
 
   bool NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept;
 

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

@@ -81,9 +81,12 @@ struct ScrollBarComponent {
   }
 
   void ContentSize(winrt::Windows::Foundation::Size contentSize) noexcept {
+    if (m_contentSize == contentSize) {
+      return;
+    }
     m_contentSize = contentSize;
     updateThumb();
-    updateVisibility();
+    updateVisibility(m_visible);
   }
 
   void updateTrack() noexcept {
@@ -108,10 +111,22 @@ struct ScrollBarComponent {
 
     updateTrack();
     updateThumb();
-    updateVisibility();
+    updateVisibility(m_visible);
   }
 
-  void updateVisibility() noexcept {
+  void updateVisibility(bool visible) noexcept {
+    if ((m_size.Width <= 0.0f && m_size.Height <= 0.0f) ||
+        (m_contentSize.Width <= 0.0f && m_contentSize.Height <= 0.0f)) {
+      m_rootVisual.IsVisible(false);
+      return;
+    }
+
+    if (!visible) {
+      m_visible = false;
+      m_rootVisual.IsVisible(visible);
+      return;
+    }
+
     bool newVisibility = false;
     if (m_vertical) {
       newVisibility = (m_contentSize.Height > m_size.Height);
@@ -119,10 +134,8 @@ struct ScrollBarComponent {
       newVisibility = (m_contentSize.Width > m_size.Width);
     }
 
-    if (newVisibility != m_visible) {
-      m_visible = newVisibility;
-      m_rootVisual.IsVisible(m_visible);
-    }
+    m_visible = newVisibility;
+    m_rootVisual.IsVisible(m_visible);
   }
 
   void updateRootAndArrowVisualOffsets() noexcept {
@@ -561,7 +574,7 @@ struct ScrollBarComponent {
   winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   winrt::Microsoft::ReactNative::ReactContext m_reactContext;
   const bool m_vertical;
-  bool m_visible{false};
+  bool m_visible{true};
   bool m_shy{false};
   int m_thumbSize{0};
   float m_arrowSize{0};
@@ -753,6 +766,44 @@ void ScrollViewComponentView::updateProps(
   if (!oldProps || oldViewProps.horizontal != newViewProps.horizontal) {
     m_scrollVisual.Horizontal(newViewProps.horizontal);
   }
+
+  if (!oldProps || oldViewProps.showsHorizontalScrollIndicator != newViewProps.showsHorizontalScrollIndicator) {
+    updateShowsHorizontalScrollIndicator(newViewProps.showsHorizontalScrollIndicator);
+  }
+
+  if (!oldProps || oldViewProps.showsVerticalScrollIndicator != newViewProps.showsVerticalScrollIndicator) {
+    updateShowsVerticalScrollIndicator(newViewProps.showsVerticalScrollIndicator);
+  }
+
+  if (!oldProps || oldViewProps.decelerationRate != newViewProps.decelerationRate) {
+    updateDecelerationRate(newViewProps.decelerationRate);
+  }
+
+  if (!oldProps || oldViewProps.scrollEventThrottle != newViewProps.scrollEventThrottle) {
+    // Zero means "send value only once per significant logical event".
+    // Prop value is in milliseconds.
+    auto throttleInSeconds = newViewProps.scrollEventThrottle / 1000.0;
+    auto msPerFrame = 1.0 / 60.0;
+    if (throttleInSeconds < 0) {
+      m_scrollEventThrottle = INFINITY;
+    } else if (throttleInSeconds <= msPerFrame) {
+      m_scrollEventThrottle = 0;
+    } else {
+      m_scrollEventThrottle = throttleInSeconds;
+    }
+  }
+
+  if (oldViewProps.maximumZoomScale != newViewProps.maximumZoomScale) {
+    m_scrollVisual.SetMaximumZoomScale(newViewProps.maximumZoomScale);
+  }
+
+  if (oldViewProps.minimumZoomScale != newViewProps.minimumZoomScale) {
+    m_scrollVisual.SetMinimumZoomScale(newViewProps.minimumZoomScale);
+  }
+
+  if (oldViewProps.zoomScale != newViewProps.zoomScale) {
+    m_scrollVisual.Scale({newViewProps.zoomScale, newViewProps.zoomScale, newViewProps.zoomScale});
+  }
 }
 
 void ScrollViewComponentView::updateState(
@@ -784,14 +835,15 @@ void ScrollViewComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
   // Set Position & Size Properties
   ensureVisual();
-
-  m_verticalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
-  m_horizontalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
-  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-  m_scrollVisual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-  updateContentVisualSize();
+  if (oldLayoutMetrics != layoutMetrics) {
+    m_verticalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
+    m_horizontalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
+    base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+    m_scrollVisual.Size(
+        {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
+         layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+    updateContentVisualSize();
+  }
 }
 
 void ScrollViewComponentView::updateContentVisualSize() noexcept {
@@ -962,6 +1014,8 @@ bool ScrollViewComponentView::scrollToEnd(bool animate) noexcept {
 
   auto x = (m_contentSize.width - m_layoutMetrics.frame.size.width) * m_layoutMetrics.pointScaleFactor;
   auto y = (m_contentSize.height - m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor;
+  // Ensure at least one scroll event will fire
+  m_allowNextScrollNoMatterWhat = true;
   m_scrollVisual.TryUpdatePosition({static_cast<float>(x), static_cast<float>(y), 0.0f}, animate);
   return true;
 }
@@ -1189,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();
@@ -1202,21 +1273,52 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
       [this](
           winrt::IInspectable const & /*sender*/,
           winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
+        auto now = std::chrono::steady_clock::now();
+        auto elapsed = std::chrono::duration_cast<std::chrono::duration<double>>(now - m_lastScrollEventTime).count();
+
+        if (m_allowNextScrollNoMatterWhat ||
+            (m_scrollEventThrottle < std::max(std::chrono::duration<double>(0.017).count(), elapsed))) {
+          updateStateWithContentOffset();
+          auto eventEmitter = GetEventEmitter();
+          if (eventEmitter) {
+            auto scrollMetrics = getScrollMetrics(eventEmitter, args);
+            std::static_pointer_cast<facebook::react::ScrollViewEventEmitter const>(eventEmitter)
+                ->onScroll(scrollMetrics);
+            m_lastScrollEventTime = now;
+            m_allowNextScrollNoMatterWhat = false;
+          }
+        }
+      });
+
+  m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag(
+      winrt::auto_revoke,
+      [this](
+          winrt::IInspectable const & /*sender*/,
+          winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
+        m_allowNextScrollNoMatterWhat = true; // Ensure next scroll event is recorded, regardless of throttle
         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);
+              ->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;
 }
 
@@ -1294,4 +1396,23 @@ double ScrollViewComponentView::getHorizontalSize() noexcept {
   return std::min((m_layoutMetrics.frame.size.width / m_contentSize.width * 100.0), 100.0);
 }
 
+void ScrollViewComponentView::updateShowsHorizontalScrollIndicator(bool value) noexcept {
+  if (value) {
+    m_horizontalScrollbarComponent->updateVisibility(true);
+  } else {
+    m_horizontalScrollbarComponent->updateVisibility(false);
+  }
+}
+
+void ScrollViewComponentView::updateShowsVerticalScrollIndicator(bool value) noexcept {
+  if (value) {
+    m_verticalScrollbarComponent->updateVisibility(true);
+  } else {
+    m_verticalScrollbarComponent->updateVisibility(false);
+  }
+}
+
+void ScrollViewComponentView::updateDecelerationRate(float value) noexcept {
+  m_scrollVisual.SetDecelerationRate({value, value, value});
+}
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/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;
@@ -128,6 +129,11 @@ 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;
 
   facebook::react::Size m_contentSize;
   winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual m_scrollVisual{nullptr};
@@ -135,6 +141,11 @@ 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{};
+
+  winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollEndDrag_revoker
+      m_scrollEndDragRevoker{};
 
   float m_zoomFactor{1.0f};
   bool m_isScrollingFromInertia = false;
@@ -142,6 +153,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool m_isHorizontal = false;
   bool m_changeViewAfterLoaded = false;
   bool m_dismissKeyboardOnDrag = false;
+  double m_scrollEventThrottle{0.0};
+  bool m_allowNextScrollNoMatterWhat{false};
+  std::chrono::steady_clock::time_point m_lastScrollEventTime{};
   std::shared_ptr<facebook::react::ScrollViewShadowNode::ConcreteState const> m_state;
 };