react-native-windows 0.72.13 → 0.73.0-preview.1

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp

@@ -42,7 +42,7 @@ facebook::react::ShadowNode::Shared AbiViewComponentDescriptor::createShadowNode
     facebook::react::ShadowNodeFamily::Shared const &family) const {
   auto shadowNode = std::make_shared<ShadowNodeT>(fragment, family, getTraits());
 
-  adopt(shadowNode);
+  adopt(*shadowNode);
 
   return shadowNode;
 }
@@ -52,7 +52,7 @@ facebook::react::ShadowNode::Unshared AbiViewComponentDescriptor::cloneShadowNod
     const facebook::react::ShadowNodeFragment &fragment) const {
   auto shadowNode = std::make_shared<ShadowNodeT>(sourceShadowNode, fragment);
 
-  adopt(shadowNode);
+  adopt(*shadowNode);
   return shadowNode;
 }
 
@@ -101,22 +101,8 @@ facebook::react::Props::Shared AbiViewComponentDescriptor::cloneProps(
   return shadowNodeProps;
 };
 
-facebook::react::Props::Shared AbiViewComponentDescriptor::interpolateProps(
-    const facebook::react::PropsParserContext &context,
-    facebook::react::Float animationProgress,
-    const facebook::react::Props::Shared &props,
-    const facebook::react::Props::Shared &newProps) const {
-  facebook::react::Props::Shared interpolatedPropsShared = cloneProps(context, newProps, {});
-
-  if (ConcreteShadowNode::BaseTraits().check(facebook::react::ShadowNodeTraits::Trait::ViewKind)) {
-    facebook::react::interpolateViewProps(animationProgress, props, newProps, interpolatedPropsShared);
-  }
-
-  return interpolatedPropsShared;
-};
-
 facebook::react::State::Shared AbiViewComponentDescriptor::createInitialState(
-    facebook::react::ShadowNodeFragment const &fragment,
+    facebook::react::Props::Shared const &props,
     facebook::react::ShadowNodeFamily::Shared const &family) const {
   if (std::is_same<ConcreteStateData, facebook::react::StateData>::value) {
     // Default case: Returning `null` for nodes that don't use `State`.
@@ -124,9 +110,7 @@ facebook::react::State::Shared AbiViewComponentDescriptor::createInitialState(
   }
 
   return std::make_shared<ConcreteState>(
-      std::make_shared<ConcreteStateData const>(ConcreteShadowNode::initialStateData(
-          fragment, facebook::react::ShadowNodeFamilyFragment::build(*family), *this)),
-      family);
+      std::make_shared<ConcreteStateData const>(ConcreteShadowNode::initialStateData(props, family, *this)), family);
 }
 
 facebook::react::State::Shared AbiViewComponentDescriptor::createState(
@@ -144,18 +128,21 @@ facebook::react::State::Shared AbiViewComponentDescriptor::createState(
 }
 
 facebook::react::ShadowNodeFamily::Shared AbiViewComponentDescriptor::createFamily(
-    facebook::react::ShadowNodeFamilyFragment const &fragment,
-    facebook::react::SharedEventTarget eventTarget) const {
-  auto eventEmitter =
-      std::make_shared<ConcreteEventEmitter const>(std::move(eventTarget), fragment.tag, eventDispatcher_);
+    facebook::react::ShadowNodeFamilyFragment const &fragment) const {
   return std::make_shared<facebook::react::ShadowNodeFamily>(
-      facebook::react::ShadowNodeFamilyFragment{fragment.tag, fragment.surfaceId, eventEmitter},
+      facebook::react::ShadowNodeFamilyFragment{fragment.tag, fragment.surfaceId, fragment.instanceHandle},
       eventDispatcher_,
       *this);
 }
 
+facebook::react::SharedEventEmitter AbiViewComponentDescriptor::createEventEmitter(
+    facebook::react::InstanceHandle::Shared const &instanceHandle) const {
+  return std::make_shared<ConcreteEventEmitter const>(
+      std::make_shared<facebook::react::EventTarget>(instanceHandle), eventDispatcher_);
+}
+
 /*
- * Called immediatelly after `ShadowNode` is created or cloned.
+ * Called immediately after `ShadowNode` is created or cloned.
  *
  * Override this method to pass information from custom `ComponentDescriptor`
  * to new instance of `ShadowNode`.
@@ -166,9 +153,9 @@ facebook::react::ShadowNodeFamily::Shared AbiViewComponentDescriptor::createFami
  *   - Set `ShadowNode`'s size from state in
  * `ModalHostViewComponentDescriptor`.
  */
-void AbiViewComponentDescriptor::adopt(facebook::react::ShadowNode::Unshared const &shadowNode) const {
+void AbiViewComponentDescriptor::adopt(facebook::react::ShadowNode &shadowNode) const {
   // Default implementation does nothing.
-  react_native_assert(shadowNode->getComponentHandle() == getComponentHandle());
+  react_native_assert(shadowNode.getComponentHandle() == getComponentHandle());
 }
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h

@@ -53,25 +53,22 @@ class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
       const facebook::react::PropsParserContext &context,
       const facebook::react::Props::Shared &props,
       const facebook::react::RawProps &rawProps) const override;
-  facebook::react::Props::Shared interpolateProps(
-      const facebook::react::PropsParserContext &context,
-      facebook::react::Float animationProgress,
-      const facebook::react::Props::Shared &props,
-      const facebook::react::Props::Shared &newProps) const override;
   virtual facebook::react::State::Shared createInitialState(
-      facebook::react::ShadowNodeFragment const &fragment,
+      facebook::react::Props::Shared const &props,
       facebook::react::ShadowNodeFamily::Shared const &family) const override;
   virtual facebook::react::State::Shared createState(
       facebook::react::ShadowNodeFamily const &family,
       facebook::react::StateData::Shared const &data) const override;
 
   facebook::react::ShadowNodeFamily::Shared createFamily(
-      facebook::react::ShadowNodeFamilyFragment const &fragment,
-      facebook::react::SharedEventTarget eventTarget) const override;
+      facebook::react::ShadowNodeFamilyFragment const &fragment) const override;
+
+  facebook::react::SharedEventEmitter createEventEmitter(
+      facebook::react::InstanceHandle::Shared const &instanceHandle) const override;
 
  protected:
   /*
-   * Called immediatelly after `ShadowNode` is created or cloned.
+   * Called immediately after `ShadowNode` is created or cloned.
    *
    * Override this method to pass information from custom `ComponentDescriptor`
    * to new instance of `ShadowNode`.
@@ -82,7 +79,7 @@ class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
    *   - Set `ShadowNode`'s size from state in
    * `ModalHostViewComponentDescriptor`.
    */
