react-native-windows 0.74.4 → 0.74.6

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

@@ -0,0 +1,152 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "FocusManager.h"
+#include "Composition.FocusManager.g.cpp"
+#include <Fabric/FabricUIManagerModule.h>
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+LostFocusEventArgs::LostFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource)
+    : m_originalSource(originalSource ? originalSource.Tag() : -1) {}
+int32_t LostFocusEventArgs::OriginalSource() noexcept {
+  return m_originalSource;
+}
+
+GotFocusEventArgs::GotFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource)
+    : m_originalSource(originalSource ? originalSource.Tag() : -1) {}
+int32_t GotFocusEventArgs::OriginalSource() noexcept {
+  return m_originalSource;
+}
+
+LosingFocusEventArgs::LosingFocusEventArgs(
+    const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+    const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
+    const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent)
+    : m_originalSource(originalSource ? originalSource.Tag() : -1),
+      m_old(oldFocusedComponent),
+      m_new(newFocusedComponent) {}
+
+int32_t LosingFocusEventArgs::OriginalSource() noexcept {
+  return m_originalSource;
+}
+winrt::Microsoft::ReactNative::ComponentView LosingFocusEventArgs::NewFocusedComponent() noexcept {
+  return m_new;
+}
+winrt::Microsoft::ReactNative::ComponentView LosingFocusEventArgs::OldFocusedComponent() noexcept {
+  return m_old;
+}
+
+void LosingFocusEventArgs::TryCancel() noexcept {
+  m_new = m_old;
+}
+
+void LosingFocusEventArgs::TrySetNewFocusedComponent(
+    const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent) noexcept {
+  auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(newFocusedComponent);
+  if (selfView->focusable()) {
+    m_new = newFocusedComponent;
+  } else {
+    auto target =
+        winrt::Microsoft::ReactNative::Composition::FocusManager::FindFirstFocusableElement(newFocusedComponent);
+    if (!target)
+      return;
+    m_new = target;
+  }
+}
+
+GettingFocusEventArgs::GettingFocusEventArgs(
+    const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+    const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
+    const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent)
+    : m_originalSource(originalSource ? originalSource.Tag() : -1),
+      m_old(oldFocusedComponent),
+      m_new(newFocusedComponent) {}
+
+int32_t GettingFocusEventArgs::OriginalSource() noexcept {
+  return m_originalSource;
+}
+winrt::Microsoft::ReactNative::ComponentView GettingFocusEventArgs::NewFocusedComponent() noexcept {
+  return m_new;
+}
+winrt::Microsoft::ReactNative::ComponentView GettingFocusEventArgs::OldFocusedComponent() noexcept {
+  return m_old;
+}
+
+void GettingFocusEventArgs::TryCancel() noexcept {
+  m_new = m_old;
+}
+
+void GettingFocusEventArgs::TrySetNewFocusedComponent(
+    const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent) noexcept {
+  auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(newFocusedComponent);
+  if (selfView->focusable()) {
+    m_new = newFocusedComponent;
+  } else {
+    auto target =
+        winrt::Microsoft::ReactNative::Composition::FocusManager::FindFirstFocusableElement(newFocusedComponent);
+    if (!target)
+      return;
+    m_new = target;
+  }
+}
+
+} // namespace winrt::Microsoft::ReactNative::implementation
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+winrt::Microsoft::ReactNative::implementation::ComponentView *NavigateFocusHelper(
+    winrt::Microsoft::ReactNative::implementation::ComponentView &view,
+    winrt::Microsoft::ReactNative::FocusNavigationReason reason) {
+  if (reason == winrt::Microsoft::ReactNative::FocusNavigationReason::First) {
+    if (view.focusable()) {
+      return &view;
+    }
+  }
+  winrt::Microsoft::ReactNative::implementation::ComponentView *toFocus = nullptr;
+
+  Mso::Functor<bool(::winrt::Microsoft::ReactNative::implementation::ComponentView & v)> fn =
+      [reason, &toFocus](::winrt::Microsoft::ReactNative::implementation::ComponentView &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;
+}
+
+winrt::Microsoft::ReactNative::ComponentView FocusManager::FindFirstFocusableElement(
+    const winrt::Microsoft::ReactNative::ComponentView &searchScope) noexcept {
+  auto selfSearchScope = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(searchScope);
+  auto view = NavigateFocusHelper(*selfSearchScope, winrt::Microsoft::ReactNative::FocusNavigationReason::First);
+  if (view) {
+    winrt::Microsoft::ReactNative::ComponentView component{nullptr};
+    winrt::check_hresult(view->QueryInterface(
+        winrt::guid_of<winrt::Microsoft::ReactNative::ComponentView>(), winrt::put_abi(component)));
+    return *view;
+  }
+  return nullptr;
+}
+
+winrt::Microsoft::ReactNative::ComponentView FocusManager::FindLastFocusableElement(
+    const winrt::Microsoft::ReactNative::ComponentView &searchScope) noexcept {
+  auto selfSearchScope = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(searchScope);
+  auto view = NavigateFocusHelper(*selfSearchScope, winrt::Microsoft::ReactNative::FocusNavigationReason::Last);
+  if (view) {
+    winrt::Microsoft::ReactNative::ComponentView component{nullptr};
+    winrt::check_hresult(view->QueryInterface(
+        winrt::guid_of<winrt::Microsoft::ReactNative::ComponentView>(), winrt::put_abi(component)));
+    return *view;
+  }
+  return nullptr;
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+#include "Composition.FocusManager.g.h"
+#include "GettingFocusEventArgs.g.h"
+#include "LosingFocusEventArgs.g.h"
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
+#include <winrt/Microsoft.ReactNative.Composition.Input.h>
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+struct LostFocusEventArgs
+    : winrt::implements<LostFocusEventArgs, winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> {
+  LostFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource);
+  int32_t OriginalSource() noexcept;
+
+ private:
+  const int32_t m_originalSource;
+};
+
+struct GotFocusEventArgs
+    : winrt::implements<GotFocusEventArgs, winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> {
+  GotFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource);
+  int32_t OriginalSource() noexcept;
+
+ private:
+  const int32_t m_originalSource;
+};
+
+struct LosingFocusEventArgs
+    : winrt::Microsoft::ReactNative::implementation::LosingFocusEventArgsT<LosingFocusEventArgs> {
+  LosingFocusEventArgs(
+      const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+      const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
+      const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent);
+  int32_t OriginalSource() noexcept;
+  winrt::Microsoft::ReactNative::ComponentView NewFocusedComponent() noexcept;
+  winrt::Microsoft::ReactNative::ComponentView OldFocusedComponent() noexcept;
+
+  void TryCancel() noexcept;
+  void TrySetNewFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent) noexcept;
+
+ private:
+  const int32_t m_originalSource;
+  winrt::Microsoft::ReactNative::ComponentView m_old{nullptr};
+  winrt::Microsoft::ReactNative::ComponentView m_new{nullptr};
+};
+
+struct GettingFocusEventArgs
+    : winrt::Microsoft::ReactNative::implementation::GettingFocusEventArgsT<GettingFocusEventArgs> {
+  GettingFocusEventArgs(
+      const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+      const winrt::Microsoft::ReactNative::ComponentView &oldFocusedComponent,
+      const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent);
+  int32_t OriginalSource() noexcept;
+  winrt::Microsoft::ReactNative::ComponentView NewFocusedComponent() noexcept;
+  winrt::Microsoft::ReactNative::ComponentView OldFocusedComponent() noexcept;
+
+  void TryCancel() noexcept;
+  void TrySetNewFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &newFocusedComponent) noexcept;
+
+ private:
+  const int32_t m_originalSource;
+  winrt::Microsoft::ReactNative::ComponentView m_old{nullptr};
+  winrt::Microsoft::ReactNative::ComponentView m_new{nullptr};
+};
+} // namespace winrt::Microsoft::ReactNative::implementation
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+struct FocusManager : FocusManagerT<FocusManager> {
+  FocusManager() = default;
+
+  static winrt::Microsoft::ReactNative::ComponentView FindFirstFocusableElement(
+      const winrt::Microsoft::ReactNative::ComponentView &searchScope) noexcept;
+  static winrt::Microsoft::ReactNative::ComponentView FindLastFocusableElement(
+      const winrt::Microsoft::ReactNative::ComponentView &searchScope) noexcept;
+};
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation
+
+namespace winrt::Microsoft::ReactNative::Composition::factory_implementation {
+struct FocusManager : FocusManagerT<FocusManager, implementation::FocusManager> {};
+} // namespace winrt::Microsoft::ReactNative::Composition::factory_implementation

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

