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

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

@@ -11,14 +11,16 @@
 #pragma warning(push)
 #pragma warning(disable : 4305)
 #include <react/renderer/components/scrollview/ScrollViewProps.h>
+#include <react/renderer/components/scrollview/ScrollViewShadowNode.h>
 #pragma warning(pop)
+#include "Composition.ScrollViewComponentView.g.h"
 #include <winrt/Windows.UI.Composition.interactions.h>
 
-namespace Microsoft::ReactNative {
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct ScrollViewComponentView;
+struct ScrollBarComponent;
 
-struct ScrollViewComponentView : CompositionBaseComponentView {
+struct ScrollViewComponentView : ScrollViewComponentViewT<ScrollViewComponentView, ComponentView> {
   /*
 struct ScrollInteractionTrackerOwner : public winrt::implements<
                                            ScrollInteractionTrackerOwner,
@@ -49,15 +51,19 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
 };
 
 */
+  using Super = ScrollViewComponentViewT<ScrollViewComponentView, ComponentView>;
 
-  using Super = CompositionBaseComponentView;
-
-  [[nodiscard]] static std::shared_ptr<ScrollViewComponentView> Create(
+  [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-      facebook::react::Tag tag) noexcept;
-
-  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
-  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
+
+  void MountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
+  void UnmountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
   void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
       override;
   void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
@@ -65,47 +71,64 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   void updateLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
-  void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
   void prepareForRecycle() noexcept override;
-  facebook::react::Props::Shared props() noexcept override;
-  void onKeyDown(
+  facebook::react::SharedViewProps viewProps() noexcept override;
+  void OnKeyDown(
       const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
       const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
 
-  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
+  void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
+      override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
       const noexcept override;
+  facebook::react::Point getClientOffset() const noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
 
-  void onPointerWheelChanged(
+  void onThemeChanged() noexcept override;
+  void OnPointerReleased(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerPressed(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerMoved(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerWheelChanged(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerCaptureLost() noexcept override;
 
-  void StartBringIntoView(BringIntoViewOptions &&args) noexcept override;
+  void StartBringIntoView(winrt::Microsoft::ReactNative::implementation::BringIntoViewOptions &&args) noexcept override;
   virtual std::string DefaultControlType() const noexcept;
 
- private:
+  void scrollTo(winrt::Windows::Foundation::Numerics::float3 offset, bool animate) noexcept;
+
   ScrollViewComponentView(
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-      facebook::react::Tag tag);
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
-  void ensureVisual() noexcept;
-  void updateContentVisualSize() noexcept;
-  bool scrollToEnd(bool animate) noexcept;
-  bool scrollToStart(bool animate) noexcept;
   bool pageUp(bool animate) noexcept;
   bool pageDown(bool animate) noexcept;
   bool lineUp(bool animate) noexcept;
   bool lineDown(bool animate) noexcept;
   bool lineLeft(bool animate) noexcept;
   bool lineRight(bool animate) noexcept;
+
+ private:
+  void ensureVisual() noexcept;
+  void updateContentVisualSize() noexcept;
+  bool scrollToEnd(bool animate) noexcept;
+  bool scrollToStart(bool animate) noexcept;
   bool scrollDown(float delta, bool animate) noexcept;
   bool scrollUp(float delta, bool animate) noexcept;
   bool scrollLeft(float delta, bool aniamte) noexcept;
   bool scrollRight(float delta, bool animate) noexcept;
+  void updateBackgroundColor(const facebook::react::SharedColor &color) noexcept;
+  void updateStateWithContentOffset() noexcept;
 
   facebook::react::Size m_contentSize;
   winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
   winrt::Microsoft::ReactNative::Composition::IScrollVisual m_scrollVisual{nullptr};
+  std::shared_ptr<ScrollBarComponent> m_horizontalScrollbarComponent{nullptr};
+  std::shared_ptr<ScrollBarComponent> m_verticalScrollbarComponent{nullptr};
   winrt::Microsoft::ReactNative::Composition::IScrollVisual::ScrollPositionChanged_revoker
       m_scrollPositionChangedRevoker{};
 
@@ -116,9 +139,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool m_isHorizontal = false;
   bool m_changeViewAfterLoaded = false;
   bool m_dismissKeyboardOnDrag = false;
-
- private:
-  bool shouldBeControl() const noexcept;
+  std::shared_ptr<facebook::react::ScrollViewShadowNode::ConcreteState const> m_state;
 };
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -5,41 +5,67 @@
 #pragma once
 
 #include "SwitchComponentView.h"
-#include "Composition/AutoDraw.h"
+#include <AutoDraw.h>
+#include <Fabric/AbiViewProps.h>
 #include "CompositionDynamicAutomationProvider.h"
 #include "RootComponentView.h"
 
-namespace Microsoft::ReactNative {
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+namespace SwitchConstants {
+// https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.5-experimental1/controls/dev/CommonStyles/ToggleSwitch_themeresources.xaml
+constexpr float thumbMargin = 4.0f;
+constexpr float thumbWidth = 12.0f;
+constexpr float thumbWidthHover = 14.0f;
+constexpr float thumbWidthPressed = 17.0f;
+constexpr float trackWidth = 40.0f;
+constexpr float trackHeight = 20.0f;
+constexpr float trackCornerRadius = 10.0f;
+constexpr float trackStrokeThickness = 1.0f;
+} // namespace SwitchConstants
 
 SwitchComponentView::SwitchComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
-    : Super(compContext, tag), m_context(reactContext) {
+    : base_type(
+          compContext,
+          tag,
+          reactContext,
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
+          false) {
   m_props = std::make_shared<facebook::react::SwitchProps const>();
 }
 
-std::shared_ptr<SwitchComponentView> SwitchComponentView::Create(
+winrt::Microsoft::ReactNative::ComponentView SwitchComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
-  return std::shared_ptr<SwitchComponentView>(new SwitchComponentView(compContext, tag, reactContext));
+  return winrt::make<SwitchComponentView>(compContext, tag, reactContext);
 }
 
-void SwitchComponentView::mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
+void SwitchComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
   assert(false);
+  base_type::MountChildComponentView(childComponentView, index);
 }
 
-void SwitchComponentView::unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
+void SwitchComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
   assert(false);
+  base_type::UnmountChildComponentView(childComponentView, index);
 }
 
-void SwitchComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
-  if (commandName == "setValue") {
+void SwitchComponentView::HandleCommand(
+    winrt::hstring commandName,
+    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+  if (commandName == L"setValue") {
     // TODO - Current implementation always aligns with JS value
     // This will be needed when we move to using WinUI controls
   } else {
-    Super::handleCommand(commandName, arg);
+    Super::HandleCommand(commandName, args);
   }
 }
 
@@ -54,13 +80,15 @@ void SwitchComponentView::updateProps(
   if (oldViewProps.backgroundColor != newViewProps.backgroundColor ||
       oldViewProps.thumbTintColor != newViewProps.thumbTintColor || oldViewProps.value != newViewProps.value ||
       oldViewProps.disabled != newViewProps.disabled) {
-    m_drawingSurface = nullptr;
+    m_visualUpdateRequired = true;
+  }
+  if (oldViewProps.testId != newViewProps.testId) {
+    m_visual.Comment(winrt::to_hstring(newViewProps.testId));
   }
 
   // update BaseComponentView props
-  updateShadowProps(oldViewProps, newViewProps, m_visual);
   updateTransformProps(oldViewProps, newViewProps, m_visual);
-  updateBorderProps(oldViewProps, newViewProps);
+  Super::updateProps(props, oldProps);
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
 
@@ -78,114 +106,152 @@ void SwitchComponentView::updateLayoutMetrics(
     OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
   }
 
-  updateBorderLayoutMetrics(layoutMetrics, *m_props);
-  m_layoutMetrics = layoutMetrics;
-
-  UpdateCenterPropertySet();
+  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-}
 
-void SwitchComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  ensureDrawingSurface();
-
-  if (m_needsBorderUpdate) {
-    m_needsBorderUpdate = false;
-    UpdateSpecialBorderLayers(m_layoutMetrics, *m_props);
+  if (oldLayoutMetrics.pointScaleFactor != layoutMetrics.pointScaleFactor) {
+    handleScaleChange();
   }
-}
-
-void SwitchComponentView::Draw() noexcept {
-  POINT offset;
-
-  ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(m_drawingSurface, &offset);
-  if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
-    const auto switchProps = std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
 
-    d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
-    if (m_props->backgroundColor) {
-      d2dDeviceContext->Clear(m_props->backgroundColor.AsD2DColor());
-    }
-
-    float offsetX = static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor);
-    float offsetY = static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor);
-
-    // https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/ToggleSwitch_themeresources.xaml
-    constexpr float thumbMargin = 3.0f;
-    constexpr float thumbRadius = 7.0f;
-    constexpr float trackWidth = 40.0f;
-    constexpr float trackHeight = 20.0f;
-    constexpr float trackCornerRadius = 10.0f;
-
-    auto frame{m_layoutMetrics.frame.size};
-    float trackMarginX = (frame.width - trackWidth) / 2;
-    float trackMarginY = (frame.height - trackHeight) / 2;
-
-    D2D1_RECT_F trackRect = D2D1::RectF(
-        offsetX + trackMarginX,
-        offsetY + trackMarginY,
-        offsetX + trackMarginX + trackWidth,
-        offsetY + trackMarginY + trackHeight);
+  auto frame{m_layoutMetrics.frame.size};
+  m_trackVisual.Offset(
+      {(frame.width - SwitchConstants::trackWidth) * m_layoutMetrics.pointScaleFactor / 2.0f,
+       (frame.height - SwitchConstants::trackHeight) * m_layoutMetrics.pointScaleFactor / 2.0f,
+       0.0f});
+}
 
-    winrt::com_ptr<ID2D1SolidColorBrush> defaultBrush;
+void SwitchComponentView::handleScaleChange() noexcept {
+  m_trackVisual.Size(
+      {SwitchConstants::trackWidth * m_layoutMetrics.pointScaleFactor,
+       SwitchConstants::trackHeight * m_layoutMetrics.pointScaleFactor});
 
-    D2D1_COLOR_F defaultColor =
-        switchProps->disabled ? facebook::react::greyColor().AsD2DColor() : facebook::react::blackColor().AsD2DColor();
+  m_trackVisual.CornerRadius(
+      {SwitchConstants::trackCornerRadius * m_layoutMetrics.pointScaleFactor,
+       SwitchConstants::trackCornerRadius * m_layoutMetrics.pointScaleFactor});
 
-    winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(defaultColor, defaultBrush.put()));
+  m_visualUpdateRequired = true;
+}
 
-    winrt::Windows::UI::Color thumbColor;
-    if (!switchProps->disabled && switchProps->thumbTintColor) {
-      thumbColor = switchProps->thumbTintColor.AsWindowsColor();
+void SwitchComponentView::updateVisuals() noexcept {
+  const auto switchProps = std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
+  auto &theme = *this->theme();
+  winrt::Microsoft::ReactNative::Composition::IBrush defaultColor;
+  winrt::Microsoft::ReactNative::Composition::IBrush fillColor;
+  winrt::Microsoft::ReactNative::Composition::IBrush thumbFill;
+
+  auto thumbWidth = SwitchConstants::thumbWidth;
+  auto thumbHeight = SwitchConstants::thumbWidth;
+
+  if (switchProps->value) {
+    if (switchProps->disabled) {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOnDisabled");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOnDisabled");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOnDisabled");
+    } else if (m_pressed) {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOnPressed");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOnPressed");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOnPressed");
+    } else if (m_hovered) {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOnPointerOver");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOnPointerOver");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOnPointerOver");
     } else {
-      thumbColor = winrt::Windows::UI::Colors::Gray();
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOn");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOn");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOn");
     }
+  } else {
+    if (switchProps->disabled) {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOffDisabled");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOffDisabled");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOffDisabled");
+    } else if (m_pressed) {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOffPressed");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOffPressed");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOffPressed");
+    } else if (m_hovered) {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOffPointerOver");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOffPointerOver");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOffPointerOver");
+    } else {
+      defaultColor = theme.PlatformBrush("ToggleSwitchStrokeOff");
+      fillColor = theme.PlatformBrush("ToggleSwitchFillOff");
+      thumbFill = theme.PlatformBrush("ToggleSwitchKnobFillOff");
+    }
+  }
 
-    const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-    float oldDpiX, oldDpiY;
-    d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-    d2dDeviceContext->SetDpi(dpi, dpi);
+  if (switchProps->disabled) {
+    thumbWidth = SwitchConstants::thumbWidth;
+  } else if (m_pressed) {
+    thumbWidth = SwitchConstants::thumbWidthPressed;
+    thumbHeight = SwitchConstants::thumbWidthHover;
+  } else if (m_hovered) {
+    thumbWidth = SwitchConstants::thumbWidthHover;
+    thumbHeight = SwitchConstants::thumbWidthHover;
+  } else {
+    thumbWidth = SwitchConstants::thumbWidth;
+  }
 
-    // switch track - outline
-    D2D1_ROUNDED_RECT track = D2D1::RoundedRect(trackRect, trackCornerRadius, trackCornerRadius);
-    if ((!switchProps->onTintColor && switchProps->value) || (!switchProps->tintColor && !switchProps->value)) {
-      d2dDeviceContext->DrawRoundedRectangle(track, defaultBrush.get());
-    }
+  if (!switchProps->disabled && switchProps->thumbTintColor) {
+    thumbFill = theme.Brush(*switchProps->thumbTintColor);
+  }
 
-    // switch track - fill
-    winrt::com_ptr<ID2D1SolidColorBrush> trackBrush;
-    if (!switchProps->disabled && switchProps->onTintColor && switchProps->value) {
-      winrt::check_hresult(
-          d2dDeviceContext->CreateSolidColorBrush(switchProps->onTintColor.AsD2DColor(), trackBrush.put()));
-      d2dDeviceContext->FillRoundedRectangle(track, trackBrush.get());
-    } else if (!switchProps->disabled && switchProps->tintColor && !switchProps->value) {
-      winrt::check_hresult(
-          d2dDeviceContext->CreateSolidColorBrush(switchProps->tintColor.AsD2DColor(), trackBrush.put()));
-      d2dDeviceContext->FillRoundedRectangle(track, trackBrush.get());
-    }
+  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);
+  }
+
+  // switch track - outline
+  if ((!switchProps->onTintColor && switchProps->value) || (!switchProps->tintColor && !switchProps->value)) {
+    m_trackVisual.StrokeThickness(std::round(SwitchConstants::trackStrokeThickness * m_layoutMetrics.pointScaleFactor));
+    m_trackVisual.StrokeBrush(defaultColor);
+  } else {
+    m_trackVisual.StrokeThickness(0.0f);
+  }
 
-    // switch thumb - made with composition
-    float thumbX = (trackMarginX + thumbMargin) * m_layoutMetrics.pointScaleFactor;
-    float thumbY = (trackMarginY + thumbMargin) * m_layoutMetrics.pointScaleFactor;
+  m_trackVisual.Brush(fillColor);
 
-    if (switchProps->value) {
-      thumbX = (trackMarginX + trackWidth - thumbRadius - thumbRadius - thumbMargin) * m_layoutMetrics.pointScaleFactor;
-    }
+  float offsetY = ((SwitchConstants::trackHeight - thumbHeight) * m_layoutMetrics.pointScaleFactor) / 2.0f;
+
+  if (m_supressAnimationForNextFrame) {
+    m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::None);
+  }
 
