react-native-windows 0.74.4 → 0.74.5

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h

@@ -13,8 +13,9 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct WindowsModalHostComponentView : WindowsModalHostComponentViewT<WindowsModalHostComponentView, ComponentView> {
-  using Super = WindowsModalHostComponentViewT<WindowsModalHostComponentView, ComponentView>;
+struct WindowsModalHostComponentView
+    : WindowsModalHostComponentViewT<WindowsModalHostComponentView, ViewComponentView> {
+  using Super = WindowsModalHostComponentViewT<WindowsModalHostComponentView, ViewComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -37,13 +38,11 @@ struct WindowsModalHostComponentView : WindowsModalHostComponentViewT<WindowsMod
   void updateLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
-  void prepareForRecycle() noexcept override;
-  facebook::react::SharedViewProps viewProps() noexcept override;
+  static facebook::react::SharedViewProps defaultProps() noexcept;
+  const facebook::react::ModalHostViewProps &modalHostViewProps() const noexcept;
   bool focusable() const noexcept override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
       const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept override;
   virtual std::string DefaultControlType() const noexcept;
 
   WindowsModalHostComponentView(
@@ -58,8 +57,6 @@ struct WindowsModalHostComponentView : WindowsModalHostComponentViewT<WindowsMod
   static void RegisterWndClass() noexcept;
 
  private:
-  std::shared_ptr<facebook::react::ModalHostViewProps const> m_props;
-  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   HWND m_hwnd{nullptr};
   winrt::Microsoft::ReactNative::ReactContext m_context;
 };

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

@@ -23,14 +23,12 @@ ParagraphComponentView::ParagraphComponentView(
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
+          ParagraphComponentView::defaultProps(),
           compContext,
           tag,
           reactContext,
           ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
-          false) {
-  static auto const defaultProps = std::make_shared<facebook::react::ParagraphProps const>();
-  m_props = defaultProps;
-}
+          false) {}
 
 void ParagraphComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
@@ -49,7 +47,8 @@ void ParagraphComponentView::UnmountChildComponentView(
 void ParagraphComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
-  const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const facebook::react::ParagraphProps>(oldProps ? oldProps : viewProps());
   const auto &newViewProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(props);
 
   ensureVisual();
@@ -57,23 +56,16 @@ void ParagraphComponentView::updateProps(
   if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
     m_requireRedraw = true;
   }
+
   if (oldViewProps.textAttributes.opacity != newViewProps.textAttributes.opacity) {
     m_requireRedraw = true;
   }
-  if (oldViewProps.testId != newViewProps.testId) {
-    m_visual.Comment(winrt::to_hstring(newViewProps.testId));
-  }
 
   if (oldViewProps.textAttributes.alignment != newViewProps.textAttributes.alignment) {
     updateTextAlignment(newViewProps.textAttributes.alignment);
   }
 
-  // update BaseComponentView props
-  updateAccessibilityProps(oldViewProps, newViewProps);
-  updateTransformProps(oldViewProps, newViewProps, m_visual);
   Super::updateProps(props, oldProps);
-
-  m_props = std::static_pointer_cast<facebook::react::ParagraphProps const>(props);
 }
 
 void ParagraphComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
@@ -90,60 +82,13 @@ void ParagraphComponentView::updateState(
 
   m_textLayout = nullptr;
 }
-void ParagraphComponentView::updateLayoutMetrics(
-    facebook::react::LayoutMetrics const &layoutMetrics,
-    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
-  // Set Position & Size Properties
-
-  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
-  }
 
-  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-  m_visual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-}
 void ParagraphComponentView::FinalizeUpdates(
     winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
   ensureVisual();
   updateVisualBrush();
   Super::FinalizeUpdates(updateMask);
 }
