react-native-windows 0.73.10 → 0.74.0-preview.1

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

@@ -6,6 +6,10 @@
 
 #include "CompositionViewComponentView.h"
 
+#include <Fabric/AbiState.h>
+#include <Fabric/AbiViewProps.h>
+#include <Fabric/Composition/CompositionRootView.h>
+#include <Fabric/FabricUIManagerModule.h>
 #include <UI.Xaml.Controls.h>
 #include <Utils/KeyboardUtils.h>
 #include <Utils/ValueUtils.h>
@@ -15,82 +19,163 @@
 #include "CompositionDynamicAutomationProvider.h"
 #include "CompositionHelpers.h"
 #include "RootComponentView.h"
+#include "Theme.h"
 #include "UiaHelpers.h"
 #include "d2d1helper.h"
 
-namespace Microsoft::ReactNative {
+#include "Composition.ComponentView.g.cpp"
+#include "Composition.ViewComponentView.g.cpp"
 
-CompositionBaseComponentView::CompositionBaseComponentView(
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+CreateCompositionComponentViewArgs::CreateCompositionComponentViewArgs(
+    const winrt::Microsoft::ReactNative::IReactContext &reactContext,
+    facebook::react::Tag tag,
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compositionContext)
+    : base_type(reactContext, tag), m_compositionContext(compositionContext){};
+
+winrt::Microsoft::ReactNative::Composition::ICompositionContext CreateCompositionComponentViewArgs::CompositionContext()
+    const noexcept {
+  return m_compositionContext;
+}
+
+ComponentViewFeatures CreateCompositionComponentViewArgs::Features() const noexcept {
+  return m_features;
+}
+
+void CreateCompositionComponentViewArgs::Features(ComponentViewFeatures value) noexcept {
+  m_features = value;
+}
+
+ComponentView::ComponentView(const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
+    : ComponentView(args.CompositionContext(), args.Tag(), args.ReactContext(), args.Features(), true) {}
+
+ComponentView::ComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    facebook::react::Tag tag)
-    : m_tag(tag), m_compContext(compContext) {
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+    ComponentViewFeatures flags,
+    bool customControl)
+    : base_type(tag, reactContext, customControl), m_compContext(compContext), m_flags(flags) {
   m_outerVisual = compContext.CreateSpriteVisual(); // TODO could be a raw ContainerVisual if we had a
                                                     // CreateContainerVisual in ICompositionContext
   m_focusVisual = compContext.CreateFocusVisual();
   m_outerVisual.InsertAt(m_focusVisual.InnerVisual(), 0);
 }
 
-facebook::react::Tag CompositionBaseComponentView::tag() const noexcept {
+facebook::react::Tag ComponentView::Tag() const noexcept {
   return m_tag;
 }
 
-RootComponentView *CompositionBaseComponentView::rootComponentView() noexcept {
-  if (m_parent)
-    return m_parent->rootComponentView();
+facebook::react::Props::Shared ComponentView::props() noexcept {
+  return viewProps();
+}
 
-  return nullptr;
+void ComponentView::onThemeChanged() noexcept {
+  if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
+    if (viewProps()->backgroundColor) {
+      Visual().as<ISpriteVisual>().Brush(theme()->Brush(*viewProps()->backgroundColor));
+    } else {
+      Visual().as<ISpriteVisual>().Brush(nullptr);
+    }
+  }
+
+  if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
+    m_needsBorderUpdate = true;
+    finalizeBorderUpdates(m_layoutMetrics, *viewProps());
+  }
+
+  if ((m_flags & ComponentViewFeatures::ShadowProps) == ComponentViewFeatures::ShadowProps) {
+    applyShadowProps(*viewProps());
+  }
+
+  base_type::onThemeChanged();
+
+  if (m_customComponent) {
+    // Review is it expected that I need this cast to call overridden methods?
+    winrt::Microsoft::ReactNative::Composition::ComponentView outer(*this);
+    outer.OnThemeChanged();
+  }
 }
 
-const std::vector<IComponentView *> &CompositionBaseComponentView::children() const noexcept {
-  return m_children;
+void ComponentView::OnThemeChanged() noexcept {}
+
+void ComponentView::Theme(const winrt::Microsoft::ReactNative::Composition::Theme &value) noexcept {
+  theme(winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(value));
+}
+
+winrt::Microsoft::ReactNative::Composition::Theme ComponentView::Theme() const noexcept {
+  return theme()->get_strong().as<winrt::Microsoft::ReactNative::Composition::Theme>();
 }
 
-void CompositionBaseComponentView::parent(IComponentView *parent) noexcept {
-  if (!parent) {
-    auto root = rootComponentView();
-    if (root && root->GetFocusedComponent() == this) {
-      root->SetFocusedComponent(nullptr); // TODO need move focus logic - where should focus go?
+winrt::Microsoft::ReactNative::Composition::ICompositionContext ComponentView::CompositionContext() const noexcept {
+  return m_compContext;
+}
+
+void ComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  const auto &oldViewProps = *viewProps();
+  const auto &newViewProps = *std::static_pointer_cast<const facebook::react::ViewProps>(props);
+
+  if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
+    if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
+      if (newViewProps.backgroundColor) {
+        Visual().as<ISpriteVisual>().Brush(theme()->Brush(*newViewProps.backgroundColor));
+      } else {
+        Visual().as<ISpriteVisual>().Brush(nullptr);
+      }
     }
   }
 
-  m_parent = parent;
+  if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
+    updateBorderProps(oldViewProps, newViewProps);
+  }
+  if ((m_flags & ComponentViewFeatures::ShadowProps) == ComponentViewFeatures::ShadowProps) {
+    updateShadowProps(oldViewProps, newViewProps);
+  }
+
+  base_type::updateProps(props, oldProps);
 }
 
-IComponentView *CompositionBaseComponentView::parent() const noexcept {
-  return m_parent;
+void ComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
+    updateBorderLayoutMetrics(layoutMetrics, *viewProps());
+  }
+
+  m_layoutMetrics = layoutMetrics;
+  UpdateCenterPropertySet();
+
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
 }
 
-bool CompositionBaseComponentView::runOnChildren(bool forward, Mso::Functor<bool(IComponentView &)> &fn) noexcept {
-  if (forward) {
-    for (auto it = m_children.begin(); it != m_children.end(); ++it) {
-      if (fn(**it))
-        return true;
-    }
-  } else {
-    for (auto it = m_children.rbegin(); it != m_children.rend(); ++it) {
-      if (fn(**it))
-        return true;
-    }
+void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
+  if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
+    finalizeBorderUpdates(m_layoutMetrics, *viewProps());
   }
-  return false;
+
+  base_type::FinalizeUpdates(updateMask);
 }
 
-void CompositionBaseComponentView::onFocusLost() noexcept {
+void ComponentView::onFocusLost() noexcept {
   m_eventEmitter->onBlur();
   showFocusVisual(false);
-  if (UiaClientsAreListening()) {
+  if (m_uiaProvider) {
     winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-        EnsureUiaProvider(), UIA_HasKeyboardFocusPropertyId, true, false);
+        m_uiaProvider, UIA_HasKeyboardFocusPropertyId, true, false);
   }
+  base_type::onFocusLost();
 }
 
-void CompositionBaseComponentView::onFocusGained() noexcept {
+void ComponentView::onFocusGained() noexcept {
   m_eventEmitter->onFocus();
   if (m_enableFocusVisual) {
     showFocusVisual(true);
   }
-  if (UiaClientsAreListening()) {
-    auto spProviderSimple = EnsureUiaProvider().try_as<IRawElementProviderSimple>();
+  if (m_uiaProvider) {
+    auto spProviderSimple = m_uiaProvider.try_as<IRawElementProviderSimple>();
     if (spProviderSimple != nullptr) {
       winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
           m_uiaProvider, UIA_HasKeyboardFocusPropertyId, false, true);
@@ -99,9 +184,11 @@ void CompositionBaseComponentView::onFocusGained() noexcept {
   }
 
   StartBringIntoView({});
+  base_type::onFocusGained();
 }
 
-void CompositionBaseComponentView::StartBringIntoView(BringIntoViewOptions &&options) noexcept {
+void ComponentView::StartBringIntoView(
+    winrt::Microsoft::ReactNative::implementation::BringIntoViewOptions &&options) noexcept {
   if (!options.TargetRect) {
     // Default to bring the entire of this component into view
     options.TargetRect = {
@@ -113,23 +200,25 @@ void CompositionBaseComponentView::StartBringIntoView(BringIntoViewOptions &&opt
   if (m_parent) {
     options.TargetRect->origin.y += m_layoutMetrics.frame.origin.y * m_layoutMetrics.pointScaleFactor;
     options.TargetRect->origin.x += m_layoutMetrics.frame.origin.x * m_layoutMetrics.pointScaleFactor;
-    m_parent->StartBringIntoView(std::move(options));
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->StartBringIntoView(
+        std::move(options));
   }
 }
 
-void CompositionBaseComponentView::updateEventEmitter(
-    facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
+void ComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
   m_eventEmitter = std::static_pointer_cast<facebook::react::ViewEventEmitter const>(eventEmitter);
 }
 
-void CompositionBaseComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
-  if (commandName == "focus") {
+void ComponentView::HandleCommand(
+    winrt::hstring commandName,
+    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+  if (commandName == L"focus") {
     if (auto root = rootComponentView()) {
-      root->SetFocusedComponent(this);
+      root->SetFocusedComponent(*get_strong());
     }
     return;
   }
-  if (commandName == "blur") {
+  if (commandName == L"blur") {
     if (auto root = rootComponentView()) {
       root->SetFocusedComponent(nullptr); // Todo store this component as previously focused element
     }
@@ -138,89 +227,76 @@ void CompositionBaseComponentView::handleCommand(std::string const &commandName,
   assert(false); // Unhandled command
 }
 
-int64_t CompositionBaseComponentView::sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
-  return 0;
-}
-
-void CompositionBaseComponentView::onKeyDown(
-    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
-    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onKeyDown(source, args);
-  }
-}
+bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {
+  auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_reactContext.Properties());
+  if (uiManager == nullptr)
+    return false;
 
-void CompositionBaseComponentView::onKeyUp(
-    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
-    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onKeyUp(source, args);
-  }
-}
+  auto root = rootComponentView();
+  if (!root)
+    return false;
 
-void CompositionBaseComponentView::onPointerEntered(
-    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onPointerEntered(args);
+  auto rootView = uiManager->GetCompositionRootView(root->Tag());
+  if (!rootView) {
+    return false;
   }
-}
 
-void CompositionBaseComponentView::onPointerExited(
-    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onPointerExited(args);
-  }
+  return winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(rootView)->CapturePointer(
+      pointer, static_cast<facebook::react::Tag>(Tag()));
 }
 
-void CompositionBaseComponentView::onPointerPressed(
-    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onPointerPressed(args);
-  }
-}
+void ComponentView::ReleasePointerCapture(
+    const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {
+  auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_reactContext.Properties());
+  if (uiManager == nullptr)
+    return;
 
-void CompositionBaseComponentView::onPointerReleased(
-    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onPointerReleased(args);
-  }
-}
+  auto root = rootComponentView();
+  if (!root)
+    return;
 
-void CompositionBaseComponentView::onPointerMoved(
-    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onPointerMoved(args);
+  auto rootView = uiManager->GetCompositionRootView(root->Tag());
+  if (!rootView) {
+    return;
   }
-}
 
-void CompositionBaseComponentView::onPointerWheelChanged(
-    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
-  if (m_parent && !args.Handled()) {
-    m_parent->onPointerWheelChanged(args);
-  }
+  return winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(rootView)
+      ->ReleasePointerCapture(pointer, static_cast<facebook::react::Tag>(Tag()));
 }
 
-RECT CompositionBaseComponentView::getClientRect() const noexcept {
+RECT ComponentView::getClientRect() const noexcept {
   RECT rc{0};
+  facebook::react::Point parentOffset{0};
   if (m_parent) {
-    rc = m_parent->getClientRect();
+    parentOffset =
+        winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->getClientOffset();
   }
 
-  rc.left += static_cast<LONG>(m_layoutMetrics.frame.origin.x * m_layoutMetrics.pointScaleFactor);
-  rc.top += static_cast<LONG>(m_layoutMetrics.frame.origin.y * m_layoutMetrics.pointScaleFactor);
+  rc.left = static_cast<LONG>((m_layoutMetrics.frame.origin.x * m_layoutMetrics.pointScaleFactor) + parentOffset.x);
+  rc.top += static_cast<LONG>((m_layoutMetrics.frame.origin.y * m_layoutMetrics.pointScaleFactor) + parentOffset.y);
   rc.right = rc.left + static_cast<LONG>(m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor);
   rc.bottom = rc.top + static_cast<LONG>(m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor);
   return rc;
 }
 
-const facebook::react::SharedViewEventEmitter &CompositionBaseComponentView::GetEventEmitter() const noexcept {
+facebook::react::Point ComponentView::getClientOffset() const noexcept {
+  facebook::react::Point parentOffset{0};
+  if (m_parent) {
+    parentOffset =
+        winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->getClientOffset();
+  }
+
+  return {
+      (m_layoutMetrics.frame.origin.x * m_layoutMetrics.pointScaleFactor) + parentOffset.x,
+      (m_layoutMetrics.frame.origin.y * m_layoutMetrics.pointScaleFactor) + parentOffset.y};
+}
+
+const facebook::react::SharedViewEventEmitter &ComponentView::GetEventEmitter() const noexcept {
   return m_eventEmitter;
 }
 
-std::array<
-    winrt::Microsoft::ReactNative::Composition::ISpriteVisual,
-    CompositionBaseComponentView::SpecialBorderLayerCount>
-CompositionBaseComponentView::FindSpecialBorderLayers() const noexcept {
+std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, ComponentView::SpecialBorderLayerCount>
+ComponentView::FindSpecialBorderLayers() const noexcept {
   std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> layers{
       nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr};
 
@@ -257,7 +333,7 @@ static winrt::com_ptr<ID2D1PathGeometry> GenerateRoundedRectPathGeometry(
     const facebook::react::RectangleEdges<float> &rectPathGeometry) noexcept {
   winrt::com_ptr<ID2D1PathGeometry> pathGeometry;
   winrt::com_ptr<ID2D1Factory1> spD2dFactory;
-  compContext.as<Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
+  compContext.as<::Microsoft::ReactNative::Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
 
   // Create a path geometry.
   HRESULT hr = spD2dFactory->CreatePathGeometry(pathGeometry.put());
@@ -472,7 +548,7 @@ void DrawShape(
 }
 
 struct AutoDrawHelper {
-  AutoDrawHelper(winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> &surface) {
+  AutoDrawHelper(winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> &surface) {
     m_surface = surface;
     m_surface->BeginDraw(m_pRT.put(), &m_offset);
   }
@@ -490,17 +566,18 @@ struct AutoDrawHelper {
   }
 
  private:
-  winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> m_surface;
+  winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> m_surface;
   POINT m_offset;
   winrt::com_ptr<ID2D1DeviceContext> m_pRT;
 };
 
 template <typename TShape>
 void SetBorderLayerPropertiesCommon(
+    winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
     winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     winrt::Microsoft::ReactNative::Composition::ISpriteVisual &layer,
     TShape &shape,
-    winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
+    winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
     const D2D1_RECT_F &textureRect,
     facebook::react::Point anchorPoint,
     facebook::react::Point anchorOffset,
@@ -509,7 +586,9 @@ void SetBorderLayerPropertiesCommon(
     FLOAT strokeWidth,
     const facebook::react::SharedColor &borderColor,
     facebook::react::BorderStyle borderStyle) {
-  if ((textureRect.right - textureRect.left) <= 0 && (textureRect.bottom - textureRect.top) <= 0)
+  layer.Offset({anchorOffset.x, anchorOffset.y, 0}, {anchorPoint.x, anchorPoint.y, 0});
+  layer.RelativeSizeWithOffset(size, relativeSizeAdjustment);
+  if ((textureRect.right - textureRect.left) <= 0 || (textureRect.bottom - textureRect.top) <= 0)
     return;
 
   auto surface = compContext.CreateDrawingSurfaceBrush(
@@ -519,8 +598,6 @@ void SetBorderLayerPropertiesCommon(
   surface.as(borderTexture);
 
   layer.Brush(surface);
-  layer.Offset({anchorOffset.x, anchorOffset.y, 0}, {anchorPoint.x, anchorPoint.y, 0});
-  layer.RelativeSizeWithOffset(size, relativeSizeAdjustment);
 
   AutoDrawHelper autoDraw(borderTexture);
 
@@ -544,7 +621,7 @@ void SetBorderLayerPropertiesCommon(
     return;
 
   winrt::com_ptr<ID2D1SolidColorBrush> spBorderBrush;
-  pRT->CreateSolidColorBrush(borderColor.AsD2DColor(), spBorderBrush.put());
+  pRT->CreateSolidColorBrush(theme->D2DColor(*borderColor), spBorderBrush.put());
   assert(spBorderBrush);
   if (spBorderBrush == nullptr)
     return;
@@ -586,10 +663,11 @@ void SetBorderLayerPropertiesCommon(
 
 template <typename TShape>
 void SetBorderLayerProperties(
+    winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
     winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     winrt::Microsoft::ReactNative::Composition::ISpriteVisual &layer,
     TShape &shape,
-    winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
+    winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
     const D2D1_RECT_F &textureRect,
     facebook::react::Point anchorPoint,
     facebook::react::Point anchorOffset,
@@ -600,6 +678,7 @@ void SetBorderLayerProperties(
     facebook::react::BorderStyle borderStyle) {
   if constexpr (!std::is_base_of_v<ID2D1GeometryGroup, TShape>) {
     SetBorderLayerPropertiesCommon(
+        theme,
         compContext,
         layer,
         shape,
@@ -618,22 +697,23 @@ void SetBorderLayerProperties(
       layer.Offset({anchorOffset.x, anchorOffset.y, 0}, {anchorPoint.x, anchorPoint.y, 0});
       layer.Size({textureRect.right - textureRect.left, textureRect.bottom - textureRect.top});
 
-      layer.Brush(compContext.CreateColorBrush(borderColor.AsWindowsColor()));
+      layer.Brush(theme->Brush(*borderColor));
 
       winrt::com_ptr<ID2D1Factory1> spD2dFactory;
-      compContext.as<Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
+      compContext.as<::Microsoft::ReactNative::Composition::ICompositionContextInterop>()->D2DFactory(
+          spD2dFactory.put());
 
       winrt::com_ptr<ID2D1TransformedGeometry> transformedShape;
       D2D1::Matrix3x2F translationTransform = D2D1::Matrix3x2F::Translation(-textureRect.left, -textureRect.top);
       winrt::check_hresult(
           spD2dFactory->CreateTransformedGeometry(&shape, &translationTransform, transformedShape.put()));
 
-      layer.as<Composition::IVisualInterop>()->SetClippingPath(transformedShape.get());
+      layer.as<::Microsoft::ReactNative::Composition::IVisualInterop>()->SetClippingPath(transformedShape.get());
     }
     /*
                 else
                 {
-                        SetBorderLayerPropertiesCommon(comContext, layer, shape, borderTexture, textureRect,
+                        SetBorderLayerPropertiesCommon(theme, comContext, layer, shape, borderTexture, textureRect,
        anchorPoint, anchorOffset, strokeWidth, borderColor, borderStyle);
                 }
     */
@@ -650,10 +730,10 @@ const float Bottom = 1.0;
 
 template <typename TShape>
 void DrawAllBorderLayers(
+    winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
     winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    std::array<
-        winrt::Microsoft::ReactNative::Composition::ISpriteVisual,
-        CompositionBaseComponentView::SpecialBorderLayerCount> &spBorderLayers,
+    std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, ComponentView::SpecialBorderLayerCount>
+        &spBorderLayers,
     TShape &shape,
     const facebook::react::BorderWidths &borderWidths,
     const facebook::react::BorderRadii &borderRadii,
@@ -662,12 +742,13 @@ void DrawAllBorderLayers(
     const facebook::react::BorderColors &borderColors,
     facebook::react::BorderStyle borderStyle) {
   // Now that we've drawn our nice border in one layer, split it into its component layers
-  winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop>
-      spTextures[CompositionBaseComponentView::SpecialBorderLayerCount];
+  winrt::com_ptr<::Microsoft::ReactNative::Composition::ICompositionDrawingSurfaceInterop>
+      spTextures[ComponentView::SpecialBorderLayerCount];
 
   // Set component border properties
   // Top Left Corner
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[0],
       shape,
@@ -686,6 +767,7 @@ void DrawAllBorderLayers(
 
   // Top Edge Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[1],
       shape,
@@ -705,6 +787,7 @@ void DrawAllBorderLayers(
 
   // Top Right Corner Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[2],
       shape,
@@ -723,6 +806,7 @@ void DrawAllBorderLayers(
 
   // Right Edge Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[3],
       shape,
@@ -742,6 +826,7 @@ void DrawAllBorderLayers(
 
   // Bottom Right Corner Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[4],
       shape,
@@ -760,6 +845,7 @@ void DrawAllBorderLayers(
 
   // Bottom Edge Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[5],
       shape,
@@ -779,6 +865,7 @@ void DrawAllBorderLayers(
 
   // Bottom Left Corner Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[6],
       shape,
@@ -797,6 +884,7 @@ void DrawAllBorderLayers(
 
   // Left Edge Border
   SetBorderLayerProperties(
+      theme,
       compContext,
       spBorderLayers[7],
       shape,
@@ -868,7 +956,7 @@ winrt::com_ptr<ID2D1GeometryGroup> GetGeometryForRoundedBorder(
 
   ID2D1Geometry *ppGeometries[] = {outerPathGeometry.get(), innerPathGeometry.get()};
   winrt::com_ptr<ID2D1Factory1> spD2dFactory;
-  compContext.as<Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
+  compContext.as<::Microsoft::ReactNative::Composition::ICompositionContextInterop>()->D2DFactory(spD2dFactory.put());
 
   winrt::com_ptr<ID2D1GeometryGroup> geometryGroup = nullptr;
   // Create a geometry group.
@@ -946,7 +1034,8 @@ facebook::react::BorderMetrics resolveAndAlignBorderMetrics(
   return borderMetrics;
 }
 
-bool CompositionBaseComponentView::TryUpdateSpecialBorderLayers(
+bool ComponentView::TryUpdateSpecialBorderLayers(
+    winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
     std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> &spBorderVisuals,
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
@@ -990,6 +1079,7 @@ bool CompositionBaseComponentView::TryUpdateSpecialBorderLayers(
 
       if (pathGeometry) {
         DrawAllBorderLayers(
+            theme,
             m_compContext,
             spBorderVisuals,
             *pathGeometry,
@@ -1013,6 +1103,7 @@ bool CompositionBaseComponentView::TryUpdateSpecialBorderLayers(
           rectPathGeometry);
 
       DrawAllBorderLayers(
+          theme,
           m_compContext,
           spBorderVisuals,
           *pathGeometry,
@@ -1032,6 +1123,7 @@ bool CompositionBaseComponentView::TryUpdateSpecialBorderLayers(
         extentWidth - (borderMetrics.borderWidths.right / 2.0f),
         extentHeight - (borderMetrics.borderWidths.bottom / 2.0f)};
     DrawAllBorderLayers(
+        theme,
         m_compContext,
         spBorderVisuals,
         rectShape,
@@ -1045,12 +1137,17 @@ bool CompositionBaseComponentView::TryUpdateSpecialBorderLayers(
   return true;
 }
 
-void CompositionBaseComponentView::UpdateSpecialBorderLayers(
+void ComponentView::finalizeBorderUpdates(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
+  if (!m_needsBorderUpdate || theme()->IsEmpty()) {
+    return;
+  }
+
+  m_needsBorderUpdate = false;
   auto spBorderLayers = FindSpecialBorderLayers();
 
-  if (!TryUpdateSpecialBorderLayers(spBorderLayers, layoutMetrics, viewProps)) {
+  if (!TryUpdateSpecialBorderLayers(theme(), spBorderLayers, layoutMetrics, viewProps)) {
     for (auto &spBorderLayer : spBorderLayers) {
       if (spBorderLayer) {
         spBorderLayer.as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>().Brush(nullptr);
@@ -1059,11 +1156,11 @@ void CompositionBaseComponentView::UpdateSpecialBorderLayers(
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual CompositionBaseComponentView::OuterVisual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::IVisual ComponentView::OuterVisual() const noexcept {
   return m_outerVisual ? m_outerVisual : Visual();
 }
 
-void CompositionBaseComponentView::showFocusVisual(bool show) noexcept {
+void ComponentView::showFocusVisual(bool show) noexcept {
   if (show) {
     assert(m_enableFocusVisual);
     m_focusVisual.IsFocused(true);
@@ -1072,11 +1169,12 @@ void CompositionBaseComponentView::showFocusVisual(bool show) noexcept {
   }
 }
 
-void CompositionBaseComponentView::updateBorderProps(
+void ComponentView::updateBorderProps(
     const facebook::react::ViewProps &oldViewProps,
     const facebook::react::ViewProps &newViewProps) noexcept {
   if (oldViewProps.borderColors != newViewProps.borderColors || oldViewProps.borderRadii != newViewProps.borderRadii ||
-      !(oldViewProps.yogaStyle.border() == newViewProps.yogaStyle.border()) ||
+      !(oldViewProps.yogaStyle.border(facebook::yoga::Edge::All) ==
+        newViewProps.yogaStyle.border(facebook::yoga::Edge::All)) ||
       oldViewProps.borderStyles != newViewProps.borderStyles) {
     m_needsBorderUpdate = true;
   }
@@ -1087,28 +1185,31 @@ void CompositionBaseComponentView::updateBorderProps(
   }
 }
 
-void CompositionBaseComponentView::updateShadowProps(
+void ComponentView::updateShadowProps(
     const facebook::react::ViewProps &oldViewProps,
-    const facebook::react::ViewProps &newViewProps,
-    winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept {
+    const facebook::react::ViewProps &newViewProps) noexcept {
   // Shadow Properties
   if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
       oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
       oldViewProps.shadowRadius != newViewProps.shadowRadius) {
-    auto shadow = m_compContext.CreateDropShadow();
-    shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
-    shadow.Opacity(newViewProps.shadowOpacity);
-    shadow.BlurRadius(newViewProps.shadowRadius);
-    if (newViewProps.shadowColor)
-      shadow.Color(newViewProps.shadowColor.AsWindowsColor());
-    m_visual.Shadow(shadow);
+    applyShadowProps(newViewProps);
   }
 }
 
-void CompositionBaseComponentView::updateTransformProps(
+void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps) noexcept {
+  auto shadow = m_compContext.CreateDropShadow();
+  shadow.Offset({viewProps.shadowOffset.width, viewProps.shadowOffset.height, 0});
+  shadow.Opacity(viewProps.shadowOpacity);
+  shadow.BlurRadius(viewProps.shadowRadius);
+  if (viewProps.shadowColor)
+    shadow.Color(theme()->Color(*viewProps.shadowColor));
+  Visual().as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>().Shadow(shadow);
+}
+
+void ComponentView::updateTransformProps(
     const facebook::react::ViewProps &oldViewProps,
     const facebook::react::ViewProps &newViewProps,
-    winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept {
+    winrt::Microsoft::ReactNative::Composition::IVisual visual) noexcept {
   // check for backfaceVisibility prop
   if (oldViewProps.backfaceVisibility != newViewProps.backfaceVisibility) {
     static_assert(
@@ -1123,7 +1224,7 @@ void CompositionBaseComponentView::updateTransformProps(
         static_cast<facebook::react::BackfaceVisibility>(
             winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Hidden) ==
         facebook::react::BackfaceVisibility::Hidden);
-    m_visual.BackfaceVisibility(
+    visual.BackfaceVisibility(
         static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(newViewProps.backfaceVisibility));
   }
 
@@ -1148,62 +1249,74 @@ void CompositionBaseComponentView::updateTransformProps(
     transformMatrix.m44 = newViewProps.transform.matrix[15];
 
     auto centerPointPropSet = EnsureCenterPointPropertySet();
-    centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
+    if (centerPointPropSet) {
+      centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
+    }
 
     EnsureTransformMatrixFacade();
   }
 }
 
-void CompositionBaseComponentView::updateAccessibilityProps(
+void ComponentView::updateAccessibilityProps(
     const facebook::react::ViewProps &oldViewProps,
     const facebook::react::ViewProps &newViewProps) noexcept {
-  if (!UiaClientsAreListening())
+  if (!m_uiaProvider)
     return;
 
-  auto provider = EnsureUiaProvider();
-
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider, UIA_IsKeyboardFocusablePropertyId, oldViewProps.focusable, newViewProps.focusable);
+      m_uiaProvider, UIA_IsKeyboardFocusablePropertyId, oldViewProps.focusable, newViewProps.focusable);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider,
+      m_uiaProvider,
       UIA_NamePropertyId,
       oldViewProps.accessibilityLabel,
       newViewProps.accessibilityLabel.empty() ? DefaultAccessibleName() : newViewProps.accessibilityLabel);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider,
+      m_uiaProvider,
       UIA_IsContentElementPropertyId,
       (oldViewProps.accessible && oldViewProps.accessibilityRole != "none"),
       (newViewProps.accessible && newViewProps.accessibilityRole != "none"));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider,
+      m_uiaProvider,
       UIA_IsControlElementPropertyId,
       (oldViewProps.accessible && oldViewProps.accessibilityRole != "none"),
       (newViewProps.accessible && newViewProps.accessibilityRole != "none"));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider,
+      m_uiaProvider,
       UIA_IsEnabledPropertyId,
-      !oldViewProps.accessibilityState.disabled,
-      !newViewProps.accessibilityState.disabled);
+      !(oldViewProps.accessibilityState && oldViewProps.accessibilityState->disabled),
+      !(newViewProps.accessibilityState && newViewProps.accessibilityState->disabled));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider, UIA_ControlTypePropertyId, oldViewProps.accessibilityRole, newViewProps.accessibilityRole);
+      m_uiaProvider, UIA_ControlTypePropertyId, oldViewProps.accessibilityRole, newViewProps.accessibilityRole);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      provider, UIA_HelpTextPropertyId, oldViewProps.accessibilityHint, newViewProps.accessibilityHint);
+      m_uiaProvider, UIA_HelpTextPropertyId, oldViewProps.accessibilityHint, newViewProps.accessibilityHint);
 }
 
-void CompositionBaseComponentView::updateBorderLayoutMetrics(
+std::optional<std::string> ComponentView::getAcccessiblityValue() noexcept {
+  return std::static_pointer_cast<const facebook::react::ViewProps>(props())->accessibilityValue.text;
+}
+
+void ComponentView::setAcccessiblityValue(std::string &&value) noexcept {
+  // no-op
+}
+
+bool ComponentView::getAcccessiblityIsReadOnly() noexcept {
+  return true;
+}
+
+void ComponentView::updateBorderLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
   if (borderMetrics.borderRadii.topLeft == 0 && borderMetrics.borderRadii.topRight == 0 &&
       borderMetrics.borderRadii.bottomLeft == 0 && borderMetrics.borderRadii.bottomRight == 0) {
-    Visual().as<Composition::IVisualInterop>()->SetClippingPath(nullptr);
+    Visual().as<::Microsoft::ReactNative::Composition::IVisualInterop>()->SetClippingPath(nullptr);
   } else {
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = GenerateRoundedRectPathGeometry(
         m_compContext,
@@ -1214,7 +1327,7 @@ void CompositionBaseComponentView::updateBorderLayoutMetrics(
          layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
          layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
 
-    Visual().as<Composition::IVisualInterop>()->SetClippingPath(pathGeometry.get());
+    Visual().as<::Microsoft::ReactNative::Composition::IVisualInterop>()->SetClippingPath(pathGeometry.get());
   }
 
   if (m_layoutMetrics != layoutMetrics) {
@@ -1232,18 +1345,18 @@ void CompositionBaseComponentView::updateBorderLayoutMetrics(
   });
 }
 
-void CompositionBaseComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {
+void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {
   index += m_numBorderVisuals;
 }
 
-void CompositionBaseComponentView::OnRenderingDeviceLost() noexcept {}
+void ComponentView::OnRenderingDeviceLost() noexcept {}
 
 std::vector<facebook::react::ComponentDescriptorProvider>
-CompositionBaseComponentView::supplementalComponentDescriptorProviders() noexcept {
+ComponentView::supplementalComponentDescriptorProviders() noexcept {
   return {};
 }
 
-comp::CompositionPropertySet CompositionBaseComponentView::EnsureCenterPointPropertySet() noexcept {
+comp::CompositionPropertySet ComponentView::EnsureCenterPointPropertySet() noexcept {
   if (m_centerPropSet == nullptr) {
     if (auto compositor =
             winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerCompositor(m_compContext)) {
@@ -1266,7 +1379,7 @@ comp::CompositionPropertySet CompositionBaseComponentView::EnsureCenterPointProp
 //                  convert from px to dips "translation": An additional translation to apply to the to the visual in
 //                  addition to Offset.  This is used to apply any translation properties set, or animated
 //   "transform":   A transform to apply to the visual.  This transform is in dips.
-void CompositionBaseComponentView::UpdateCenterPropertySet() noexcept {
+void ComponentView::UpdateCenterPropertySet() noexcept {
   if (m_centerPropSet != nullptr) {
     m_centerPropSet.InsertVector3(
         L"center",
@@ -1284,7 +1397,7 @@ void CompositionBaseComponentView::UpdateCenterPropertySet() noexcept {
   }
 }
 
-void CompositionBaseComponentView::EnsureTransformMatrixFacade() noexcept {
+void ComponentView::EnsureTransformMatrixFacade() noexcept {
   if (m_hasTransformMatrixFacade)
     return;
   m_hasTransformMatrixFacade = true;
@@ -1301,98 +1414,139 @@ void CompositionBaseComponentView::EnsureTransformMatrixFacade() noexcept {
   }
 }
 
-facebook::react::SharedViewEventEmitter CompositionBaseComponentView::eventEmitter() noexcept {
+facebook::react::SharedViewEventEmitter ComponentView::eventEmitter() noexcept {
   return m_eventEmitter;
 }
 
-facebook::react::SharedViewEventEmitter CompositionBaseComponentView::eventEmitterAtPoint(
-    facebook::react::Point /*pt*/) noexcept {
+facebook::react::SharedViewEventEmitter ComponentView::eventEmitterAtPoint(facebook::react::Point /*pt*/) noexcept {
   return m_eventEmitter;
 }
 
-bool CompositionBaseComponentView::focusable() const noexcept {
+bool ComponentView::anyHitTestHelper(
+    facebook::react::Tag &targetTag,
+    facebook::react::Point &ptContent,
+    facebook::react::Point &localPt) const noexcept {
+  if (auto index = m_children.Size()) {
+    do {
+      index--;
+      targetTag = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_children.GetAt(index))
+                      ->hitTest(ptContent, localPt);
+      if (targetTag != -1) {
+        return true;
+      }
+    } while (index != 0);
+  }
+
   return false;
 }
 
-std::string CompositionBaseComponentView::DefaultControlType() const noexcept {
+std::string ComponentView::DefaultControlType() const noexcept {
   return "group";
 }
 
-std::string CompositionBaseComponentView::DefaultAccessibleName() const noexcept {
+std::string ComponentView::DefaultAccessibleName() const noexcept {
   return "";
 }
 
-std::string CompositionBaseComponentView::DefaultHelpText() const noexcept {
+std::string ComponentView::DefaultHelpText() const noexcept {
   return "";
 }
 
-CompositionViewComponentView::CompositionViewComponentView(
+ViewComponentView::ViewComponentView(
+    const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
+    : ViewComponentView(args.CompositionContext(), args.Tag(), args.ReactContext(), args.Features(), true) {}
+
+ViewComponentView::ViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    facebook::react::Tag tag)
-    : Super(compContext, tag) {
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+    ComponentViewFeatures flags,
+    bool customComponent)
+    : base_type(compContext, tag, reactContext, flags, customComponent) {
   static auto const defaultProps = std::make_shared<facebook::react::ViewProps const>();
   m_props = defaultProps;
-  m_visual = m_compContext.CreateSpriteVisual();
-  OuterVisual().InsertAt(m_visual, 0);
 }
 
-std::shared_ptr<CompositionViewComponentView> CompositionViewComponentView::Create(
+winrt::Microsoft::ReactNative::Composition::IVisual ViewComponentView::CreateVisual() noexcept {
+  return m_compContext.CreateSpriteVisual();
+}
+
+void ViewComponentView::ensureVisual() noexcept {
+  if (!m_visual) {
+    if (m_customComponent) {
+      // Review is it expected that I need this cast to call overridden methods?
+      winrt::Microsoft::ReactNative::Composition::ViewComponentView outer(*this);
+      m_visual = outer.CreateVisual();
+    } else {
+      m_visual = CreateVisual();
+    }
+    OuterVisual().InsertAt(m_visual, 0);
+  }
+}
+
+winrt::Microsoft::ReactNative::ComponentView ViewComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    facebook::react::Tag tag) noexcept {
-  return std::shared_ptr<CompositionViewComponentView>(new CompositionViewComponentView(compContext, tag));
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  return winrt::make<ViewComponentView>(compContext, tag, reactContext, ComponentViewFeatures::Default, false);
 }
 
-void CompositionViewComponentView::mountChildComponentView(
-    IComponentView &childComponentView,
+void ViewComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  m_children.insert(std::next(m_children.begin(), index), &childComponentView);
+  base_type::MountChildComponentView(childComponentView, index);
 
   indexOffsetForBorder(index);
+  ensureVisual();
 
-  childComponentView.parent(this);
-
-  m_visual.InsertAt(static_cast<CompositionBaseComponentView &>(childComponentView).OuterVisual(), index);
+  // TODO if we get mixed children of composition and non-composition ComponentViews the indexes will get mixed up
+  // We could offset the index based on non-composition children in m_children
+  if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
+    m_visual.InsertAt(compositionChild->OuterVisual(), index);
+  }
 }
 
-void CompositionViewComponentView::unmountChildComponentView(
-    IComponentView &childComponentView,
+void ViewComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  m_children.erase(std::next(m_children.begin(), index));
+  base_type::UnmountChildComponentView(childComponentView, index);
 
   indexOffsetForBorder(index);
-
-  childComponentView.parent(nullptr);
-  m_visual.Remove(static_cast<CompositionBaseComponentView &>(childComponentView).OuterVisual());
+  if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
+    m_visual.Remove(compositionChild->OuterVisual());
+  }
 }
 
-void CompositionViewComponentView::updateProps(
+void ViewComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
   const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::ViewProps>(m_props);
   const auto &newViewProps = *std::static_pointer_cast<const facebook::react::ViewProps>(props);
 
-  if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
-    if (newViewProps.backgroundColor) {
-      m_visual.Brush(m_compContext.CreateColorBrush(newViewProps.backgroundColor.AsWindowsColor()));
-    } else {
-      m_visual.Brush(nullptr);
-    }
-  }
-
+  ensureVisual();
   if (oldViewProps.opacity != newViewProps.opacity) {
     m_visual.Opacity(newViewProps.opacity);
   }
+  if (oldViewProps.testId != newViewProps.testId) {
+    m_visual.Comment(winrt::to_hstring(newViewProps.testId));
+  }
 
   // update BaseComponentView props
   updateAccessibilityProps(oldViewProps, newViewProps);
-  updateShadowProps(oldViewProps, newViewProps, m_visual);
   updateTransformProps(oldViewProps, newViewProps, m_visual);
-  updateBorderProps(oldViewProps, newViewProps);
+  base_type::updateProps(props, oldProps);
 
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
 
-facebook::react::Tag CompositionViewComponentView::hitTest(
+const winrt::Microsoft::ReactNative::IComponentProps ViewComponentView::userProps(
+    facebook::react::Props::Shared const &props) noexcept {
+  assert(m_customComponent);
+  const auto &abiViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(props);
+  return abiViewProps.UserProps();
+}
+
+facebook::react::Tag ViewComponentView::hitTest(
     facebook::react::Point pt,
     facebook::react::Point &localPt,
     bool ignorePointerEvents) const noexcept {
@@ -1402,10 +1556,7 @@ facebook::react::Tag CompositionViewComponentView::hitTest(
 
   if ((ignorePointerEvents || 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 CompositionBaseComponentView *>(child)->hitTest(ptLocal, localPt);
-        return targetTag != -1;
-      }))
+      anyHitTestHelper(targetTag, ptLocal, localPt))
     return targetTag;
 
   if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
@@ -1413,16 +1564,16 @@ facebook::react::Tag CompositionViewComponentView::hitTest(
       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 Tag();
   }
 
   return -1;
 }
 
-void CompositionViewComponentView::onKeyDown(
+void ViewComponentView::OnKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  auto eventCode = CodeFromVirtualKey(args.Key());
+  auto eventCode = ::Microsoft::ReactNative::CodeFromVirtualKey(args.Key());
   bool fShift = source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) !=
       winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
   bool fAlt = source.GetKeyState(winrt::Windows::System::VirtualKey::Menu) !=
@@ -1434,14 +1585,14 @@ void CompositionViewComponentView::onKeyDown(
       (source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) !=
        winrt::Windows::UI::Core::CoreVirtualKeyStates::None);
 
-  if (args.OriginalSource() == tag()) {
+  if (args.OriginalSource() == Tag()) {
     facebook::react::KeyEvent event;
     event.shiftKey = fShift;
     event.ctrlKey = fCtrl;
     event.altKey = fAlt;
     event.metaKey = fMeta;
 
-    event.key = FromVirtualKey(args.Key(), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
+    event.key = ::Microsoft::ReactNative::FromVirtualKey(args.Key(), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
     event.code = eventCode;
     m_eventEmitter->onKeyDown(event);
   }
@@ -1455,13 +1606,13 @@ void CompositionViewComponentView::onKeyDown(
     }
   }
 
-  Super::onKeyDown(source, args);
+  base_type::OnKeyDown(source, args);
 }
 
-void CompositionViewComponentView::onKeyUp(
+void ViewComponentView::OnKeyUp(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  auto eventCode = CodeFromVirtualKey(args.Key());
+  auto eventCode = ::Microsoft::ReactNative::CodeFromVirtualKey(args.Key());
   bool fShift = source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) !=
       winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
   bool fAlt = source.GetKeyState(winrt::Windows::System::VirtualKey::Menu) !=
@@ -1473,14 +1624,14 @@ void CompositionViewComponentView::onKeyUp(
       (source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) !=
        winrt::Windows::UI::Core::CoreVirtualKeyStates::None);
 
-  if (args.OriginalSource() == tag()) {
+  if (args.OriginalSource() == Tag()) {
     facebook::react::KeyEvent event;
     event.shiftKey = fShift;
     event.ctrlKey = fCtrl;
     event.altKey = fAlt;
     event.metaKey = fMeta;
 
-    event.key = FromVirtualKey(args.Key(), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
+    event.key = ::Microsoft::ReactNative::FromVirtualKey(args.Key(), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
     event.code = eventCode;
     m_eventEmitter->onKeyUp(event);
   }
@@ -1494,125 +1645,173 @@ void CompositionViewComponentView::onKeyUp(
     }
   }
 
-  Super::onKeyUp(source, args);
+  base_type::OnKeyUp(source, args);
 }
 
-void CompositionViewComponentView::updateState(
-    facebook::react::State::Shared const &state,
-    facebook::react::State::Shared const &oldState) noexcept {}
-
-void CompositionViewComponentView::updateLayoutMetrics(
+void ViewComponentView::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);
   }
+  ensureVisual();
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+}
 
-  updateBorderLayoutMetrics(layoutMetrics, *m_props);
+void ViewComponentView::UpdateLayoutMetrics(const LayoutMetrics &metrics, const LayoutMetrics &oldMetrics) noexcept {
+  m_visual.Size({metrics.Frame.Width * metrics.PointScaleFactor, metrics.Frame.Height * metrics.PointScaleFactor});
+}
 
-  m_layoutMetrics = layoutMetrics;
+void ViewComponentView::prepareForRecycle() noexcept {}
 
-  UpdateCenterPropertySet();
-  m_visual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+facebook::react::SharedViewProps ViewComponentView::viewProps() noexcept {
+  return m_props;
 }
 
-void CompositionViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  if (m_needsBorderUpdate) {
-    m_needsBorderUpdate = false;
-    UpdateSpecialBorderLayers(m_layoutMetrics, *m_props);
+winrt::Microsoft::ReactNative::ViewProps ViewComponentView::ViewProps() noexcept {
+  // If we have AbiViewProps, then we dont need to new up a props wrapper
+  if (m_customComponent) {
+    const auto &abiViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(m_props);
+    return abiViewProps.ViewProps();
   }
-}
 
-void CompositionViewComponentView::prepareForRecycle() noexcept {}
-facebook::react::Props::Shared CompositionViewComponentView::props() noexcept {
-  return m_props;
+  return winrt::make<winrt::Microsoft::ReactNative::implementation::ViewProps>(m_props);
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual CompositionViewComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::IVisual ViewComponentView::Visual() const noexcept {
+  assert(m_visual);
   return m_visual;
 }
 
-bool CompositionViewComponentView::focusable() const noexcept {
+bool ViewComponentView::focusable() const noexcept {
   return m_props->focusable;
 }
 
-std::string CompositionViewComponentView::DefaultControlType() const noexcept {
+std::string ViewComponentView::DefaultControlType() const noexcept {
   return "group";
 }
 
-IComponentView *lastDeepChild(IComponentView &view) noexcept {
-  auto current = &view;
+winrt::IInspectable ComponentView::EnsureUiaProvider() noexcept {
+  if (m_uiaProvider == nullptr) {
+    m_uiaProvider =
+        winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(*get_strong());
+  }
+  return m_uiaProvider;
+}
+
+bool IntersectRect(RECT *prcDst, const RECT &prcSrc1, const RECT &prcSrc2) {
+  prcDst->left = std::max(prcSrc1.left, prcSrc2.left);
+  prcDst->right = std::min(prcSrc1.right, prcSrc2.right);
+
+  if (prcDst->left < prcDst->right) {
+    prcDst->top = std::max(prcSrc1.top, prcSrc2.top);
+    prcDst->bottom = std::min(prcSrc1.bottom, prcSrc2.bottom);
+
+    if (prcDst->top < prcDst->bottom) {
+      return true;
+    }
+  }
+
+  prcDst->left = prcDst->top = prcDst->right = prcDst->bottom = 0;
+  return false;
+}
+
+winrt::Microsoft::ReactNative::implementation::ClipState ComponentView::getClipState() noexcept {
+  if (!m_parent) {
+    return winrt::Microsoft::ReactNative::implementation::ClipState::FullyClipped;
+  }
+
+  RECT intersection;
+  const auto parentRect =
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->getClientRect();
+  const auto clientRect = getClientRect();
+
+  IntersectRect(&intersection, parentRect, clientRect);
+
+  if (intersection == clientRect) {
+    return m_parent.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()->getClipState();
+  }
+
+  if (((intersection.right - intersection.left) == 0) && ((intersection.bottom - intersection.top) == 0)) {
+    return winrt::Microsoft::ReactNative::implementation::ClipState::FullyClipped;
+  }
+
+  if (m_parent.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()->getClipState() ==
+      winrt::Microsoft::ReactNative::implementation::ClipState::FullyClipped) {
+    return winrt::Microsoft::ReactNative::implementation::ClipState::FullyClipped;
+  }
+
+  return winrt::Microsoft::ReactNative::implementation::ClipState::PartialClip;
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+winrt::Microsoft::ReactNative::ComponentView lastDeepChild(
+    const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+  auto current = view;
   while (current) {
-    auto children = current->children();
-    auto itLastChild = children.rbegin();
-    if (itLastChild == children.rend()) {
+    auto children = current.Children();
+    if (children.Size() == 0)
       break;
-    }
-    current = *itLastChild;
+    current = children.GetAt(children.Size() - 1);
   }
   return current;
 }
 
-bool walkTree(IComponentView &view, bool forward, Mso::Functor<bool(IComponentView &)> &fn) noexcept {
+bool walkTree(
+    const winrt::Microsoft::ReactNative::ComponentView &view,
+    bool forward,
+    Mso::Functor<bool(const winrt::Microsoft::ReactNative::ComponentView &)> &fn) noexcept {
   if (forward) {
     if (fn(view)) {
       return true;
     }
 
-    for (auto it = view.children().begin(); it != view.children().end(); ++it) {
-      if (fn(**it))
-        return true;
+    auto children = view.Children();
+    for (auto it = children.begin(); it != children.end(); ++it) {
+      return walkTree(*it, forward, fn);
     }
 
-    auto current = &view;
-    auto parent = current->parent();
+    auto current = view;
+    auto parent = current.Parent();
     while (parent) {
-      auto &parentsChildren = parent->children();
+      auto parentsChildren = parent.Children();
       auto itNextView = std::find(parentsChildren.begin(), parentsChildren.end(), current);
       assert(itNextView != parentsChildren.end());
       ++itNextView;
       if (itNextView != parentsChildren.end()) {
-        return walkTree(**itNextView, true, fn);
+        return walkTree(*itNextView, true, fn);
       }
       current = parent;
-      parent = current->parent();
+      parent = current.Parent();
     }
 
   } else {
-    auto current = &view;
-    auto parent = current->parent();
+    auto current = view;
+    auto parent = current.Parent();
     while (parent) {
-      auto &parentsChildren = parent->children();
-      auto itNextView = std::find(parentsChildren.rbegin(), parentsChildren.rend(), current);
-      assert(itNextView != parentsChildren.rend());
-      auto index = std::distance(parentsChildren.rbegin(), itNextView);
-      ++itNextView;
-      if (itNextView != parentsChildren.rend()) {
-        auto lastChild = lastDeepChild(**itNextView);
-        if (fn(*lastChild))
+      auto parentsChildren = parent.Children();
+      uint32_t index;
+      bool success = parent.Children().IndexOf(current, index);
+      assert(success);
+      if (index > 0) {
+        auto lastChild = lastDeepChild(parent.Children().GetAt(index - 1));
+        if (fn(lastChild))
           return true;
-        return walkTree(*lastChild, false, fn);
+        return walkTree(lastChild, false, fn);
       }
 
-      if (fn(*parent)) {
+      if (fn(parent)) {
         return true;
       }
       current = parent;
-      parent = current->parent();
+      parent = current.Parent();
     }
   }
   return false;
 }
 
-winrt::IInspectable CompositionBaseComponentView::EnsureUiaProvider() noexcept {
-  if (m_uiaProvider == nullptr) {
-    m_uiaProvider = winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(
-        shared_from_this());
-  }
-  return m_uiaProvider;
-}
-
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::implementation