-    m_thumbVisual.Size(
-        {thumbRadius * m_layoutMetrics.pointScaleFactor, thumbRadius * m_layoutMetrics.pointScaleFactor});
-    m_thumbVisual.Position({thumbX, thumbY});
-    m_thumbVisual.Color(thumbColor);
+  if (switchProps->value) {
+    m_thumbVisual.Offset(
+        {(SwitchConstants::trackWidth - (SwitchConstants::thumbMargin + thumbWidth)) * m_layoutMetrics.pointScaleFactor,
+         offsetY,
+         0.0f});
+  } else {
+    m_thumbVisual.Offset({SwitchConstants::thumbMargin * m_layoutMetrics.pointScaleFactor, offsetY, 0.0f});
+  }
+  m_thumbVisual.Size({thumbWidth * m_layoutMetrics.pointScaleFactor, thumbHeight * m_layoutMetrics.pointScaleFactor});
+  m_thumbVisual.CornerRadius(
+      {(thumbHeight * m_layoutMetrics.pointScaleFactor) / 2.0f,
+       (thumbHeight * m_layoutMetrics.pointScaleFactor) / 2.0f});
+  m_thumbVisual.Brush(thumbFill);
+
+  if (m_supressAnimationForNextFrame) {
+    m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::SwitchThumb);
+    m_supressAnimationForNextFrame = false;
+  }
+}
 