@@ -14,6 +14,7 @@
 #include <react/renderer/components/image/ImageEventEmitter.h>
 
 #include <AutoDraw.h>
+#include <Fabric/AbiViewProps.h>
 #include <Fabric/FabricUIManagerModule.h>
 #include <Utils/ImageUtils.h>
 #include <shcore.h>
@@ -48,19 +49,22 @@ void ImageComponentView::WindowsImageResponseObserver::didReceiveFailure() const
   m_image->didReceiveFailureFromObserver();
 }
 
+facebook::react::SharedViewProps ImageComponentView::defaultProps() noexcept {
+  static auto const defaultProps = std::make_shared<facebook::react::ImageProps const>();
+  return defaultProps;
+}
+
 ImageComponentView::ImageComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
+          ImageComponentView::defaultProps(),
           compContext,
           tag,
           reactContext,
           ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
-          false) {
-  static auto const defaultProps = std::make_shared<facebook::react::ImageProps const>();
-  m_props = defaultProps;
-}
+          false) {}
 
 void ImageComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
@@ -111,32 +115,24 @@ void ImageComponentView::didReceiveFailureFromObserver() noexcept {
   }
 }
 
+const facebook::react::ImageProps &ImageComponentView::imageProps() const noexcept {
+  return *std::static_pointer_cast<const facebook::react::ImageProps>(viewProps());
+}
+
 void ImageComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
-  const auto &oldImageProps = *std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
+  const auto &oldImageProps =
+      *std::static_pointer_cast<const facebook::react::ImageProps>(oldProps ? oldProps : viewProps());
   const auto &newImageProps = *std::static_pointer_cast<const facebook::react::ImageProps>(props);
 
-  ensureVisual();
-
-  // update BaseComponentView props
-  updateTransformProps(oldImageProps, newImageProps, m_visual);
-  Super::updateProps(props, oldProps);
-
   if (oldImageProps.backgroundColor != newImageProps.backgroundColor ||
       oldImageProps.blurRadius != newImageProps.blurRadius || oldImageProps.tintColor != newImageProps.tintColor ||
       oldImageProps.resizeMode != newImageProps.resizeMode) {
     m_drawingSurface = nullptr; // TODO don't need to recreate the surface just to redraw...
   }
 
-  if (oldImageProps.opacity != newImageProps.opacity) {
-    m_visual.Opacity(newImageProps.opacity);
-  }
-  if (oldImageProps.testId != newImageProps.testId) {
-    m_visual.Comment(winrt::to_hstring(newImageProps.testId));
-  }
-
-  m_props = std::static_pointer_cast<facebook::react::ImageProps const>(props);
+  Super::updateProps(props, oldProps);
 }
 
 void ImageComponentView::updateState(
@@ -182,19 +178,22 @@ void ImageComponentView::setStateAndResubscribeImageResponseObserver(
   }
 }
 
-void ImageComponentView::updateLayoutMetrics(
-    facebook::react::LayoutMetrics const &layoutMetrics,
-    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
-  // Set Position & Size Properties
+winrt::Microsoft::ReactNative::ImageProps ImageComponentView::ImageProps() noexcept {
+  // We do not currently support custom ImageComponentView's
+  // If we did we would need to create a AbiImageProps and possibly return them here
+  assert(!m_customComponent);
+  return winrt::make<winrt::Microsoft::ReactNative::implementation::ImageProps>(viewProps());
+}
 
-  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
-  }
+winrt::Microsoft::ReactNative::ImageProps ImageComponentView::ViewProps() noexcept {
+  return ViewPropsInner().as<winrt::Microsoft::ReactNative::ImageProps>();
+}
 
-  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-  m_visual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+winrt::Microsoft::ReactNative::ViewProps ImageComponentView::ViewPropsInner() noexcept {
+  // We do not currently support custom ImageComponentView's
+  // If we did we would need to create a AbiImageProps and possibly return them here
+  assert(!m_customComponent);
+  return winrt::make<winrt::Microsoft::ReactNative::implementation::ImageProps>(viewProps());
 }
 
 void ImageComponentView::OnRenderingDeviceLost() noexcept {
@@ -203,7 +202,7 @@ void ImageComponentView::OnRenderingDeviceLost() noexcept {
 }
 
 bool ImageComponentView::themeEffectsImage() const noexcept {
-  return m_props->backgroundColor || isColorMeaningful(m_props->tintColor);
+  return viewProps()->backgroundColor || isColorMeaningful(imageProps().tintColor);
 }
 
 void ImageComponentView::onThemeChanged() noexcept {
@@ -218,7 +217,7 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
   assert(m_reactContext.UIDispatcher().HasThreadAccess());
 
   if (!m_imageResponseImage) {
-    m_visual.Brush(nullptr);
+    Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
     return;
   }
 
@@ -230,18 +229,18 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
   if (!m_drawingSurface && m_imageResponseImage->m_wicbmp) {
     winrt::Windows::Foundation::Size drawingSurfaceSize{static_cast<float>(width), static_cast<float>(height)};
 
-    const auto imageProps = std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
+    const auto &imgProps = imageProps();
     const auto frame{m_layoutMetrics.getContentFrame().size};
 
-    if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) {
+    if (imgProps.resizeMode == facebook::react::ImageResizeMode::Repeat) {
       drawingSurfaceSize = {
           frame.width * m_layoutMetrics.pointScaleFactor, frame.height * m_layoutMetrics.pointScaleFactor};
-    } else if (imageProps->blurRadius > 0) {
+    } else if (imgProps.blurRadius > 0) {
       // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#output-bitmap
       // The following equation that can be used to compute the output bitmap:
       // Output bitmap growth (X and Y) = (StandardDeviation(DIPs)*3 + StandardDeviation(DIPs)*3)*((User DPI)/96)
       // Where StandardDeviation(DIPs)*3 is equivalent to the blur radius.
-      const auto bmpGrowth{imageProps->blurRadius * 2 * m_layoutMetrics.pointScaleFactor};
+      const auto bmpGrowth{imgProps.blurRadius * 2 * m_layoutMetrics.pointScaleFactor};
       drawingSurfaceSize = {drawingSurfaceSize.Width + bmpGrowth, drawingSurfaceSize.Height + bmpGrowth};
     }
 
@@ -252,7 +251,7 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
 
     DrawImage();
 
-    switch (imageProps->resizeMode) {
+    switch (imgProps.resizeMode) {
       case facebook::react::ImageResizeMode::Stretch:
         m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Fill);
         break;
@@ -281,9 +280,10 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
         assert(false);
     }
 
-    m_visual.Brush(m_drawingSurface);
+    Visual().as<Experimental::ISpriteVisual>().Brush(m_drawingSurface);
   } else if (m_imageResponseImage->m_brushFactory) {
-    m_visual.Brush(m_imageResponseImage->m_brushFactory(m_reactContext.Handle(), m_compContext));
+    Visual().as<Experimental::ISpriteVisual>().Brush(
+        m_imageResponseImage->m_brushFactory(m_reactContext.Handle(), m_compContext));
   }
 }
 
@@ -310,15 +310,15 @@ void ImageComponentView::DrawImage() noexcept {
         d2dDeviceContext->CreateBitmapFromWicBitmap(m_imageResponseImage->m_wicbmp.get(), nullptr, bitmap.put()));
 
     d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
-    if (m_props->backgroundColor) {
-      d2dDeviceContext->Clear(theme()->D2DColor(*m_props->backgroundColor));
+    if (viewProps()->backgroundColor) {
+      d2dDeviceContext->Clear(theme()->D2DColor(*viewProps()->backgroundColor));
     }
 
-    const auto imageProps = std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
+    const auto &imgProps = imageProps();
 
     bool useEffects{
-        imageProps->blurRadius > 0 || isColorMeaningful(imageProps->tintColor) ||
-        imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat};
+        imgProps.blurRadius > 0 || isColorMeaningful(imgProps.tintColor) ||
+        imgProps.resizeMode == facebook::react::ImageResizeMode::Repeat};
 
     if (useEffects) {
       winrt::com_ptr<ID2D1Effect> bitmapEffects;
@@ -326,23 +326,22 @@ void ImageComponentView::DrawImage() noexcept {
       winrt::check_hresult(
           bitmapEffects->SetValue(D2D1_BITMAPSOURCE_PROP_WIC_BITMAP_SOURCE, m_imageResponseImage->m_wicbmp.get()));
 
-      if (imageProps->blurRadius > 0) {
+      if (imgProps.blurRadius > 0) {
         winrt::com_ptr<ID2D1Effect> gaussianBlurEffect;
         winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1GaussianBlur, gaussianBlurEffect.put()));
         // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#effect-properties
         // You can compute the blur radius of the kernel by multiplying the standard deviation by 3 (radius multiplier).
         constexpr float radiusMultiplier = 3;
         winrt::check_hresult(gaussianBlurEffect->SetValue(
-            D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, (imageProps->blurRadius) / radiusMultiplier));
+            D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, (imgProps.blurRadius) / radiusMultiplier));
         gaussianBlurEffect->SetInputEffect(0, bitmapEffects.get());
         bitmapEffects.copy_from(gaussianBlurEffect.get());
       }
 
-      if (isColorMeaningful(imageProps->tintColor)) {
+      if (isColorMeaningful(imgProps.tintColor)) {
         winrt::com_ptr<ID2D1Effect> tintColorEffect;
         winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Flood, tintColorEffect.put()));
