react-native-windows 0.68.3 → 0.69.0-preview.1

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp

@@ -7,16 +7,23 @@
 #include <Fabric/ComponentView.h>
 #include <Fabric/FabricUIManagerModule.h>
 #include <Fabric/ReactNativeConfigProperties.h>
+#ifndef CORE_ABI
 #include <Fabric/ViewComponentView.h>
+#endif // CORE_ABI
 #include <IReactContext.h>
 #include <IReactRootView.h>
+#ifndef CORE_ABI
 #include <IXamlRootView.h>
+#endif // CORE_ABI
 #include <JSI/jsi.h>
 #include <SchedulerSettings.h>
 #include <UI.Xaml.Controls.h>
 #include <react/components/rnwcore/ComponentDescriptors.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/image/ImageComponentDescriptor.h>
+#ifndef CORE_ABI
+#include <react/renderer/components/slider/SliderComponentDescriptor.h>
+#endif // CORE_ABI
 #include <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #include <react/renderer/components/text/RawTextComponentDescriptor.h>
 #include <react/renderer/components/text/TextComponentDescriptor.h>
@@ -28,6 +35,9 @@
 #include <react/utils/ContextContainer.h>
 #include <runtimeexecutor/ReactCommon/RuntimeExecutor.h>
 #include <winrt/Windows.Graphics.Display.h>
+#ifndef CORE_ABI
+#include "TextInput/WindowsTextInputComponentDescriptor.h"
+#endif // CORE_ABI
 #include "Unicode.h"
 
 #pragma warning(push)
@@ -75,6 +85,7 @@ class AsyncEventBeat final : public facebook::react::EventBeat { //, public face
         return;
       }
 
+#ifndef CORE_ABI
       // TODO: should use something other than CompositionTarget::Rendering ... not sure where to plug this in yet
       // Getting the beat running to unblock basic events
       m_rendering = xaml::Media::CompositionTarget::Rendering(
@@ -86,6 +97,7 @@ class AsyncEventBeat final : public facebook::react::EventBeat { //, public face
 
             tick();
           });
+#endif // CORE_ABI
     });
 
     // eventBeatManager->addObserver(*this);
@@ -142,12 +154,20 @@ std::shared_ptr<facebook::react::ComponentDescriptorProviderRegistry const> shar
         facebook::react::concreteComponentDescriptorProvider<facebook::react::RawTextComponentDescriptor>());
     providerRegistry->add(
         facebook::react::concreteComponentDescriptorProvider<facebook::react::ScrollViewComponentDescriptor>());
+#ifndef CORE_ABI
     providerRegistry->add(
-        facebook::react::concreteComponentDescriptorProvider<facebook::react::TextComponentDescriptor>());
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::SliderComponentDescriptor>());
+#endif // CORE_ABI
+    providerRegistry->add(
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::SwitchComponentDescriptor>());
     providerRegistry->add(
-        facebook::react::concreteComponentDescriptorProvider<facebook::react::TextInputComponentDescriptor>());
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::TextComponentDescriptor>());
     providerRegistry->add(
         facebook::react::concreteComponentDescriptorProvider<facebook::react::ViewComponentDescriptor>());
+#ifndef CORE_ABI
+    providerRegistry->add(
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::WindowsTextInputComponentDescriptor>());
+#endif // CORE_ABI
     return providerRegistry;
   }();
 