-void ParagraphComponentView::prepareForRecycle() noexcept {}
-
-facebook::react::SharedViewProps ParagraphComponentView::viewProps() noexcept {
-  return m_props;
-}
-
-facebook::react::Tag ParagraphComponentView::hitTest(
-    facebook::react::Point pt,
-    facebook::react::Point &localPt,
-    bool ignorePointerEvents) const noexcept {
-  facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
-
-  facebook::react::Tag targetTag;
-
-  /*
-    if ((m_props.pointerEvents == facebook::react::PointerEventsMode::Auto ||
-        m_props.pointerEvents == facebook::react::PointerEventsMode::BoxNone) && std::any_of(m_children.rbegin(),
-    m_children.rend(), [&targetTag, &ptLocal, &localPt](auto child) { targetTag = static_cast<const
-    ComponentView
-    *>(child)->hitTest(ptLocal, localPt); return targetTag != -1;
-        }))
-      return targetTag;
-      */
-
-  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
-      ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
-      ptLocal.y <= m_layoutMetrics.frame.size.height) {
-    localPt = ptLocal;
-    return Tag();
-  }
-
-  return -1;
-}
 
 facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPoint(
     facebook::react::Point pt) noexcept {
@@ -168,13 +113,6 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo
   return m_eventEmitter;
 }
 