-        winrt::check_hresult(
-            tintColorEffect->SetValue(D2D1_FLOOD_PROP_COLOR, theme()->D2DColor(*imageProps->tintColor)));
+        winrt::check_hresult(tintColorEffect->SetValue(D2D1_FLOOD_PROP_COLOR, theme()->D2DColor(*imgProps.tintColor)));
 
         winrt::com_ptr<ID2D1Effect> compositeEffect;
         winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Composite, compositeEffect.put()));
@@ -353,7 +352,7 @@ void ImageComponentView::DrawImage() noexcept {
         bitmapEffects.copy_from(compositeEffect.get());
       }
 
-      if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) {
+      if (imgProps.resizeMode == facebook::react::ImageResizeMode::Repeat) {
         winrt::com_ptr<ID2D1Effect> borderEffect;
         winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Border, borderEffect.put()));
         winrt::check_hresult(borderEffect->SetValue(D2D1_BORDER_PROP_EDGE_MODE_X, D2D1_BORDER_EDGE_MODE_WRAP));
@@ -386,51 +385,6 @@ void ImageComponentView::DrawImage() noexcept {
   }
 }
 
-void ImageComponentView::prepareForRecycle() noexcept {}
-
-facebook::react::SharedViewProps ImageComponentView::viewProps() noexcept {
-  return m_props;
-}
-
-facebook::react::Tag ImageComponentView::hitTest(
-    facebook::react::Point pt,
-    facebook::react::Point &localPt,
-    bool ignorePointerEvents) const noexcept {
-  facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
-
-  facebook::react::Tag targetTag;
-
-  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) &&
-      anyHitTestHelper(targetTag, ptLocal, localPt))
-    return targetTag;
-
-  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
-      ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
-      ptLocal.y <= m_layoutMetrics.frame.size.height) {
-    localPt = ptLocal;
-    return Tag();
-  }
-
-  return -1;
-}
-
-void ImageComponentView::ensureVisual() noexcept {
-  if (!m_visual) {
-    m_visual = m_compContext.CreateSpriteVisual();
-    OuterVisual().InsertAt(m_visual, 0);
-  }
-}
-
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::Visual() const noexcept {
-  return m_visual;
-}
-
-bool ImageComponentView::focusable() const noexcept {
-  return m_props->focusable;
-}
-
 std::string ImageComponentView::DefaultControlType() const noexcept {
   return "image";
 }

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

@@ -29,8 +29,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 struct WindowsImageResponseObserver;
 
-struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentView> {
-  using Super = ImageComponentViewT<ImageComponentView, ComponentView>;
+struct ImageComponentView : ImageComponentViewT<ImageComponentView, ViewComponentView> {
+  using Super = ImageComponentViewT<ImageComponentView, ViewComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -47,25 +47,25 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentVie
       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 prepareForRecycle() noexcept override;
-  facebook::react::SharedViewProps viewProps() noexcept override;
   void OnRenderingDeviceLost() noexcept override;
   void onThemeChanged() noexcept override;
 
-  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
-      const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
-  bool focusable() const noexcept override;
   virtual std::string DefaultControlType() const noexcept;
+  static facebook::react::SharedViewProps defaultProps() noexcept;
 
   ImageComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
+  const facebook::react::ImageProps &imageProps() const noexcept;
+  // TODO try to change to ViewProps
+  winrt::Microsoft::ReactNative::ImageProps ImageProps() noexcept;
+  winrt::Microsoft::ReactNative::ImageProps ViewProps() noexcept;
+
+ protected:
+  winrt::Microsoft::ReactNative::ViewProps ViewPropsInner() noexcept override;
+
  private:
   struct WindowsImageResponseObserver : facebook::react::ImageResponseObserver {
    public:
@@ -78,7 +78,6 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentVie
     winrt::com_ptr<ImageComponentView> m_image;
   };
 
-  void ensureVisual() noexcept;
   void ensureDrawingSurface() noexcept;
   void DrawImage() noexcept;
 
@@ -90,9 +89,6 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentVie
       facebook::react::ImageShadowNode::ConcreteState::Shared const &state) noexcept;
   bool themeEffectsImage() const noexcept;
 
-  std::shared_ptr<const facebook::react::ImageProps> m_props;
-
-  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface;
   std::shared_ptr<ImageResponseImage> m_imageResponseImage;
   std::shared_ptr<WindowsImageResponseObserver> m_imageResponseObserver;