@@ -161,6 +181,10 @@ void FabricUIManager::installFabricUIManager() noexcept {
   std::lock_guard<std::mutex> schedulerLock(m_schedulerMutex);
 
   facebook::react::ContextContainer::Shared contextContainer = std::make_shared<facebook::react::ContextContainer>();
+
+  // This allows access to our ReactContext from the contextContainer thats passed around the fabric codebase
+  contextContainer->insert("MSRN.ReactContext", m_context);
+
   auto runtimeExecutor = SchedulerSettings::GetRuntimeExecutor(m_context.Properties());
 
   // TODO: T31905686 Create synchronous Event Beat
@@ -200,14 +224,15 @@ void FabricUIManager::installFabricUIManager() noexcept {
   toolbox.runtimeExecutor = runtimeExecutor;
   toolbox.synchronousEventBeatFactory = synchronousBeatFactory;
   toolbox.asynchronousEventBeatFactory = asynchronousBeatFactory;
+  toolbox.backgroundExecutor = [context = m_context,
+                                dispatcher = Mso::DispatchQueue::MakeLooperQueue()](std::function<void()> &&callback) {
+    if (context.UIDispatcher().HasThreadAccess()) {
+      callback();
+      return;
+    }
 
-  /*
-  if (m_reactNativeConfig->getBool(
-      "react_fabric:enable_background_executor_android")) {
-    backgroundExecutor_ = std::make_unique<JBackgroundExecutor>();
-    toolbox.backgroundExecutor = backgroundExecutor_->get();
-  }
-  */
+    dispatcher.Post(std::move(callback));
+  };
 
   m_scheduler = std::make_shared<facebook::react::Scheduler>(
       toolbox, (/*animationDriver_ ? animationDriver_.get() :*/ nullptr), this);
@@ -223,10 +248,12 @@ void FabricUIManager::startSurface(
     facebook::react::SurfaceId surfaceId,
     const std::string &moduleName,
     const folly::dynamic &initialProps) noexcept {
+#ifndef CORE_ABI
   auto xamlRootView = static_cast<IXamlRootView *>(rootview);
   auto rootFE = xamlRootView->GetXamlView().as<xaml::FrameworkElement>();
 
   m_surfaceRegistry.insert({surfaceId, xamlRootView->GetXamlView()});
+#endif // CORE_ABI
 
   m_context.UIDispatcher().Post([self = shared_from_this(), surfaceId]() {
     self->m_registry.dequeueComponentViewWithComponentHandle(facebook::react::RootShadowNode::Handle(), surfaceId);
@@ -239,6 +266,7 @@ void FabricUIManager::startSurface(
       winrt::Windows::Graphics::Display::DisplayInformation::GetForCurrentView().RawPixelsPerViewPixel());
 
   facebook::react::LayoutConstraints constraints;
+#ifndef CORE_ABI
   constraints.minimumSize.height = static_cast<facebook::react::Float>(rootFE.ActualHeight());
   constraints.minimumSize.width = static_cast<facebook::react::Float>(rootFE.ActualWidth());
   constraints.maximumSize.height = static_cast<facebook::react::Float>(rootFE.ActualHeight());
@@ -246,6 +274,7 @@ void FabricUIManager::startSurface(
   constraints.layoutDirection = rootFE.FlowDirection() == xaml::FlowDirection::LeftToRight
       ? facebook::react::LayoutDirection::LeftToRight
       : facebook::react::LayoutDirection::RightToLeft;
+#endif // CORE_ABI
 
   m_surfaceManager->startSurface(
       surfaceId,
@@ -276,12 +305,14 @@ void FabricUIManager::constraintSurfaceLayout(
 
 void FabricUIManager::didMountComponentsWithRootTag(facebook::react::SurfaceId surfaceId) noexcept {
   auto rootComponentViewDescriptor = m_registry.componentViewDescriptorWithTag(surfaceId);
+#ifndef CORE_ABI
   auto children = m_surfaceRegistry.at(surfaceId).as<xaml::Controls::Panel>().Children();
 
   uint32_t index;
   if (!children.IndexOf(static_cast<ViewComponentView &>(*rootComponentViewDescriptor.view).Element(), index)) {
     children.Append(static_cast<ViewComponentView &>(*rootComponentViewDescriptor.view).Element());
   }
+#endif // CORE_ABI
 }
 
 struct RemoveDeleteMetadata {
@@ -387,15 +418,19 @@ void FabricUIManager::performTransaction(facebook::react::MountingCoordinator::S
   auto surfaceId = mountingCoordinator->getSurfaceId();
 
   mountingCoordinator->getTelemetryController().pullTransaction(
-      [&](facebook::react::MountingTransactionMetadata metadata) {
+      [&](facebook::react::MountingTransaction const &transaction,
+          facebook::react::SurfaceTelemetry const &surfaceTelemetry) {
         //[self.delegate mountingManager:self willMountComponentsWithRootTag:surfaceId];
-        //_observerCoordinator.notifyObserversMountingTransactionWillMount(metadata);
+        // _observerCoordinator.notifyObserversMountingTransactionWillMount(transaction, surfaceTelemetry);
       },
-      [&](facebook::react::ShadowViewMutationList const &mutations) {
-        RCTPerformMountInstructions(mutations, /* _componentViewRegistry, _observerCoordinator,*/ surfaceId);
+      [&](facebook::react::MountingTransaction const &transaction,
+          facebook::react::SurfaceTelemetry const &surfaceTelemetry) {
+        RCTPerformMountInstructions(
+            transaction.getMutations(), /* _componentViewRegistry, _observerCoordinator,*/ surfaceId);
       },
-      [&](facebook::react::MountingTransactionMetadata metadata) {
-        //_observerCoordinator.notifyObserversMountingTransactionDidMount(metadata);
+      [&](facebook::react::MountingTransaction const &transaction,
+          facebook::react::SurfaceTelemetry const &surfaceTelemetry) {
+        //_observerCoordinator.notifyObserversMountingTransactionDidMount(transaction, surfaceTelemetry);
         didMountComponentsWithRootTag(surfaceId);
         //[self.delegate mountingManager:self didMountComponentsWithRootTag:surfaceId];
       });
@@ -476,15 +511,26 @@ void FabricUIManager::schedulerDidDispatchCommand(
     facebook::react::ShadowView const &shadowView,
     std::string const &commandName,
     folly::dynamic const &arg) {
-  assert(false);
+  if (m_context.UIDispatcher().HasThreadAccess()) {
+    auto descriptor = m_registry.componentViewDescriptorWithTag(shadowView.tag);
+    descriptor.view->handleCommand(commandName, arg);
+  } else {
+    m_context.UIDispatcher().Post(
+        [wkThis = weak_from_this(), commandName, tag = shadowView.tag, args = folly::dynamic(arg)]() {
+          if (auto pThis = wkThis.lock()) {
+            auto view = pThis->m_registry.findComponentViewWithTag(tag);
+            if (view) {
+              view->handleCommand(commandName, args);
+            }
+          }
+        });
+  }
 }
 
 void FabricUIManager::schedulerDidSetIsJSResponder(
     facebook::react::ShadowView const &shadowView,
     bool isJSResponder,
-    bool blockNativeResponder) {
-  assert(false);
-}
+    bool blockNativeResponder) {}
 
 void FabricUIManager::schedulerDidSendAccessibilityEvent(
     const facebook::react::ShadowView &shadowView,

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.h

@@ -65,7 +65,9 @@ struct FabricUIManager final : public std::enable_shared_from_this<FabricUIManag
   bool m_followUpTransactionRequired{false};
 
   ComponentViewRegistry m_registry;
+#ifndef CORE_ABI
   std::unordered_map<facebook::react::SurfaceId, XamlView> m_surfaceRegistry;
+#endif // CORE_ABI
 
   // Inherited via SchedulerDelegate
   virtual void schedulerDidFinishTransaction(

package/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -7,6 +7,7 @@
 #include "ParagraphComponentView.h"
 
 #include <UI.Xaml.Controls.h>
+#include <UI.Xaml.Documents.h>
 #include <Utils/ValueUtils.h>
 #include <dwrite.h>
 #include <react/renderer/components/text/ParagraphShadowNode.h>
@@ -30,14 +31,12 @@ void ParagraphComponentView::mountChildComponentView(
     uint32_t index) noexcept {
   auto v = static_cast<const ParagraphComponentView &>(childComponentView);
   assert(false);
-  // m_element.Children().InsertAt(index, v.Element());
 }
 
 void ParagraphComponentView::unmountChildComponentView(
     const IComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
-  // m_element.Children().RemoveAt(index);
 }
 
 void ParagraphComponentView::updateProps(
@@ -99,11 +98,40 @@ void ParagraphComponentView::updateState(
     facebook::react::State::Shared const &oldState) noexcept {
   const auto &newState = *std::static_pointer_cast<facebook::react::ParagraphShadowNode::ConcreteState const>(state);
 
-  // Only handle single/empty fragments right now -- ignore the other fragments
-  m_element.Text(
-      newState.getData().attributedString.getFragments().size()
-          ? Microsoft::Common::Unicode::Utf8ToUtf16(newState.getData().attributedString.getFragments()[0].string)
-          : L"");
+  m_element.Inlines().Clear();
+
+  for (const auto &fragment : newState.getData().attributedString.getFragments()) {
+    auto inlines = m_element.Inlines();
+
+    if (auto tdlt = fragment.textAttributes.textDecorationLineType; tdlt &&
+        (*tdlt == facebook::react::TextDecorationLineType::Underline ||
+         *tdlt == facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      auto underline = xaml::Documents::Underline();
+      inlines.Append(underline);
+      inlines = underline.Inlines();
+    }
+
+    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic ||
+        fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique) {
+      auto italic = xaml::Documents::Italic();
+      inlines.Append(italic);
+      inlines = italic.Inlines();
+    }
+
+    auto run = xaml::Documents::Run();
+    run.Text(winrt::to_hstring(fragment.string));
+    run.FontFamily(xaml::Media::FontFamily(
+        fragment.textAttributes.fontFamily.empty() ? L"Segoe UI"
+                                                   : winrt::to_hstring(fragment.textAttributes.fontFamily)));
+
+    run.FontWeight(
+        winrt::Windows::UI::Text::FontWeight{static_cast<uint16_t>(fragment.textAttributes.fontWeight.value_or(
+            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR)))});
+
+    run.FontSize(fragment.textAttributes.fontSize);
+    run.Foreground(fragment.textAttributes.foregroundColor.AsWindowsBrush());
+    inlines.Append(run);
+  }
 }
 void ParagraphComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
@@ -118,9 +146,7 @@ void ParagraphComponentView::updateLayoutMetrics(
   m_element.Width(layoutMetrics.frame.size.width);
   m_element.Height(layoutMetrics.frame.size.height);
 }
-void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  // m_element.FinalizeProperties();
-}
+void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
 void ParagraphComponentView::prepareForRecycle() noexcept {}
 facebook::react::SharedProps ParagraphComponentView::props() noexcept {
   assert(false);

package/Microsoft.ReactNative/Fabric/ScrollViewComponentView.cpp

@@ -23,6 +23,8 @@ ScrollViewComponentView::ScrollViewComponentView() {
   // m_props = defaultProps;
 
   m_element.Content(m_contentPanel);
+  m_contentPanel.VerticalAlignment(xaml::VerticalAlignment::Top);
+  m_contentPanel.HorizontalAlignment(xaml::HorizontalAlignment::Left);
 
   m_scrollViewerViewChangingRevoker =
       m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) {

package/Microsoft.ReactNative/Fabric/SliderComponentView.cpp

@@ -0,0 +1,107 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "SliderComponentView.h"
+
+#include <UI.Xaml.Controls.Primitives.h>
+#include <Utils/ValueUtils.h>
+
+#include <IReactContext.h>
+
+#include <react/renderer/components/rnwcore/EventEmitters.h>
+
+namespace Microsoft::ReactNative {
+
+SliderComponentView::SliderComponentView(winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : m_context(reactContext), m_element(xaml::Controls::Slider()) {
+  m_valueChangedRevoker = m_element.ValueChanged(winrt::auto_revoke, [this](auto sender, auto args) {
+    if (m_props->value != m_element.Value()) {
+      if (m_eventEmitter) {
+        auto emitter = std::static_pointer_cast<const facebook::react::SliderEventEmitter>(m_eventEmitter);
+        facebook::react::SliderEventEmitter::OnValueChange onValueChangeArgs;
+        onValueChangeArgs.value = m_element.Value();
+        emitter->onValueChange(onValueChangeArgs);
+      }
+    }
+  });
+
+  static auto const defaultProps = std::make_shared<facebook::react::SliderProps const>();
+  m_props = defaultProps;
+}
+
+std::vector<facebook::react::ComponentDescriptorProvider>
+SliderComponentView::supplementalComponentDescriptorProviders() noexcept {
+  return {};
+}
+
+void SliderComponentView::mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept {
+  assert(false);
+  // m_element->Children().InsertAt(index, static_cast<const BaseComponentView &>(childComponentView).Element());
+}
+
+void SliderComponentView::unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept {
+  assert(false);
+  // m_element->Children().RemoveAt(index);
+}
+
+void SliderComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  const auto &oldSliderProps = *std::static_pointer_cast<const facebook::react::SliderProps>(m_props);
+  const auto &newSliderProps = *std::static_pointer_cast<const facebook::react::SliderProps>(props);
+
+  if (oldSliderProps.value != newSliderProps.value) {
+    m_element.Value(newSliderProps.value);
+  }
+
+  if (oldSliderProps.maximumValue != newSliderProps.maximumValue) {
+    m_element.Maximum(newSliderProps.maximumValue);
+  }
+
+  if (oldSliderProps.minimumValue != newSliderProps.minimumValue) {
+    m_element.Minimum(newSliderProps.minimumValue);
+  }
+
+  if (oldSliderProps.disabled != newSliderProps.disabled) {
+    m_element.IsEnabled(!newSliderProps.disabled);
+  }
+
+  // TODO tint colors
+
+  m_props = std::static_pointer_cast<facebook::react::SliderProps const>(props);
+}
+
+void SliderComponentView::updateState(
+    facebook::react::State::Shared const &state,
+    facebook::react::State::Shared const &oldState) noexcept {}
+
+void SliderComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  // Set Position & Size Properties
+
+  m_layoutMetrics = layoutMetrics;
+
+  winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_element, layoutMetrics.frame.origin.x);
+  winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_element, layoutMetrics.frame.origin.y);
+
+  m_element.Width(layoutMetrics.frame.size.width);
+  m_element.Height(layoutMetrics.frame.size.height);
+}
+
+void SliderComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
+
+void SliderComponentView::prepareForRecycle() noexcept {}
+facebook::react::SharedProps SliderComponentView::props() noexcept {
+  assert(false);
+  return {};
+}
+
+const xaml::FrameworkElement SliderComponentView::Element() const noexcept {
+  return m_element;
+}
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/SliderComponentView.h

@@ -0,0 +1,51 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ComponentView.h"
+
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+#include <UI.Xaml.Controls.h>
+#include <react/renderer/components/rnwcore/Props.h>
+#include "ViewComponentView.h"
+
+#pragma warning(push)
+#pragma warning(disable : 4244 4305)
+// #include <react/renderer/components/view/ViewProps.h>
+#pragma warning(pop)
+
+namespace Microsoft::ReactNative {
+
+struct SliderComponentView : BaseComponentView {
+  using Super = BaseComponentView;
+  SliderComponentView(winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+
+  std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
+      override;
+  void mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(const IComponentView &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
+      override;
+  void updateLayoutMetrics(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+  void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
+  void prepareForRecycle() noexcept override;
+  facebook::react::SharedProps props() noexcept override;
+
+  const xaml::FrameworkElement Element() const noexcept override;
+
+ private:
+  bool m_needsOnLoadStart{false};
+  std::shared_ptr<facebook::react::SliderProps const> m_props;
+  facebook::react::LayoutMetrics m_layoutMetrics;
+  xaml::Controls::Slider m_element;
+  xaml::Controls::Slider::ValueChanged_revoker m_valueChangedRevoker;
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+};
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/SwitchComponentView.cpp

@@ -0,0 +1,109 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "SwitchComponentView.h"
+
+#include <Utils/ValueUtils.h>
+
+#include <IReactContext.h>
+
+#include <react/renderer/components/rnwcore/EventEmitters.h>
+
+namespace Microsoft::ReactNative {
+
+SwitchComponentView::SwitchComponentView(winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : m_context(reactContext), m_element(xaml::Controls::ToggleSwitch()) {
+  m_element.OnContent(nullptr);
+  m_element.OffContent(nullptr);
+
+  m_toggledRevoker = m_element.Toggled(winrt::auto_revoke, [this](auto sender, auto args) {
+    if (m_props->value != m_element.IsOn()) {
+      if (m_eventEmitter) {
+        auto emitter = std::static_pointer_cast<const facebook::react::SwitchEventEmitter>(m_eventEmitter);
+        facebook::react::SwitchEventEmitter::OnChange onChangeArgs;
+        onChangeArgs.value = m_element.IsOn();
+        emitter->onChange(onChangeArgs);
+      }
+    }
+  });
+
+  static auto const defaultProps = std::make_shared<facebook::react::SwitchProps const>();
+  m_props = defaultProps;
+}
+
+void SwitchComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  if (commandName == "setValue") {
+    m_element.IsOn(arg[0].asBool());
+  } else {
+    Super::handleCommand(commandName, arg);
+  }
+}
+
+std::vector<facebook::react::ComponentDescriptorProvider>
+SwitchComponentView::supplementalComponentDescriptorProviders() noexcept {
+  return {};
+}
+
+void SwitchComponentView::mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept {
+  assert(false);
+  // m_element->Children().InsertAt(index, static_cast<const BaseComponentView &>(childComponentView).Element());
+}
+
+void SwitchComponentView::unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept {
+  assert(false);
+  // m_element->Children().RemoveAt(index);
+}
+
+void SwitchComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  const auto &oldSwitchProps = *std::static_pointer_cast<const facebook::react::SwitchProps>(m_props);
+  const auto &newSwitchProps = *std::static_pointer_cast<const facebook::react::SwitchProps>(props);
+
+  if (oldSwitchProps.value != newSwitchProps.value) {
+    m_element.IsOn(newSwitchProps.value);
+  }
+
+  if (oldSwitchProps.disabled != newSwitchProps.disabled) {
+    m_element.IsEnabled(!newSwitchProps.disabled);
+  }
+
+  // TODO tint colors
+
+  m_props = std::static_pointer_cast<facebook::react::SwitchProps const>(props);
+}
+
+void SwitchComponentView::updateState(
+    facebook::react::State::Shared const &state,
+    facebook::react::State::Shared const &oldState) noexcept {}
+
+void SwitchComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  // Set Position & Size Properties
+
+  m_layoutMetrics = layoutMetrics;
+
+  winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_element, layoutMetrics.frame.origin.x);
+  winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_element, layoutMetrics.frame.origin.y);
+
+  m_element.Width(layoutMetrics.frame.size.width);
+  m_element.Height(layoutMetrics.frame.size.height);
+}
+
+void SwitchComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
+
+void SwitchComponentView::prepareForRecycle() noexcept {}
+facebook::react::SharedProps SwitchComponentView::props() noexcept {
+  assert(false);
+  return {};
+}
+
+const xaml::FrameworkElement SwitchComponentView::Element() const noexcept {
+  return m_element;
+}
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/SwitchComponentView.h

@@ -0,0 +1,52 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ComponentView.h"
+
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+#include <UI.Xaml.Controls.h>
+#include <react/renderer/components/rnwcore/Props.h>
+#include "ViewComponentView.h"
+
+#pragma warning(push)
+#pragma warning(disable : 4244 4305)
+// #include <react/renderer/components/view/ViewProps.h>
+#pragma warning(pop)
+
+namespace Microsoft::ReactNative {
+
+struct SwitchComponentView : BaseComponentView {
+  using Super = BaseComponentView;
+  SwitchComponentView(winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+
+  std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
+      override;
+  void mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(const IComponentView &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
+      override;
+  void updateLayoutMetrics(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+  void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
+  void prepareForRecycle() noexcept override;
+  facebook::react::SharedProps props() noexcept override;
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
+
+  const xaml::FrameworkElement Element() const noexcept override;
+
+ private:
+  bool m_needsOnLoadStart{false};
+  std::shared_ptr<facebook::react::SwitchProps const> m_props;
+  facebook::react::LayoutMetrics m_layoutMetrics;
+  xaml::Controls::ToggleSwitch m_element;
+  xaml::Controls::ToggleSwitch::Toggled_revoker m_toggledRevoker;
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+};
+
+} // namespace Microsoft::ReactNative