react-native-windows 0.74.3 → 0.74.5

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

@@ -29,13 +29,12 @@ SwitchComponentView::SwitchComponentView(
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : base_type(
+          SwitchComponentView::defaultProps(),
           compContext,
           tag,
           reactContext,
           ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
-          false) {
-  m_props = std::make_shared<facebook::react::SwitchProps const>();
-}
+          false) {}
 
 winrt::Microsoft::ReactNative::ComponentView SwitchComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -72,24 +71,17 @@ void SwitchComponentView::HandleCommand(
 void SwitchComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
-  const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const facebook::react::SwitchProps>(oldProps ? oldProps : viewProps());
   const auto &newViewProps = *std::static_pointer_cast<const facebook::react::SwitchProps>(props);
 
-  ensureVisual();
-
   if (oldViewProps.backgroundColor != newViewProps.backgroundColor ||
       oldViewProps.thumbTintColor != newViewProps.thumbTintColor || oldViewProps.value != newViewProps.value ||
       oldViewProps.disabled != newViewProps.disabled) {
     m_visualUpdateRequired = true;
   }
-  if (oldViewProps.testId != newViewProps.testId) {
-    m_visual.Comment(winrt::to_hstring(newViewProps.testId));
-  }
 
-  // update BaseComponentView props
-  updateTransformProps(oldViewProps, newViewProps, m_visual);
   Super::updateProps(props, oldProps);
-  m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
 
 void SwitchComponentView::updateState(
@@ -99,17 +91,7 @@ void SwitchComponentView::updateState(
 void SwitchComponentView::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);
-  }
-
   Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-  m_visual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
 
   if (oldLayoutMetrics.pointScaleFactor != layoutMetrics.pointScaleFactor) {
     handleScaleChange();
@@ -135,7 +117,7 @@ void SwitchComponentView::handleScaleChange() noexcept {
 }
 
 void SwitchComponentView::updateVisuals() noexcept {
-  const auto switchProps = std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
+  const auto &props = switchProps();
   auto &theme = *this->theme();
   winrt::Microsoft::ReactNative::Composition::Experimental::IBrush defaultColor;
   winrt::Microsoft::ReactNative::Composition::Experimental::IBrush fillColor;
@@ -144,8 +126,8 @@ void SwitchComponentView::updateVisuals() noexcept {
   auto thumbWidth = SwitchConstants::thumbWidth;
   auto thumbHeight = SwitchConstants::thumbWidth;
 
-  if (switchProps->value) {
-    if (switchProps->disabled) {
+  if (props.value) {
+    if (props.disabled) {
       defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOnDisabled");
       fillColor = theme.PlatformBrush("ToggleSwitchFillOnDisabled");
       thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOnDisabled");
@@ -163,7 +145,7 @@ void SwitchComponentView::updateVisuals() noexcept {
       thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOn");
     }
   } else {
-    if (switchProps->disabled) {
+    if (props.disabled) {
       defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOffDisabled");
       fillColor = theme.PlatformBrush("ToggleSwitchFillOffDisabled");
       thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOffDisabled");
@@ -182,7 +164,7 @@ void SwitchComponentView::updateVisuals() noexcept {
     }
   }
 
-  if (switchProps->disabled) {
+  if (props.disabled) {
     thumbWidth = SwitchConstants::thumbWidth;
   } else if (m_pressed) {
     thumbWidth = SwitchConstants::thumbWidthPressed;
@@ -194,18 +176,18 @@ void SwitchComponentView::updateVisuals() noexcept {
     thumbWidth = SwitchConstants::thumbWidth;
   }
 
-  if (!switchProps->disabled && switchProps->thumbTintColor) {
-    thumbFill = theme.Brush(*switchProps->thumbTintColor);
+  if (!props.disabled && props.thumbTintColor) {
+    thumbFill = theme.Brush(*props.thumbTintColor);
   }
 
-  if (!switchProps->disabled && switchProps->onTintColor && switchProps->value) {
-    fillColor = theme.Brush(*switchProps->onTintColor);
-  } else if (!switchProps->disabled && switchProps->tintColor && !switchProps->value) {
-    fillColor = theme.Brush(*switchProps->tintColor);
+  if (!props.disabled && props.onTintColor && props.value) {
+    fillColor = theme.Brush(*props.onTintColor);
+  } else if (!props.disabled && props.tintColor && !props.value) {
+    fillColor = theme.Brush(*props.tintColor);
   }
 
   // switch track - outline
-  if ((!switchProps->onTintColor && switchProps->value) || (!switchProps->tintColor && !switchProps->value)) {
+  if ((!props.onTintColor && props.value) || (!props.tintColor && !props.value)) {
     m_trackVisual.StrokeThickness(std::round(SwitchConstants::trackStrokeThickness * m_layoutMetrics.pointScaleFactor));
     m_trackVisual.StrokeBrush(defaultColor);
   } else {
@@ -220,7 +202,7 @@ void SwitchComponentView::updateVisuals() noexcept {
     m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::Experimental::AnimationClass::None);
   }
 
-  if (switchProps->value) {
+  if (props.value) {
     m_thumbVisual.Offset(
         {(SwitchConstants::trackWidth - (SwitchConstants::thumbMargin + thumbWidth)) * m_layoutMetrics.pointScaleFactor,
          offsetY,
@@ -249,47 +231,18 @@ void SwitchComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::Compone
   base_type::FinalizeUpdates(updateMask);
 }
 
-void SwitchComponentView::prepareForRecycle() noexcept {}
-
-facebook::react::SharedViewProps SwitchComponentView::viewProps() noexcept {
-  return m_props;
-}
-
-void SwitchComponentView::ensureVisual() noexcept {
-  if (!m_visual) {
-    m_visual = m_compContext.CreateSpriteVisual();
-    OuterVisual().InsertAt(m_visual, 0);
-
-    m_trackVisual = m_compContext.CreateRoundedRectangleVisual();
-    m_visual.InsertAt(m_trackVisual, 0);
-
-    m_thumbVisual = m_compContext.CreateRoundedRectangleVisual();
-    m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::Experimental::AnimationClass::SwitchThumb);
-    m_trackVisual.InsertAt(m_thumbVisual, 0);
-
-    handleScaleChange();
-  }
-}
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual SwitchComponentView::createVisual() noexcept {
+  auto visual = m_compContext.CreateSpriteVisual();
 
-facebook::react::Tag SwitchComponentView::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();
-  }
+  m_trackVisual = m_compContext.CreateRoundedRectangleVisual();
+  visual.InsertAt(m_trackVisual, 0);
 
-  return -1;
-}
+  m_thumbVisual = m_compContext.CreateRoundedRectangleVisual();
+  m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::Experimental::AnimationClass::SwitchThumb);
+  m_trackVisual.InsertAt(m_thumbVisual, 0);
 
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual SwitchComponentView::Visual() const noexcept {
-  return m_visual;
+  handleScaleChange();
+  return visual;
 }
 
 void SwitchComponentView::onThemeChanged() noexcept {
@@ -304,9 +257,7 @@ void SwitchComponentView::OnPointerPressed(
     return;
   }
 
-  const auto switchProps = std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
-
-  if (!switchProps->disabled) {
+  if (!switchProps().disabled) {
     m_pressed = true;
     m_supressAnimationForNextFrame = true;
 
@@ -364,27 +315,30 @@ void SwitchComponentView::OnKeyUp(
 }
 
 bool SwitchComponentView::toggle() noexcept {
-  const auto switchProps = std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
-
-  if (switchProps->disabled || !m_eventEmitter)
+  if (switchProps().disabled || !m_eventEmitter)
     return false;
 
   auto switchEventEmitter = std::static_pointer_cast<facebook::react::SwitchEventEmitter const>(m_eventEmitter);
 
   facebook::react::SwitchEventEmitter::OnChange args;
-  args.value = !(switchProps->value);
+  args.value = !(switchProps().value);
   args.target = Tag();
 
   switchEventEmitter->onChange(args);
   return true;
 }
 
-bool SwitchComponentView::focusable() const noexcept {
-  return m_props->focusable;
-}
-
 std::string SwitchComponentView::DefaultControlType() const noexcept {
   return "switch";
 }
 
+facebook::react::SharedViewProps SwitchComponentView::defaultProps() noexcept {
+  static auto const defaultProps = std::make_shared<facebook::react::SwitchProps const>();
+  return defaultProps;
+}
+
+const facebook::react::SwitchProps &SwitchComponentView::switchProps() const noexcept {
+  return *std::static_pointer_cast<const facebook::react::SwitchProps>(viewProps());
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -13,8 +13,8 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct SwitchComponentView : SwitchComponentViewT<SwitchComponentView, ComponentView> {
-  using Super = SwitchComponentViewT<SwitchComponentView, ComponentView>;
+struct SwitchComponentView : SwitchComponentViewT<SwitchComponentView, ViewComponentView> {
+  using Super = SwitchComponentViewT<SwitchComponentView, ViewComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
@@ -37,9 +37,6 @@ struct SwitchComponentView : SwitchComponentViewT<SwitchComponentView, Component
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
   void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
-  void prepareForRecycle() noexcept override;
-  facebook::react::SharedViewProps viewProps() noexcept override;
-  bool focusable() const noexcept override;
   void onThemeChanged() noexcept override;
   void OnKeyUp(
       const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
@@ -53,9 +50,6 @@ struct SwitchComponentView : SwitchComponentViewT<SwitchComponentView, Component
   void OnPointerExited(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) 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;
   std::string DefaultControlType() const noexcept override;
 
   SwitchComponentView(
@@ -63,6 +57,10 @@ struct SwitchComponentView : SwitchComponentViewT<SwitchComponentView, Component
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
+  static facebook::react::SharedViewProps defaultProps() noexcept;
+  const facebook::react::SwitchProps &switchProps() const noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept override;
+
  private:
   void ensureVisual() noexcept;
   bool toggle() noexcept;
@@ -74,10 +72,8 @@ struct SwitchComponentView : SwitchComponentViewT<SwitchComponentView, Component
   bool m_supressAnimationForNextFrame{false};
   bool m_visualUpdateRequired{true};
   facebook::react::Size m_contentSize;
-  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IRoundedRectangleVisual m_trackVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IRoundedRectangleVisual m_thumbVisual{nullptr};
-  facebook::react::SharedViewProps m_props;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -164,7 +164,7 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Show the caret
   BOOL TxShowCaret(BOOL fShow) override {
-    m_outer->ShowCaret(m_outer->m_props->caretHidden ? false : fShow);
+    m_outer->ShowCaret(m_outer->windowsTextInputProps().caretHidden ? false : fShow);
     return true;
   }
 
@@ -304,14 +304,14 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
     switch (nIndex) {
       case COLOR_WINDOWTEXT:
-        if (m_outer->m_props->textAttributes.foregroundColor)
-          return (*m_outer->m_props->textAttributes.foregroundColor).AsColorRefNoAlpha();
+        if (m_outer->windowsTextInputProps().textAttributes.foregroundColor)
+          return (*m_outer->windowsTextInputProps().textAttributes.foregroundColor).AsColorRefNoAlpha();
         // cr = 0x000000FF;
         break;
 
       case COLOR_WINDOW:
-        if (m_outer->m_props->backgroundColor)
-          return (*m_outer->m_props->backgroundColor).AsColorRefNoAlpha();
+        if (m_outer->viewProps()->backgroundColor)
+          return (*m_outer->viewProps()->backgroundColor).AsColorRefNoAlpha();
         break;
         // case COLOR_HIGHLIGHT:
         // cr = RGB(0, 0, 255);
@@ -356,8 +356,8 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Get the maximum length for the text
   HRESULT TxGetMaxLength(DWORD *plength) override {
-    auto length = m_outer->m_props->maxLength;
-    if (length > static_cast<decltype(m_outer->m_props->maxLength)>(std::numeric_limits<DWORD>::max())) {
+    auto length = m_outer->windowsTextInputProps().maxLength;
+    if (length > static_cast<decltype(m_outer->windowsTextInputProps().maxLength)>(std::numeric_limits<DWORD>::max())) {
       length = std::numeric_limits<DWORD>::max();
     }
     *plength = static_cast<DWORD>(length);
@@ -454,7 +454,7 @@ facebook::react::AttributedString WindowsTextInputComponentView::getAttributedSt
 
   auto childTextAttributes = facebook::react::TextAttributes::defaultTextAttributes();
 
-  childTextAttributes.apply(m_props->textAttributes);
+  childTextAttributes.apply(windowsTextInputProps().textAttributes);
 
   auto attributedString = facebook::react::AttributedString{};
   // auto attachments = facebook::react::BaseTextShadowNode::Attachments{};
@@ -465,7 +465,7 @@ facebook::react::AttributedString WindowsTextInputComponentView::getAttributedSt
   // if (!m_props->text.empty()) {
   if (!text.empty()) {
     auto textAttributes = facebook::react::TextAttributes::defaultTextAttributes();
-    textAttributes.apply(m_props->textAttributes);
+    textAttributes.apply(windowsTextInputProps().textAttributes);
     auto fragment = facebook::react::AttributedString::Fragment{};
     fragment.string = text;
     // fragment.string = m_props->text;
@@ -486,14 +486,12 @@ WindowsTextInputComponentView::WindowsTextInputComponentView(
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
+          WindowsTextInputComponentView::defaultProps(),
           compContext,
           tag,
           reactContext,
           ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
           false) {
-  static auto const defaultProps = std::make_shared<facebook::react::WindowsTextInputProps const>();
-  m_props = defaultProps;
-
   /*
   m_textChangedRevoker =
       m_element.TextChanged(winrt::auto_revoke, [this](auto sender, xaml::Controls::TextChangedEventArgs args) {
@@ -950,20 +948,16 @@ void WindowsTextInputComponentView::onFocusGained() noexcept {
   }
 }
 
-bool WindowsTextInputComponentView::focusable() const noexcept {
-  return m_props->focusable;
-}
-
 std::string WindowsTextInputComponentView::DefaultControlType() const noexcept {
   return "textinput";
 }
 
 std::string WindowsTextInputComponentView::DefaultAccessibleName() const noexcept {
-  return m_props->placeholder;
+  return windowsTextInputProps().placeholder;
 }
 
 std::string WindowsTextInputComponentView::DefaultHelpText() const noexcept {
-  return m_props->placeholder;
+  return windowsTextInputProps().placeholder;
 }
 
 void WindowsTextInputComponentView::updateCursorColor(
@@ -981,19 +975,13 @@ void WindowsTextInputComponentView::updateCursorColor(
 void WindowsTextInputComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
-  const auto &oldTextInputProps = *std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(m_props);
+  const auto &oldTextInputProps =
+      *std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(oldProps ? oldProps : viewProps());
   const auto &newTextInputProps = *std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(props);
 
   DWORD propBitsMask = 0;
   DWORD propBits = 0;
 
-  ensureVisual();
-
-  if (oldTextInputProps.testId != newTextInputProps.testId) {
-    m_visual.Comment(winrt::to_hstring(newTextInputProps.testId));
-  }
-  // update BaseComponentView props
-  updateTransformProps(oldTextInputProps, newTextInputProps, m_visual);
   Super::updateProps(props, oldProps);
 
   if (!facebook::react::floatEquality(
@@ -1105,8 +1093,6 @@ void WindowsTextInputComponentView::updateProps(
   }
   */
 
-  m_props = std::static_pointer_cast<facebook::react::WindowsTextInputProps const>(props);
-
   if (propBitsMask != 0) {
     DrawBlock db(*this);
     winrt::check_hresult(m_textServices->OnTxPropertyBitsChange(propBitsMask, propBits));
@@ -1177,10 +1163,6 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
   // Set Position & Size Properties
 
-  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
-  }
-
   if ((layoutMetrics.pointScaleFactor != m_layoutMetrics.pointScaleFactor)) {
     LRESULT res;
     winrt::check_hresult(m_textServices->TxSendMessage(
@@ -1202,10 +1184,6 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
 
   m_imgWidth = newWidth;
   m_imgHeight = newHeight;
-
-  m_visual.Size(
-      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
 }
 
 // When we are notified by RichEdit that the text changed, we need to notify JS
@@ -1282,13 +1260,16 @@ void WindowsTextInputComponentView::setAcccessiblityValue(std::string &&value) n
 }
 
 bool WindowsTextInputComponentView::getAcccessiblityIsReadOnly() noexcept {
-  return !m_props->editable;
+  return !windowsTextInputProps().editable;
 }
 
-void WindowsTextInputComponentView::prepareForRecycle() noexcept {}
+facebook::react::SharedViewProps WindowsTextInputComponentView::defaultProps() noexcept {
+  static auto const defaultProps = std::make_shared<facebook::react::WindowsTextInputProps const>();
+  return defaultProps;
+}
 
-facebook::react::SharedViewProps WindowsTextInputComponentView::viewProps() noexcept {
-  return m_props;
+const facebook::react::WindowsTextInputProps &WindowsTextInputComponentView::windowsTextInputProps() const noexcept {
+  return *std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(viewProps());
 }
 
 void WindowsTextInputComponentView::UpdateCharFormat() noexcept {
@@ -1311,17 +1292,18 @@ void WindowsTextInputComponentView::UpdateCharFormat() noexcept {
   // cfNew.bPitchAndFamily = FF_DONTCARE;
 
   // set font size -- 15 to convert twips to pt
-  float fontSize = m_props->textAttributes.fontSize;
+  const auto &props = windowsTextInputProps();
+  float fontSize = props.textAttributes.fontSize;
   if (std::isnan(fontSize))
     fontSize = facebook::react::TextAttributes::defaultTextAttributes().fontSize;
-  // TODO get fontSize from m_props->textAttributes, or defaultTextAttributes, or fragment?
+  // TODO get fontSize from props.textAttributes, or defaultTextAttributes, or fragment?
   cfNew.dwMask |= CFM_SIZE;
   cfNew.yHeight = static_cast<LONG>(fontSize * 15);
 
   // set bold
   cfNew.dwMask |= CFM_WEIGHT;
-  cfNew.wWeight = m_props->textAttributes.fontWeight ? static_cast<WORD>(*m_props->textAttributes.fontWeight)
-                                                     : DWRITE_FONT_WEIGHT_NORMAL;
+  cfNew.wWeight =
+      props.textAttributes.fontWeight ? static_cast<WORD>(*props.textAttributes.fontWeight) : DWRITE_FONT_WEIGHT_NORMAL;
 
   // set font style
   // cfNew.dwMask |= (CFM_ITALIC | CFM_STRIKEOUT | CFM_UNDERLINE);
@@ -1392,7 +1374,7 @@ void WindowsTextInputComponentView::ensureDrawingSurface() noexcept {
     m_drawingSurface.HorizontalAlignmentRatio(0.f);
     m_drawingSurface.VerticalAlignmentRatio(0.f);
     m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None);
-    m_visual.Brush(m_drawingSurface);
+    Visual().as<Experimental::ISpriteVisual>().Brush(m_drawingSurface);
   }
 }
 
@@ -1406,11 +1388,12 @@ winrt::com_ptr<::IDWriteTextLayout> WindowsTextInputComponentView::CreatePlaceho
   winrt::com_ptr<::IDWriteTextLayout> textLayout = nullptr;
   facebook::react::AttributedString attributedString;
   facebook::react::AttributedString::Fragment fragment1;
-  facebook::react::TextAttributes textAttributes = m_props->textAttributes;
-  if (std::isnan(m_props->textAttributes.fontSize)) {
+  const auto &props = windowsTextInputProps();
+  facebook::react::TextAttributes textAttributes = props.textAttributes;
+  if (std::isnan(props.textAttributes.fontSize)) {
     textAttributes.fontSize = 12.0f;
   }
-  fragment1.string = m_props->placeholder;
+  fragment1.string = props.placeholder;
   fragment1.textAttributes = textAttributes;
   attributedString.appendFragment(fragment1);
 
@@ -1461,8 +1444,9 @@ void WindowsTextInputComponentView::DrawText() noexcept {
 
       winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient));
 
-      if (facebook::react::isColorMeaningful(m_props->backgroundColor)) {
-        auto backgroundColor = theme()->D2DColor(*m_props->backgroundColor);
+      const auto &props = windowsTextInputProps();
+      if (facebook::react::isColorMeaningful(props.backgroundColor)) {
+        auto backgroundColor = theme()->D2DColor(*props.backgroundColor);
         winrt::com_ptr<ID2D1SolidColorBrush> backgroundBrush;
         winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(backgroundColor, backgroundBrush.put()));
         const D2D1_RECT_F fillRect = {
@@ -1478,11 +1462,11 @@ void WindowsTextInputComponentView::DrawText() noexcept {
       winrt::check_hresult(hrDraw);
 
       // draw placeholder text if needed
-      if (!m_props->placeholder.empty() && GetTextFromRichEdit().empty()) {
+      if (!props.placeholder.empty() && GetTextFromRichEdit().empty()) {
         // set brush color
         winrt::com_ptr<ID2D1SolidColorBrush> brush;
-        if (m_props->placeholderTextColor) {
-          auto color = theme()->D2DColor(*m_props->placeholderTextColor);
+        if (props.placeholderTextColor) {
+          auto color = theme()->D2DColor(*props.placeholderTextColor);
           winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
         } else {
           winrt::check_hresult(
@@ -1507,65 +1491,29 @@ void WindowsTextInputComponentView::DrawText() noexcept {
   m_needsRedraw = false;
 }
 
-facebook::react::Tag WindowsTextInputComponentView::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 ((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
-    ComponentView
-    *>(child)->hitTest(ptLocal, localPt); return targetTag != -1;
-        }))
-      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 WindowsTextInputComponentView::ensureVisual() noexcept {
-  if (!m_visual) {
-    HrEnsureRichEd20Loaded();
-    m_visual = m_compContext.CreateSpriteVisual();
-    m_textHost = winrt::make<CompTextHost>(this);
-    winrt::com_ptr<::IUnknown> spUnk;
-    winrt::check_hresult(g_pfnCreateTextServices(nullptr, m_textHost.get(), spUnk.put()));
-    spUnk.as(m_textServices);
-    OuterVisual().InsertAt(m_visual, 0);
-  }
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
+WindowsTextInputComponentView::createVisual() noexcept {
+  HrEnsureRichEd20Loaded();
+  auto visual = m_compContext.CreateSpriteVisual();
+  m_textHost = winrt::make<CompTextHost>(this);
+  winrt::com_ptr<::IUnknown> spUnk;
+  winrt::check_hresult(g_pfnCreateTextServices(nullptr, m_textHost.get(), spUnk.put()));
+  spUnk.as(m_textServices);
+
+  m_caretVisual = m_compContext.CreateCaretVisual();
+  visual.InsertAt(m_caretVisual.InnerVisual(), 0);
+  m_caretVisual.IsVisible(false);
 
-  if (!m_caretVisual) {
-    m_caretVisual = m_compContext.CreateCaretVisual();
-    m_visual.InsertAt(m_caretVisual.InnerVisual(), 0);
-    m_caretVisual.IsVisible(false);
-  }
+  return visual;
 }
 
 void WindowsTextInputComponentView::onThemeChanged() noexcept {
-  auto props = std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(m_props);
-  updateCursorColor(props->cursorColor, props->textAttributes.foregroundColor);
+  const auto &props = windowsTextInputProps();
+  updateCursorColor(props.cursorColor, props.textAttributes.foregroundColor);
   DrawText();
   base_type::onThemeChanged();
 }
 
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual WindowsTextInputComponentView::Visual()
-    const noexcept {
-  return m_visual;
-}
-
 winrt::Microsoft::ReactNative::ComponentView WindowsTextInputComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,