-    // Restore old dpi setting
-    d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
+void SwitchComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
+  if (m_visualUpdateRequired) {
+    m_visualUpdateRequired = false;
+    updateVisuals();
   }
+
+  base_type::FinalizeUpdates(updateMask);
 }
 
 void SwitchComponentView::prepareForRecycle() noexcept {}
 
-facebook::react::Props::Shared SwitchComponentView::props() noexcept {
+facebook::react::SharedViewProps SwitchComponentView::viewProps() noexcept {
   return m_props;
 }
 
@@ -193,27 +259,15 @@ void SwitchComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     m_visual = m_compContext.CreateSpriteVisual();
     OuterVisual().InsertAt(m_visual, 0);
-  }
-
-  if (!m_thumbVisual) {
-    m_thumbVisual = m_compContext.CreateSwitchThumbVisual();
-    m_visual.InsertAt(m_thumbVisual.InnerVisual(), 0);
-  }
-}
 
-void SwitchComponentView::ensureDrawingSurface() noexcept {
-  if (!m_drawingSurface) {
-    winrt::Windows::Foundation::Size surfaceSize = {
-        m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
-        m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor};
-    m_drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
-        surfaceSize,
-        winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
-        winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
+    m_trackVisual = m_compContext.CreateRoundedRectangleVisual();
+    m_visual.InsertAt(m_trackVisual, 0);
 
-    Draw();
+    m_thumbVisual = m_compContext.CreateRoundedRectangleVisual();
+    m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::SwitchThumb);
+    m_trackVisual.InsertAt(m_thumbVisual, 0);
 
-    m_visual.Brush(m_drawingSurface);
+    handleScaleChange();
   }
 }
 
