react-native-windows 0.71.10 → 0.72.0-preview.2

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

@@ -0,0 +1,106 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "ReactCompositionViewComponentBuilder.h"
+#include <strsafe.h>
+#include "DynamicWriter.h"
+#include "ReactHost/MsoUtils.h"
+
+namespace winrt::Microsoft::ReactNative::Composition {
+
+//===========================================================================
+// ReactCompositionViewComponentBuilder implementation
+//===========================================================================
+
+ReactCompositionViewComponentBuilder::ReactCompositionViewComponentBuilder() noexcept {}
+
+void ReactCompositionViewComponentBuilder::SetCreateProps(ViewPropsFactory impl) noexcept {
+  m_propsFactory = impl;
+}
+
+IComponentProps ReactCompositionViewComponentBuilder::CreateProps(ViewProps props) noexcept {
+  return m_propsFactory(props);
+}
+
+void ReactCompositionViewComponentBuilder::SetCreateView(CompositionComponentFactory impl) noexcept {
+  m_createView = impl;
+}
+// (Object handle, String commandName, Microsoft.ReactNative.IJSValueReader args) => bool
+void ReactCompositionViewComponentBuilder::SetCommandHandler(Composition::CommandHandler commandHandler) noexcept {
+  m_commandHandler = commandHandler;
+}
+// (Object handle, Microsoft.ReactNative.IComponentProps props) => void
+void ReactCompositionViewComponentBuilder::SetPropsUpdater(PropsUpdater impl) noexcept {
+  m_propsUpdater = impl;
+}
+// (Object handle, LayoutMetrics metrics) => void
+void ReactCompositionViewComponentBuilder::SetLayoutMetricsUpdater(LayoutMetricsUpdater impl) noexcept {
+  m_layoutMetricsUpdater = impl;
+}
+// (Object handle) => void
+void ReactCompositionViewComponentBuilder::SetUpdateFinalizer(UpdateFinalizer impl) noexcept {
+  m_finalizer = impl;
+}
+// (Object handle) => IVisual
+void ReactCompositionViewComponentBuilder::SetVisualCreator(Composition::VisualCreator impl) noexcept {
+  m_visualCreator = impl;
+}
+// (Object handle, UInt32 Msg, UInt64 WParam, Int64 LParam) => Int64
+void ReactCompositionViewComponentBuilder::SetMessageHandler(MessageHandler impl) noexcept {
+  m_messageHandler = impl;
+}
+
+winrt::Windows::Foundation::IInspectable ReactCompositionViewComponentBuilder::CreateView(
+    ICompositionContext context) noexcept {
+  return m_createView(context);
+}
+
+bool ReactCompositionViewComponentBuilder::HandeCommand(
+    winrt::Windows::Foundation::IInspectable handle,
+    winrt::hstring commandName,
+    IJSValueReader args) noexcept {
+  if (!m_commandHandler) {
+    return false;
+  }
+  return m_commandHandler(handle, commandName, args);
+}
+
+void ReactCompositionViewComponentBuilder::UpdateProps(
+    winrt::Windows::Foundation::IInspectable handle,
+    IComponentProps props) noexcept {
+  if (m_propsUpdater) {
+    m_propsUpdater(handle, props);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::UpdateLayoutMetrics(
+    winrt::Windows::Foundation::IInspectable handle,
+    Composition::LayoutMetrics metrics) noexcept {
+  if (m_layoutMetricsUpdater) {
+    m_layoutMetricsUpdater(handle, metrics);
+  }
+}
+
+void ReactCompositionViewComponentBuilder::FinalizeUpdates(winrt::Windows::Foundation::IInspectable handle) noexcept {
+  if (m_finalizer) {
+    m_finalizer(handle);
+  }
+}
+
+IVisual ReactCompositionViewComponentBuilder::CreateVisual(winrt::Windows::Foundation::IInspectable handle) noexcept {
+  return m_visualCreator(handle);
+}
+
+int64_t ReactCompositionViewComponentBuilder::SendMessage(
+    winrt::Windows::Foundation::IInspectable handle,
+    uint32_t msg,
+    uint64_t wparam,
+    int64_t lparam) noexcept {
+  if (!m_messageHandler) {
+    return 0;
+  }
+  return m_messageHandler(handle, msg, wparam, lparam);
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition

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

@@ -0,0 +1,63 @@
+#pragma once
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include <react/renderer/core/ReactPrimitives.h>
+#include "winrt/Microsoft.ReactNative.Composition.h"
+#include "winrt/Microsoft.ReactNative.h"
+
+namespace winrt::Microsoft::ReactNative::Composition {
+
+struct ReactCompositionViewComponentBuilder : winrt::implements<
+                                                  ReactCompositionViewComponentBuilder,
+                                                  IReactViewComponentBuilder,
+                                                  Composition::IReactCompositionViewComponentBuilder> {
+  ReactCompositionViewComponentBuilder() noexcept;
+
+ public: // IReactViewComponentBuilder
+  void SetCreateProps(ViewPropsFactory impl) noexcept;
+
+ public: // Composition::IReactCompositionViewComponentBuilder
+  // (ICompositionContext) => Handle
+  void SetCreateView(CompositionComponentFactory impl) noexcept;
+  // (Object handle, String commandName, Microsoft.ReactNative.IJSValueReader args) => bool
+  void SetCommandHandler(CommandHandler commandHandler) noexcept;
+  // (Object handle, Microsoft.ReactNative.IComponentProps props) => void
+  void SetPropsUpdater(PropsUpdater impl) noexcept;
+  // (Object handle, LayoutMetrics metrics) => void
+  void SetLayoutMetricsUpdater(LayoutMetricsUpdater impl) noexcept;
+  // (Object handle) => void
+  void SetUpdateFinalizer(UpdateFinalizer impl) noexcept;
+  // (Object handle) => IVisual
+  void SetVisualCreator(VisualCreator impl) noexcept;
+  // (Object handle, UInt32 Msg, UInt64 WParam, Int64 LParam) => Int64
+  void SetMessageHandler(MessageHandler impl) noexcept;
+
+ public:
+  IComponentProps CreateProps(ViewProps props) noexcept;
+
+  winrt::Windows::Foundation::IInspectable CreateView(ICompositionContext context) noexcept;
+  bool HandeCommand(
+      winrt::Windows::Foundation::IInspectable handle,
+      winrt::hstring commandName,
+      IJSValueReader args) noexcept;
+  void UpdateProps(winrt::Windows::Foundation::IInspectable handle, IComponentProps props) noexcept;
+  void UpdateLayoutMetrics(winrt::Windows::Foundation::IInspectable handle, LayoutMetrics metrics) noexcept;
+  void FinalizeUpdates(winrt::Windows::Foundation::IInspectable handle) noexcept;
+  IVisual CreateVisual(winrt::Windows::Foundation::IInspectable handle) noexcept;
+  int64_t
+  SendMessage(winrt::Windows::Foundation::IInspectable handle, uint32_t Msg, uint64_t WParam, int64_t LParam) noexcept;
+
+ private:
+  ViewPropsFactory m_propsFactory;
+
+  CompositionComponentFactory m_createView;
+  CommandHandler m_commandHandler;
+  PropsUpdater m_propsUpdater;
+  LayoutMetricsUpdater m_layoutMetricsUpdater;
+  UpdateFinalizer m_finalizer;
+  VisualCreator m_visualCreator;
+  MessageHandler m_messageHandler;
+};
+
+} // namespace winrt::Microsoft::ReactNative::Composition

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

@@ -0,0 +1,116 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "RootComponentView.h"
+
+#include "CompositionRootAutomationProvider.h"
+#include "CompositionRootView.h"
+
+namespace Microsoft::ReactNative {
+
+RootComponentView::RootComponentView(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag)
+    : Super(compContext, tag) {}
+
+std::shared_ptr<RootComponentView> RootComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag) noexcept {
+  return std::shared_ptr<RootComponentView>(new RootComponentView(compContext, tag));
+}
+
+RootComponentView *RootComponentView::rootComponentView() noexcept {
+  return this;
+}
+
+IComponentView *RootComponentView::GetFocusedComponent() noexcept {
+  return m_focusedComponent;
+}
+void RootComponentView::SetFocusedComponent(IComponentView *value) noexcept {
+  if (m_focusedComponent == value)
+    return;
+
+  if (m_focusedComponent) {
+    m_focusedComponent->onFocusLost();
+  }
+
+  if (value)
+    value->onFocusGained();
+
+  m_focusedComponent = value;
+}
+
+IComponentView *NavigateFocusHelper(IComponentView &view, winrt::Microsoft::ReactNative::FocusNavigationReason reason) {
+  if (reason == winrt::Microsoft::ReactNative::FocusNavigationReason::First) {
+    if (view.focusable()) {
+      return &view;
+    }
+  }
+  IComponentView *toFocus = nullptr;
+
+  Mso::Functor<bool(::Microsoft::ReactNative::IComponentView & v)> fn =
+      [reason, &toFocus](::Microsoft::ReactNative::IComponentView &v) noexcept
+      -> bool { return (toFocus = NavigateFocusHelper(v, reason)); };
+
+  if (view.runOnChildren(reason == winrt::Microsoft::ReactNative::FocusNavigationReason::First, fn)) {
+    return toFocus;
+  }
+
+  if (reason == winrt::Microsoft::ReactNative::FocusNavigationReason::Last) {
+    if (view.focusable()) {
+      return &view;
+    }
+  }
+
+  return nullptr;
+}
+
+bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept {
+  if (request.Reason() == winrt::Microsoft::ReactNative::FocusNavigationReason::Restore) {
+    // No-op for now
+    return m_focusedComponent != nullptr;
+  }
+
+  auto view = NavigateFocusHelper(*this, request.Reason());
+  if (view) {
+    SetFocusedComponent(view);
+  }
+  return view != nullptr;
+}
+
+bool RootComponentView::TryMoveFocus(bool next) noexcept {
+  if (!m_focusedComponent) {
+    return NavigateFocus(winrt::Microsoft::ReactNative::FocusNavigationRequest(
+        next ? winrt::Microsoft::ReactNative::FocusNavigationReason::First
+             : winrt::Microsoft::ReactNative::FocusNavigationReason::Last));
+  }
+
+  Mso::Functor<bool(IComponentView &)> fn = [currentlyFocused = m_focusedComponent](IComponentView &view) noexcept {
+    if (&view == currentlyFocused)
+      return false;
+    if (view.focusable()) {
+      view.rootComponentView()->SetFocusedComponent(&view);
+      return true;
+    }
+    return false;
+  };
+
+  return walkTree(*m_focusedComponent, next, fn);
+}
+
+winrt::IInspectable RootComponentView::EnsureUiaProvider() noexcept {
+  if (m_uiaProvider == nullptr) {
+    m_uiaProvider =
+        winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider>(getPtr());
+  }
+  return m_uiaProvider;
+}
+
+std::shared_ptr<RootComponentView> RootComponentView::getPtr() {
+  return std::static_pointer_cast<RootComponentView>(shared_from_this());
+}
+
+} // namespace Microsoft::ReactNative

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

@@ -0,0 +1,43 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <Fabric/ComponentView.h>
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+
+#include "CompositionViewComponentView.h"
+
+#include <react/components/rnwcore/ShadowNodes.h>
+
+namespace Microsoft::ReactNative {
+
+struct RootComponentView : CompositionViewComponentView {
+  using Super = CompositionViewComponentView;
+
+  [[nodiscard]] static std::shared_ptr<RootComponentView> Create(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag) noexcept;
+
+  std::shared_ptr<RootComponentView> getPtr();
+
+  ::Microsoft::ReactNative::IComponentView *GetFocusedComponent() noexcept;
+  void SetFocusedComponent(::Microsoft::ReactNative::IComponentView *value) noexcept;
+
+  bool NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept;
+
+  bool TryMoveFocus(bool next) noexcept;
+
+  RootComponentView *rootComponentView() noexcept override;
+
+  winrt::IInspectable EnsureUiaProvider() noexcept override;
+
+ private:
+  RootComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag);
+  ::Microsoft::ReactNative::IComponentView *m_focusedComponent = nullptr;
+};
+
+} // namespace Microsoft::ReactNative

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

@@ -17,15 +17,22 @@
 #include <windows.ui.composition.interop.h>
 
 #include <unicode.h>
+#include "CompositionDynamicAutomationProvider.h"
 
 namespace Microsoft::ReactNative {
 
+std::shared_ptr<ScrollViewComponentView> ScrollViewComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag) noexcept {
+  return std::shared_ptr<ScrollViewComponentView>(new ScrollViewComponentView(compContext, tag));
+}
+
 ScrollViewComponentView::ScrollViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag)
     : Super(compContext, tag) {
-  // static auto const defaultProps = std::make_shared<facebook::react::TextProps const>();
-  // m_props = defaultProps;
+  static auto const defaultProps = std::make_shared<facebook::react::ScrollViewProps const>();
+  m_props = defaultProps;
 
   // m_element.Content(m_contentPanel);
 
@@ -116,44 +123,35 @@ ScrollViewComponentView::ScrollViewComponentView(
         */
 }
 
-std::vector<facebook::react::ComponentDescriptorProvider>
-ScrollViewComponentView::supplementalComponentDescriptorProviders() noexcept {
-  return {};
-}
-
-void ScrollViewComponentView::mountChildComponentView(
-    const IComponentView &childComponentView,
-    uint32_t index) noexcept {
+void ScrollViewComponentView::mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
   ensureVisual();
 
   m_children.insert(std::next(m_children.begin(), index), &childComponentView);
-  const_cast<IComponentView &>(childComponentView).parent(this);
+  childComponentView.parent(this);
 
-  m_visual.InsertAt(static_cast<const CompositionBaseComponentView &>(childComponentView).Visual(), index);
+  m_scrollVisual.InsertAt(static_cast<CompositionBaseComponentView &>(childComponentView).OuterVisual(), index);
 }
 
-void ScrollViewComponentView::unmountChildComponentView(
-    const IComponentView &childComponentView,
-    uint32_t index) noexcept {
+void ScrollViewComponentView::unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
   m_children.erase(std::next(m_children.begin(), index));
 
-  m_visual.Remove(static_cast<const CompositionBaseComponentView &>(childComponentView).Visual());
-  const_cast<IComponentView &>(childComponentView).parent(nullptr);
+  m_scrollVisual.Remove(static_cast<CompositionBaseComponentView &>(childComponentView).OuterVisual());
+  childComponentView.parent(nullptr);
 }
 
 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>(oldProps);
+  const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::ScrollViewProps>(m_props);
 
   ensureVisual();
 
   if (!oldProps || oldViewProps.backgroundColor != newViewProps.backgroundColor) {
     if (newViewProps.backgroundColor) {
-      m_visual.Brush(m_compContext.CreateColorBrush((*newViewProps.backgroundColor).m_color));
+      m_scrollVisual.Brush(m_compContext.CreateColorBrush((*newViewProps.backgroundColor).m_color));
     } else {
-      m_visual.Brush(m_compContext.CreateColorBrush({0, 0, 0, 0}));
+      m_scrollVisual.Brush(m_compContext.CreateColorBrush({0, 0, 0, 0}));
     }
   }
 
@@ -170,6 +168,8 @@ void ScrollViewComponentView::updateProps(
     m_needsBorderUpdate = true;
   }
   */
+
+  updateBorderProps(oldViewProps, newViewProps);
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
 
@@ -191,26 +191,25 @@ void ScrollViewComponentView::updateLayoutMetrics(
   ensureVisual();
 
   if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    m_visual.IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
+    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
   }
 
   // m_needsBorderUpdate = true;
+  updateBorderLayoutMetrics(layoutMetrics, *m_props);
   m_layoutMetrics = layoutMetrics;
 
   UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-  m_visual.Offset({
-      layoutMetrics.frame.origin.x * layoutMetrics.pointScaleFactor,
-      layoutMetrics.frame.origin.y * layoutMetrics.pointScaleFactor,
-      0.0f,
-  });
+  m_scrollVisual.Size(
+      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
+       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
   updateContentVisualSize();
 }
 
 void ScrollViewComponentView::updateContentVisualSize() noexcept {
-  m_visual.ContentSize(
+  m_scrollVisual.ContentSize(
       {std::max(m_contentSize.width, m_layoutMetrics.frame.size.width) * m_layoutMetrics.pointScaleFactor,
        std::max(m_contentSize.height, m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor});
 }
@@ -273,8 +272,8 @@ bool ScrollViewComponentView::ScrollWheel(facebook::react::Point pt, int32_t del
   facebook::react::Point ptViewport{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
 
   facebook::react::Point ptContent{
-      ptViewport.x + m_visual.ScrollPosition().x / m_layoutMetrics.pointScaleFactor,
-      ptViewport.y + m_visual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor};
+      ptViewport.x + m_scrollVisual.ScrollPosition().x / m_layoutMetrics.pointScaleFactor,
+      ptViewport.y + m_scrollVisual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor};
 
   if (std::any_of(m_children.rbegin(), m_children.rend(), [ptContent, delta](auto child) {
         return const_cast<CompositionBaseComponentView *>(static_cast<const CompositionBaseComponentView *>(child))
@@ -284,17 +283,36 @@ bool ScrollViewComponentView::ScrollWheel(facebook::react::Point pt, int32_t del
 
   if (ptViewport.x >= 0 && ptViewport.x <= m_layoutMetrics.frame.size.width && ptViewport.y >= 0 &&
       ptViewport.y <= m_layoutMetrics.frame.size.height) {
-    m_visual.ScrollBy({0, static_cast<float>(-delta), 0});
+    m_scrollVisual.ScrollBy({0, static_cast<float>(-delta), 0});
     return true;
   }
 
   return false;
 }
 
+void ScrollViewComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  if (commandName == "scrollTo") {
+    auto x = arg[0].asDouble();
+    auto y = arg[1].asDouble();
+    auto animate = arg[2].asBool();
+    m_scrollVisual.TryUpdatePosition({static_cast<float>(x), static_cast<float>(y), 0.0f}, animate);
+  } else if (commandName == "flashScrollIndicators") {
+    // No-op for now
+  } else if (commandName == "scrollToEnd") {
+    // No-op for now
+  } else if (commandName == "zoomToRect") {
+    // No-op for now
+  } else {
+    Super::handleCommand(commandName, arg);
+  }
+}
+
 void ScrollViewComponentView::ensureVisual() noexcept {
   if (!m_visual) {
-    m_visual = m_compContext.CreateScrollerVisual();
-    m_scrollPositionChangedRevoker = m_visual.ScrollPositionChanged(
+    m_visual = m_compContext.CreateSpriteVisual();
+    m_scrollVisual = m_compContext.CreateScrollerVisual();
+    m_visual.InsertAt(m_scrollVisual, 0);
+    m_scrollPositionChangedRevoker = m_scrollVisual.ScrollPositionChanged(
         winrt::auto_revoke,
         [this](
             winrt::IInspectable const & /*sender*/,
@@ -313,6 +331,7 @@ void ScrollViewComponentView::ensureVisual() noexcept {
                 ->onScroll(scrollMetrics);
           }
         });
+    OuterVisual().InsertAt(m_visual, 0);
   }
 }
 
@@ -321,8 +340,8 @@ facebook::react::Tag ScrollViewComponentView::hitTest(facebook::react::Point pt,
   facebook::react::Point ptViewport{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
 
   facebook::react::Point ptContent{
-      ptViewport.x + m_visual.ScrollPosition().x / m_layoutMetrics.pointScaleFactor,
-      ptViewport.y + m_visual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor};
+      ptViewport.x + m_scrollVisual.ScrollPosition().x / m_layoutMetrics.pointScaleFactor,
+      ptViewport.y + m_scrollVisual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor};
 
   facebook::react::Tag targetTag;
   if ((m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
@@ -344,10 +363,6 @@ facebook::react::Tag ScrollViewComponentView::hitTest(facebook::react::Point pt,
   return -1;
 }
 
-facebook::react::SharedTouchEventEmitter ScrollViewComponentView::touchEventEmitter() noexcept {
-  return m_eventEmitter;
-}
-
 winrt::Microsoft::ReactNative::Composition::IVisual ScrollViewComponentView::Visual() const noexcept {
   return m_visual;
 }

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

@@ -51,14 +51,13 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
 */
 
   using Super = CompositionBaseComponentView;
-  ScrollViewComponentView(
+
+  [[nodiscard]] static std::shared_ptr<ScrollViewComponentView> Create(
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-      facebook::react::Tag tag);
+      facebook::react::Tag tag) noexcept;
 
-  std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
-      override;
-  void mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
-  void unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
   void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
       override;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
@@ -70,8 +69,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
   void prepareForRecycle() noexcept override;
   facebook::react::Props::Shared props() noexcept override;
-  facebook::react::SharedTouchEventEmitter touchEventEmitter() noexcept override;
 
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
 
@@ -79,11 +78,16 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool ScrollWheel(facebook::react::Point pt, int32_t delta) noexcept override;
 
  private:
+  ScrollViewComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag);
+
   void ensureVisual() noexcept;
   void updateContentVisualSize() noexcept;
 
   facebook::react::Size m_contentSize;
-  winrt::Microsoft::ReactNative::Composition::ScrollVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::ScrollVisual m_scrollVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::ScrollVisual::ScrollPositionChanged_revoker
       m_scrollPositionChangedRevoker{};