-  virtual void adopt(facebook::react::ShadowNode::Unshared const &shadowNode) const;
+  virtual void adopt(facebook::react::ShadowNode &shadowNode) const;
 
  private:
   winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder;

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -7,10 +7,12 @@
 #include <functional/functor.h>
 #include <inspectable.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProvider.h>
-#include <react/renderer/components/view/TouchEventEmitter.h>
+#include <react/renderer/components/view/ViewEventEmitter.h>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/LayoutMetrics.h>
 
+#include <winrt/Microsoft.ReactNative.Composition.Input.h>
+
 namespace Microsoft::ReactNative {
 
 enum class RNComponentViewUpdateMask : std::uint_fast8_t {
@@ -27,6 +29,17 @@ DEFINE_ENUM_FLAG_OPERATORS(RNComponentViewUpdateMask);
 
 struct RootComponentView;
 
+struct BringIntoViewOptions {
+  bool AnimationDesired{false};
+  // NaN will bring the element fully into view aligned to the nearest edge of the viewport
+  float HorizontalAlignmentRatio{std::numeric_limits<float>::quiet_NaN()};
+  float HorizontalOffset{0};
+  std::optional<facebook::react::Rect> TargetRect;
+  // NaN will bring the element fully into view aligned to the nearest edge of the viewport
+  float VerticalAlignmentRatio{std::numeric_limits<float>::quiet_NaN()};
+  float VerticalOffset{0};
+};
+
 struct IComponentView {
   virtual std::vector<facebook::react::ComponentDescriptorProvider>
   supplementalComponentDescriptorProviders() noexcept = 0;
@@ -56,13 +69,38 @@ struct IComponentView {
   virtual RECT getClientRect() const noexcept = 0;
   virtual void onFocusLost() noexcept = 0;
   virtual void onFocusGained() noexcept = 0;
+  virtual void onPointerEntered(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept = 0;
+  virtual void onPointerExited(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept = 0;
+  virtual void onPointerPressed(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept = 0;
+  virtual void onPointerReleased(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept = 0;
+  virtual void onPointerMoved(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept = 0;
+  virtual void onPointerWheelChanged(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept = 0;
+  virtual void onKeyDown(
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept = 0;
+  virtual void onKeyUp(
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept = 0;
   virtual bool focusable() const noexcept = 0;
-  virtual facebook::react::SharedTouchEventEmitter touchEventEmitterAtPoint(facebook::react::Point pt) noexcept = 0;
-  virtual facebook::react::SharedTouchEventEmitter touchEventEmitter() noexcept = 0;
+  virtual facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept = 0;
+  virtual facebook::react::SharedViewEventEmitter eventEmitter() noexcept = 0;
   virtual facebook::react::Tag tag() const noexcept = 0;
-  virtual facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept = 0;
+  // By default, hitTests according the pointerEvents prop on the Component.
+  // If ignorePointerEvents = true, all Components are treated as valid targets
+  virtual facebook::react::Tag hitTest(
+      facebook::react::Point pt,
+      facebook::react::Point &localPt,
+      bool ignorePointerEvents = false) const noexcept = 0;
   virtual int64_t sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept = 0;
   virtual winrt::IInspectable EnsureUiaProvider() noexcept = 0;
+  // Notify up the tree to bring the rect into view by scrolling as needed
+  virtual void StartBringIntoView(BringIntoViewOptions &&args) noexcept = 0;
 };
 
 // Run fn on all nodes of the component view tree starting from this one until fn returns true

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

@@ -13,23 +13,25 @@
 namespace Microsoft::ReactNative {
 
 AbiCompositionViewComponentView::AbiCompositionViewComponentView(
+    const winrt::Microsoft::ReactNative::IReactContext &reactContext,
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder)
     : Super(compContext, tag), m_builder(builder) {
   static auto const defaultProps = std::make_shared<AbiViewProps const>();
   m_props = defaultProps;
-  m_handle = Builder().CreateView(compContext);
+  m_handle = Builder().CreateView(reactContext, compContext);
   m_visual = Builder().CreateVisual(m_handle);
   OuterVisual().InsertAt(m_visual, 0);
 }
 
 std::shared_ptr<AbiCompositionViewComponentView> AbiCompositionViewComponentView::Create(
+    const winrt::Microsoft::ReactNative::IReactContext &reactContext,
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept {
   return std::shared_ptr<AbiCompositionViewComponentView>(
-      new AbiCompositionViewComponentView(compContext, tag, builder));
+      new AbiCompositionViewComponentView(reactContext, compContext, tag, builder));
 }
 
 winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder &
@@ -103,6 +105,56 @@ int64_t AbiCompositionViewComponentView::sendMessage(uint32_t msg, uint64_t wPar
   return Builder().SendMessage(m_handle, msg, wParam, lParam);
 }
 
+void AbiCompositionViewComponentView::onKeyDown(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  Builder().OnKeyDown(m_handle, source, args);
+  Super::onKeyDown(source, args);
+}
+
+void AbiCompositionViewComponentView::onKeyUp(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  Builder().OnKeyUp(m_handle, source, args);
+  Super::onKeyUp(source, args);
+}
+
+void AbiCompositionViewComponentView::onPointerEntered(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  Builder().OnPointerEntered(m_handle, args);
+  Super::onPointerEntered(args);
+}
+
+void AbiCompositionViewComponentView::onPointerExited(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  Builder().OnPointerExited(m_handle, args);
+  Super::onPointerExited(args);
+}
+
+void AbiCompositionViewComponentView::onPointerPressed(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  Builder().OnPointerPressed(m_handle, args);
+  Super::onPointerPressed(args);
+}
+
+void AbiCompositionViewComponentView::onPointerReleased(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  Builder().OnPointerReleased(m_handle, args);
+  Super::onPointerReleased(args);
+}
+
+void AbiCompositionViewComponentView::onPointerMoved(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  Builder().OnPointerMoved(m_handle, args);
+  Super::onPointerMoved(args);
+}
+
+void AbiCompositionViewComponentView::onPointerWheelChanged(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  Builder().OnPointerWheelChanged(m_handle, args);
+  Super::onPointerWheelChanged(args);
+}
+
 std::vector<facebook::react::ComponentDescriptorProvider>
 AbiCompositionViewComponentView::supplementalComponentDescriptorProviders() noexcept {
   return {};
@@ -119,10 +171,11 @@ winrt::Microsoft::ReactNative::Composition::IVisual AbiCompositionViewComponentV
 
 facebook::react::Tag AbiCompositionViewComponentView::hitTest(
     facebook::react::Point pt,
-    facebook::react::Point &localPt) const noexcept {
+    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};
 
-  if ((m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+  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) {

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

@@ -19,6 +19,7 @@ struct AbiCompositionViewComponentView : CompositionBaseComponentView {
   using Super = CompositionBaseComponentView;
 
   [[nodiscard]] static std::shared_ptr<AbiCompositionViewComponentView> Create(
+      const winrt::Microsoft::ReactNative::IReactContext &reactContext,
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept;
@@ -40,14 +41,34 @@ struct AbiCompositionViewComponentView : CompositionBaseComponentView {
   void prepareForRecycle() noexcept override;
   bool focusable() const noexcept override;
   int64_t sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept override;
+  void onKeyDown(
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
+  void onKeyUp(
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+      const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
+  void onPointerEntered(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void onPointerExited(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void onPointerPressed(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void onPointerReleased(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void onPointerMoved(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void onPointerWheelChanged(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
   std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
       override;
   facebook::react::Props::Shared props() noexcept override;
-  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
+  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
+      const noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
 
  private:
   AbiCompositionViewComponentView(
+      const winrt::Microsoft::ReactNative::IReactContext &reactContext,
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder);

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

@@ -0,0 +1,137 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ActivityIndicatorComponentView.h"
+#include "CompositionDynamicAutomationProvider.h"
+
+#include <Windows.UI.Composition.h>
+#include <Windows.h>
+#include "CompositionContextHelper.h"
+
+namespace Microsoft::ReactNative {
+
+std::shared_ptr<ActivityIndicatorComponentView> ActivityIndicatorComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  return std::shared_ptr<ActivityIndicatorComponentView>(
+      new ActivityIndicatorComponentView(compContext, tag, reactContext));
+}
+
+ActivityIndicatorComponentView::ActivityIndicatorComponentView(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : Super(compContext, tag), m_context(reactContext) {
+  m_props = std::make_shared<facebook::react::ActivityIndicatorViewProps const>();
+}
+
+void ActivityIndicatorComponentView::mountChildComponentView(
+    IComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+}
+
+void ActivityIndicatorComponentView::unmountChildComponentView(
+    IComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+}
+
+void ActivityIndicatorComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  Super::handleCommand(commandName, arg);
+}
+
+void ActivityIndicatorComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  const auto oldViewProps = std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(m_props);
+  const auto newViewProps = std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(props);
+
+  ensureVisual();
+
+  // update color if needed
+  if (newViewProps->color && (!oldProps || newViewProps->color != oldViewProps->color)) {
+    m_ActivityIndicatorVisual.Color(newViewProps->color.AsWindowsColor());
+  }
+
+  if (newViewProps->animating != oldViewProps->animating) {
+    m_ActivityIndicatorVisual.IsVisible(newViewProps->animating);
+  }
+
+  updateBorderProps(*oldViewProps, *newViewProps);
+  m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
+}
+
+void ActivityIndicatorComponentView::updateState(
+    facebook::react::State::Shared const &state,
+    facebook::react::State::Shared const &oldState) noexcept {}
+
+void ActivityIndicatorComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  // Set Position & Size Properties
+  ensureVisual();
+
+  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
+    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
+  }
+
+  updateBorderLayoutMetrics(layoutMetrics, *m_props);
+  m_layoutMetrics = layoutMetrics;
+
+  UpdateCenterPropertySet();
+  m_visual.Size(
+      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
+       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+}
+
+void ActivityIndicatorComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
+
+void ActivityIndicatorComponentView::prepareForRecycle() noexcept {}
+
+facebook::react::Props::Shared ActivityIndicatorComponentView::props() noexcept {
+  return m_props;
+}
+
+void ActivityIndicatorComponentView::ensureVisual() noexcept {
+  if (!m_visual) {
+    m_visual = m_compContext.CreateSpriteVisual();
+    m_ActivityIndicatorVisual = m_compContext.CreateActivityVisual(); // creates COM control
+
+    OuterVisual().InsertAt(m_ActivityIndicatorVisual, 0);
+    OuterVisual().InsertAt(m_visual, 0);
+  }
+}
+
+facebook::react::Tag ActivityIndicatorComponentView::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};
+
+  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;
+}
+
+winrt::Microsoft::ReactNative::Composition::IVisual ActivityIndicatorComponentView::Visual() const noexcept {
+  return m_visual;
+}
+
+bool ActivityIndicatorComponentView::focusable() const noexcept {
+  return false;
+}
+
+std::string ActivityIndicatorComponentView::DefaultControlType() const noexcept {
+  return "progressbar";
+}
+
+} // namespace Microsoft::ReactNative

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

@@ -0,0 +1,59 @@
+// 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 ActivityIndicatorComponentView;
+
+struct ActivityIndicatorComponentView : CompositionBaseComponentView {
+  using Super = CompositionBaseComponentView;
+
+  [[nodiscard]] static std::shared_ptr<ActivityIndicatorComponentView> Create(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
+
+  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
+  void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) 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(RNComponentViewUpdateMask updateMask) noexcept override;
+  void prepareForRecycle() noexcept override;
+  facebook::react::Props::Shared props() noexcept override;
+  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::IVisual Visual() const noexcept override;
+  virtual std::string DefaultControlType() const noexcept;
+
+ private:
+  ActivityIndicatorComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+
+  void ensureVisual() noexcept;
+
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IActivityVisual m_ActivityIndicatorVisual{nullptr};
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+  facebook::react::SharedViewProps m_props;
+};
+
+} // namespace Microsoft::ReactNative

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

@@ -20,6 +20,7 @@
 #include <react/renderer/components/view/ViewShadowNode.h>
 
 #include <Fabric/Composition/AbiCompositionViewComponentView.h>
+#include <Fabric/Composition/ActivityIndicatorComponentView.h>
 #include <Fabric/Composition/CompositionHelpers.h>
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ImageComponentView.h>
@@ -57,8 +58,10 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
     view = WindowsTextInputComponentView::Create(compContext, tag, m_context);
   } else if (componentHandle == facebook::react::SwitchShadowNode::Handle()) {
     view = SwitchComponentView::Create(compContext, tag, m_context);
+  } else if (componentHandle == facebook::react::ActivityIndicatorViewShadowNode::Handle()) {
+    view = ActivityIndicatorComponentView::Create(compContext, tag, m_context);
   } else if (componentHandle == facebook::react::RootShadowNode::Handle()) {
-    view = RootComponentView::Create(compContext, tag);
+    view = RootComponentView::Create(compContext, tag, m_context);
   } else if (
       componentHandle == facebook::react::RawTextShadowNode::Handle() ||
       componentHandle == facebook::react::TextShadowNode::Handle()) {
@@ -70,7 +73,10 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
     auto descriptor =
         WindowsComponentDescriptorRegistry::FromProperties(m_context.Properties())->GetDescriptor(componentHandle);
     view = AbiCompositionViewComponentView::Create(
-        compContext, tag, descriptor.as<winrt::Microsoft::ReactNative::IReactViewComponentBuilder>());
+        m_context.Handle(),
+        compContext,
+        tag,
+        descriptor.as<winrt::Microsoft::ReactNative::IReactViewComponentBuilder>());
   }
 
   auto it = m_registry.insert({tag, ComponentViewDescriptor{view}});