@@ -228,7 +282,7 @@ facebook::react::Tag SwitchComponentView::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;
@@ -238,21 +292,67 @@ winrt::Microsoft::ReactNative::Composition::IVisual SwitchComponentView::Visual(
   return m_visual;
 }
 
-void SwitchComponentView::onPointerPressed(
+void SwitchComponentView::onThemeChanged() noexcept {
+  updateVisuals();
+  Super::onThemeChanged();
+}
+
+void SwitchComponentView::OnPointerPressed(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  // Only care about primary input
+  if (!args.GetCurrentPoint(-1).Properties().IsPrimary()) {
+    return;
+  }
+
   const auto switchProps = std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
 
   if (!switchProps->disabled) {
+    m_pressed = true;
+    m_supressAnimationForNextFrame = true;
+
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*this);
-    }
-    if (toggle()) {
-      args.Handled(true);
+      root->TrySetFocusedComponent(*get_strong());
     }
+
+    updateVisuals();
+  }
+  base_type::OnPointerPressed(args);
+}
+
+void SwitchComponentView::OnPointerReleased(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  // Only care about primary input
+  if (!args.GetCurrentPoint(-1).Properties().IsPrimary()) {
+    return;
+  }
+
+  if (toggle()) {
+    args.Handled(true);
+  } else {
+    m_supressAnimationForNextFrame = true;
   }
+
+  m_pressed = false;
+  base_type::OnPointerReleased(args);
+}
+
+void SwitchComponentView::OnPointerEntered(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  m_hovered = true;
+  m_supressAnimationForNextFrame = true;
+  updateVisuals();
+  base_type::OnPointerEntered(args);
+}
+
+void SwitchComponentView::OnPointerExited(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  m_hovered = false;
+  m_supressAnimationForNextFrame = true;
+  updateVisuals();
+  base_type::OnPointerExited(args);
 }
 
-void SwitchComponentView::onKeyUp(
+void SwitchComponentView::OnKeyUp(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
   if (args.Key() == winrt::Windows::System::VirtualKey::Space) {
@@ -260,7 +360,7 @@ void SwitchComponentView::onKeyUp(
       args.Handled(true);
     }
   }
-  Super::onKeyUp(source, args);
+  Super::OnKeyUp(source, args);
 }
 
 bool SwitchComponentView::toggle() noexcept {
@@ -273,7 +373,7 @@ bool SwitchComponentView::toggle() noexcept {
 
   facebook::react::SwitchEventEmitter::OnChange args;
   args.value = !(switchProps->value);
-  args.target = tag();
+  args.target = Tag();
 
   switchEventEmitter->onChange(args);
   return true;
@@ -287,4 +387,4 @@ std::string SwitchComponentView::DefaultControlType() const noexcept {
   return "switch";
 }
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation