[Fabric] ScrollViewComponentView should report ContentOffset to its shadownode state (#12588)

* [Fabric] ScrollViewComponentView should report ContentOffset to its shadownode state

* Change files

Author: acoates-ms

change/react-native-windows-cd43f7b4-f22b-4a94-a3fc-784d8abcd991.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] ScrollViewComponentView should report ContentOffset to its shadownode state",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -181,12 +181,24 @@ void ScrollViewComponentView::updateProps(
 void ScrollViewComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {
-  const auto &newState = *std::static_pointer_cast<facebook::react::ScrollViewShadowNode::ConcreteState const>(state);
-
-  m_contentSize = newState.getData().getContentSize();
+  m_state = std::static_pointer_cast<facebook::react::ScrollViewShadowNode::ConcreteState const>(state);
+  m_contentSize = m_state->getData().getContentSize();
   updateContentVisualSize();
 }
 
+void ScrollViewComponentView::updateStateWithContentOffset() noexcept {
+  if (!m_state) {
+    return;
+  }
+
+  m_state->updateState([contentOffset = m_scrollVisual.ScrollPosition()](
+                           const facebook::react::ScrollViewShadowNode::ConcreteState::Data &data) {
+    auto newData = data;
+    newData.contentOffset = {contentOffset.x, contentOffset.y};
+    return std::make_shared<facebook::react::ScrollViewShadowNode::ConcreteState::Data const>(newData);
+  });
+}
+
 void ScrollViewComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
@@ -529,6 +541,7 @@ void ScrollViewComponentView::ensureVisual() noexcept {
         [this](
             winrt::IInspectable const & /*sender*/,
             winrt::Microsoft::ReactNative::Composition::IScrollPositionChangedArgs const &args) {
+          updateStateWithContentOffset();
           auto eventEmitter = GetEventEmitter();
           if (eventEmitter) {
             facebook::react::ScrollViewMetrics scrollMetrics;

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

@@ -11,6 +11,7 @@
 #pragma warning(push)
 #pragma warning(disable : 4305)
 #include <react/renderer/components/scrollview/ScrollViewProps.h>
+#include <react/renderer/components/scrollview/ScrollViewShadowNode.h>
 #pragma warning(pop)
 #include "Composition.ScrollViewComponentView.g.h"
 #include <winrt/Windows.UI.Composition.interactions.h>
@@ -108,6 +109,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool scrollLeft(float delta, bool aniamte) noexcept;
   bool scrollRight(float delta, bool animate) noexcept;
   void updateBackgroundColor(const facebook::react::SharedColor &color) noexcept;
+  void updateStateWithContentOffset() noexcept;
 
   facebook::react::Size m_contentSize;
   winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
@@ -122,6 +124,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool m_isHorizontal = false;
   bool m_changeViewAfterLoaded = false;
   bool m_dismissKeyboardOnDrag = false;
+  std::shared_ptr<facebook::react::ScrollViewShadowNode::ConcreteState const> m_state;
 
  private:
   bool shouldBeControl() const noexcept;