-void ParagraphComponentView::ensureVisual() noexcept {
-  if (!m_visual) {
-    m_visual = m_compContext.CreateSpriteVisual();
-    OuterVisual().InsertAt(m_visual, 0);
-  }
-}
-
 void ParagraphComponentView::updateTextAlignment(
     const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept {
   m_textLayout = nullptr;
@@ -255,11 +193,11 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
 
     // The surfaceBrush's size is based on the size the text takes up, which maybe smaller than the total visual
     // So we need to align the brush within the visual to match the text alignment.
-    const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
     float horizAlignment{0.f};
     /*
-    if (paragraphProps.textAttributes.alignment) {
-      switch (*paragraphProps.textAttributes.alignment) {
+    const auto &props = paragraphProps()
+    if (props.textAttributes.alignment) {
+      switch (*props.textAttributes.alignment) {
         case facebook::react::TextAlignment::Center:
           horizAlignment = 0.5f;
           break;
@@ -287,7 +225,7 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
       m_drawingSurface.VerticalAlignmentRatio(0.f);
       m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None);
     }
-    m_visual.Brush(m_drawingSurface);
+    Visual().as<Experimental::ISpriteVisual>().Brush(m_drawingSurface);
   }
 
   if (m_requireRedraw) {
@@ -295,6 +233,15 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
   }
 }
 
+facebook::react::SharedViewProps ParagraphComponentView::defaultProps() noexcept {
+  static auto const defaultProps = std::make_shared<facebook::react::ParagraphProps const>();
+  return defaultProps;
+}
+
+const facebook::react::ParagraphProps &ParagraphComponentView::paragraphProps() const noexcept {
+  return *std::static_pointer_cast<const facebook::react::ParagraphProps>(viewProps());
+}
+
 void ParagraphComponentView::onThemeChanged() noexcept {
   DrawText();
   Super::onThemeChanged();
@@ -316,23 +263,23 @@ void ParagraphComponentView::DrawText() noexcept {
         m_drawingSurface, m_layoutMetrics.pointScaleFactor, &offset);
     if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
       d2dDeviceContext->Clear(
-          m_props->backgroundColor ? theme()->D2DColor(*m_props->backgroundColor)
-                                   : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
+          viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor)
+                                       : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
 
-      const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
+      const auto &props = paragraphProps();
 
       RenderText(
           *d2dDeviceContext,
           *m_textLayout,
           m_attributedStringBox.getValue(),
-          paragraphProps.textAttributes,
+          props.textAttributes,
           {static_cast<float>(offset.x) + m_layoutMetrics.contentInsets.left,
            static_cast<float>(offset.y) + m_layoutMetrics.contentInsets.top},
           m_layoutMetrics.pointScaleFactor,
           *theme());
 
-      if (!isnan(paragraphProps.opacity)) {
-        m_visual.Opacity(paragraphProps.opacity);
+      if (!isnan(props.opacity)) {
+        Visual().Opacity(props.opacity);
       }
     }
     m_requireRedraw = false;
@@ -347,10 +294,6 @@ std::string ParagraphComponentView::DefaultAccessibleName() const noexcept {
   return m_attributedStringBox.getValue().getString();
 }
 
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ParagraphComponentView::Visual() const noexcept {
-  return m_visual;
-}
-
 winrt::Microsoft::ReactNative::ComponentView ParagraphComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,

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

@@ -17,8 +17,8 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView, ComponentView> {
-  using Super = ParagraphComponentViewT<ParagraphComponentView, ComponentView>;
+struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView, ViewComponentView> {
+  using Super = ParagraphComponentViewT<ParagraphComponentView, ViewComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -36,21 +36,15 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
       override;
-  void updateLayoutMetrics(
-      facebook::react::LayoutMetrics const &layoutMetrics,
-      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
   void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
-  void prepareForRecycle() noexcept override;
-  facebook::react::SharedViewProps viewProps() noexcept override;
-  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
-      const noexcept override;
   void OnRenderingDeviceLost() noexcept override;
   void onThemeChanged() noexcept override;
   facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept override;
 
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
   virtual std::string DefaultControlType() const noexcept override;
   virtual std::string DefaultAccessibleName() const noexcept override;
+  static facebook::react::SharedViewProps defaultProps() noexcept;
+  const facebook::react::ParagraphProps &paragraphProps() const noexcept;
 
   ParagraphComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -58,13 +52,10 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
  private:
-  void ensureVisual() noexcept;
   void updateVisualBrush() noexcept;
   void DrawText() noexcept;
   void updateTextAlignment(const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept;
 
-  std::shared_ptr<facebook::react::ParagraphProps const> m_props;
-  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   winrt::com_ptr<::IDWriteTextLayout> m_textLayout;
   facebook::react::AttributedStringBox m_attributedStringBox;
   facebook::react::ParagraphAttributes m_paragraphAttributes;

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

@@ -18,6 +18,7 @@ RootComponentView::RootComponentView(
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : base_type(
+          {}, // default viewProps
           compContext,
           tag,
           reactContext,

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

@@ -578,19 +578,22 @@ winrt::Microsoft::ReactNative::ComponentView ScrollViewComponentView::Create(
   return winrt::make<ScrollViewComponentView>(compContext, tag, reactContext);
 }
 
+facebook::react::SharedViewProps ScrollViewComponentView::defaultProps() noexcept {
+  static auto const defaultViewProps = std::make_shared<facebook::react::ScrollViewProps const>();
+  return defaultViewProps;
+}
+
 ScrollViewComponentView::ScrollViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
+          ScrollViewComponentView::defaultProps(),
           compContext,
           tag,
           reactContext,
           ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
           false) {
-  static auto const defaultProps = std::make_shared<facebook::react::ScrollViewProps const>();
-  m_props = defaultProps;
-
   // m_element.Content(m_contentPanel);
 
   /*
@@ -683,7 +686,8 @@ ScrollViewComponentView::ScrollViewComponentView(
 void ScrollViewComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  base_type::MountChildComponentView(childComponentView, index);
+  // Call ComponentView::UnmountChildComponentView instead of base to handle out own Visual hosting
+  ComponentView::MountChildComponentView(childComponentView, index);
 
   ensureVisual();
   m_scrollVisual.InsertAt(
@@ -694,7 +698,8 @@ void ScrollViewComponentView::MountChildComponentView(
 void ScrollViewComponentView::UnmountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  base_type::UnmountChildComponentView(childComponentView, index);
+  // Call ComponentView::UnmountChildComponentView instead of base to handle out own Visual hosting
+  ComponentView::UnmountChildComponentView(childComponentView, index);
   m_scrollVisual.Remove(childComponentView.as<ComponentView>()->OuterVisual());
 }
 
@@ -710,22 +715,17 @@ void ScrollViewComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
   const auto &newViewProps = *std::static_pointer_cast<const facebook::react::ScrollViewProps>(props);
-  const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::ScrollViewProps>(m_props);
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const facebook::react::ScrollViewProps>(oldProps ? oldProps : viewProps());
 
   ensureVisual();
 
   if (!oldProps || oldViewProps.backgroundColor != newViewProps.backgroundColor) {
     updateBackgroundColor(newViewProps.backgroundColor);
   }
-  if (oldViewProps.testId != newViewProps.testId) {
-    m_visual.Comment(winrt::to_hstring(newViewProps.testId));
-  }
 
   // update BaseComponentView props
-  updateTransformProps(oldViewProps, newViewProps, m_visual);
-  Super::updateProps(props, oldProps);
-
-  m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
+  base_type::updateProps(props, oldProps);
 }
 
 void ScrollViewComponentView::updateState(
@@ -758,16 +758,9 @@ void ScrollViewComponentView::updateLayoutMetrics(
   // Set Position & Size Properties
   ensureVisual();
 
-  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
-  }
-
   m_verticalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
   m_horizontalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
-  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-  m_visual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
   m_scrollVisual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
@@ -785,10 +778,6 @@ void ScrollViewComponentView::updateContentVisualSize() noexcept {
 
 void ScrollViewComponentView::prepareForRecycle() noexcept {}
 
-facebook::react::SharedViewProps ScrollViewComponentView::viewProps() noexcept {
-  return m_props;
-}
-
 /*
 ScrollViewComponentView::ScrollInteractionTrackerOwner::ScrollInteractionTrackerOwner(
     ScrollViewComponentView *outer)
@@ -835,7 +824,7 @@ void ScrollViewComponentView::OnPointerDown(const winrt::Windows::UI::Input::Poi
 */
 
 void ScrollViewComponentView::onThemeChanged() noexcept {
-  updateBackgroundColor(std::static_pointer_cast<const facebook::react::ScrollViewProps>(m_props)->backgroundColor);
+  updateBackgroundColor(std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->backgroundColor);
   m_verticalScrollbarComponent->OnThemeChanged();
   m_horizontalScrollbarComponent->OnThemeChanged();
   Super::onThemeChanged();
@@ -925,6 +914,8 @@ void ScrollViewComponentView::OnKeyDown(
       args.Handled(lineRight(true));
       break;
   }
+
+  base_type::OnKeyDown(source, args);
 }
 
 bool ScrollViewComponentView::scrollToEnd(bool animate) noexcept {
@@ -1131,37 +1122,35 @@ void ScrollViewComponentView::StartBringIntoView(
   }
 }
 
-void ScrollViewComponentView::ensureVisual() noexcept {
-  if (!m_visual) {
-    m_visual = m_compContext.CreateSpriteVisual();
-    m_scrollVisual = m_compContext.CreateScrollerVisual();
-    m_verticalScrollbarComponent = std::make_shared<ScrollBarComponent>(*this, m_compContext, m_reactContext, true);
-    m_horizontalScrollbarComponent = std::make_shared<ScrollBarComponent>(*this, m_compContext, m_reactContext, false);
-    m_visual.InsertAt(m_scrollVisual, 0);
-    m_visual.InsertAt(m_verticalScrollbarComponent->Visual(), 1);
-    m_visual.InsertAt(m_horizontalScrollbarComponent->Visual(), 2);
-    m_scrollPositionChangedRevoker = m_scrollVisual.ScrollPositionChanged(
-        winrt::auto_revoke,
-        [this](
-            winrt::IInspectable const & /*sender*/,
-            winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
-          updateStateWithContentOffset();
-          auto eventEmitter = GetEventEmitter();
-          if (eventEmitter) {
-            facebook::react::ScrollViewMetrics 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);
-          }
-        });
-    OuterVisual().InsertAt(m_visual, 0);
-  }
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComponentView::createVisual() noexcept {
+  auto visual = m_compContext.CreateSpriteVisual();
+  m_scrollVisual = m_compContext.CreateScrollerVisual();
+  m_verticalScrollbarComponent = std::make_shared<ScrollBarComponent>(*this, m_compContext, m_reactContext, true);
+  m_horizontalScrollbarComponent = std::make_shared<ScrollBarComponent>(*this, m_compContext, m_reactContext, false);
+  visual.InsertAt(m_scrollVisual, 0);
+  visual.InsertAt(m_verticalScrollbarComponent->Visual(), 1);
+  visual.InsertAt(m_horizontalScrollbarComponent->Visual(), 2);
+  m_scrollPositionChangedRevoker = m_scrollVisual.ScrollPositionChanged(
+      winrt::auto_revoke,
+      [this](
+          winrt::IInspectable const & /*sender*/,
+          winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
+        updateStateWithContentOffset();
+        auto eventEmitter = GetEventEmitter();
+        if (eventEmitter) {
+          facebook::react::ScrollViewMetrics 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);
+        }
+      });
+  return visual;
 }
 
 facebook::react::Tag ScrollViewComponentView::hitTest(
@@ -1174,19 +1163,19 @@ facebook::react::Tag ScrollViewComponentView::hitTest(
       ptViewport.x + m_scrollVisual.ScrollPosition().x / m_layoutMetrics.pointScaleFactor,
       ptViewport.y + m_scrollVisual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor};
 
-  facebook::react::Tag targetTag;
+  facebook::react::Tag targetTag = -1;
 
-  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
+  if ((ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+       viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
       ptViewport.x >= 0 && ptViewport.x <= m_layoutMetrics.frame.size.width && ptViewport.y >= 0 &&
       ptViewport.y <= m_layoutMetrics.frame.size.height) {
-    if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-         m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) &&
+    if ((ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+         viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxNone) &&
         anyHitTestHelper(targetTag, ptContent, localPt))
       return targetTag;
 
-    if (ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) {
+    if (ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+        viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) {
       return this->Tag();
     }
   }
@@ -1208,10 +1197,6 @@ facebook::react::Point ScrollViewComponentView::getClientOffset() const noexcept
           parentOffset.y};
 }
 
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComponentView::Visual() const noexcept {
-  return m_visual;
-}
-
 std::string ScrollViewComponentView::DefaultControlType() const noexcept {
   return "scrollbar";
 }

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

@@ -20,7 +20,7 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 struct ScrollBarComponent;
 
-struct ScrollViewComponentView : ScrollViewComponentViewT<ScrollViewComponentView, ComponentView> {
+struct ScrollViewComponentView : ScrollViewComponentViewT<ScrollViewComponentView, ViewComponentView> {
   /*
 struct ScrollInteractionTrackerOwner : public winrt::implements<
                                            ScrollInteractionTrackerOwner,
@@ -51,7 +51,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
 };
 
 */
-  using Super = ScrollViewComponentViewT<ScrollViewComponentView, ComponentView>;
+  using Super = ScrollViewComponentViewT<ScrollViewComponentView, ViewComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -72,7 +72,6 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
   void prepareForRecycle() noexcept override;
-  facebook::react::SharedViewProps viewProps() noexcept override;
   void OnKeyDown(
       const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
       const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
@@ -82,7 +81,6 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
       const noexcept override;
   facebook::react::Point getClientOffset() const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
 
   void onThemeChanged() noexcept override;
   void OnPointerReleased(
@@ -100,6 +98,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
 
   void scrollTo(winrt::Windows::Foundation::Numerics::float3 offset, bool animate) noexcept;
 
+  static facebook::react::SharedViewProps defaultProps() noexcept;
+
   ScrollViewComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
@@ -111,9 +111,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool lineDown(bool animate) noexcept;
   bool lineLeft(bool animate) noexcept;
   bool lineRight(bool animate) noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept override;
 
  private:
-  void ensureVisual() noexcept;
   void updateContentVisualSize() noexcept;
   bool scrollToEnd(bool animate) noexcept;
   bool scrollToStart(bool animate) noexcept;
@@ -125,14 +125,12 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   void updateStateWithContentOffset() noexcept;
 
   facebook::react::Size m_contentSize;
-  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual m_scrollVisual{nullptr};
   std::shared_ptr<ScrollBarComponent> m_horizontalScrollbarComponent{nullptr};
   std::shared_ptr<ScrollBarComponent> m_verticalScrollbarComponent{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker
       m_scrollPositionChangedRevoker{};
 
-  facebook::react::SharedViewProps m_props;
   float m_zoomFactor{1.0f};
   bool m_isScrollingFromInertia = false;
   bool m_isScrolling = false;