react-native-windows 0.0.0-canary.463 → 0.0.0-canary.464

package/Libraries/Pressability/Pressability.windows.js

@@ -486,7 +486,6 @@ export default class Pressability {
 
       onResponderGrant: (event: PressEvent): void => {
         event.persist();
-
         this._cancelPressOutDelayTimeout();
 
         this._responderID = event.currentTarget;
@@ -771,7 +770,8 @@ export default class Pressability {
         this._deactivate(event);
       }
       const {onLongPress, onPress, android_disableSound} = this._config;
-      if (onPress != null) {
+
+      if (onPress != null && getTouchFromPressEvent(event).button === 0) {
         const isPressCanceledByLongPress =
           onLongPress != null &&
           prevState === 'RESPONDER_ACTIVE_LONG_PRESS_IN' &&
@@ -790,17 +790,17 @@ export default class Pressability {
 
   _activate(event: PressEvent): void {
     const {onPressIn} = this._config;
-    const {pageX, pageY} = getTouchFromPressEvent(event);
+    const {pageX, pageY, button} = getTouchFromPressEvent(event);
     this._touchActivatePosition = {pageX, pageY};
     this._touchActivateTime = Date.now();
-    if (onPressIn != null) {
+    if (onPressIn != null && button === 0) {
       onPressIn(event);
     }
   }
 
   _deactivate(event: PressEvent): void {
     const {onPressOut} = this._config;
-    if (onPressOut != null) {
+    if (onPressOut != null && getTouchFromPressEvent(event).button === 0) {
       const minPressDuration = normalizeDelay(
         this._config.minPressDuration,
         0,

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -39,6 +39,7 @@ struct IComponentView {
   virtual void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept = 0;
   virtual void prepareForRecycle() noexcept = 0;
   virtual facebook::react::SharedProps props() noexcept = 0;
+  virtual void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept = 0;
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/ComponentViewRegistry.cpp

@@ -13,6 +13,7 @@
 #include <react/components/rnwcore/ShadowNodes.h>
 #include <react/renderer/components/image/ImageShadowNode.h>
 #include <react/renderer/components/root/RootShadowNode.h>
+#include <react/renderer/components/slider/SliderShadowNode.h>
 #include <react/renderer/components/text/ParagraphShadowNode.h>
 #include <react/renderer/components/text/RawTextShadowNode.h>
 #include <react/renderer/components/text/TextShadowNode.h>
@@ -23,6 +24,8 @@
 #include "ImageComponentView.h"
 #include "ParagraphComponentView.h"
 #include "ScrollViewComponentView.h"
+#include "SliderComponentView.h"
+#include "SwitchComponentView.h"
 #include "TextComponentView.h"
 #include "ViewComponentView.h"
 #include "XamlView.h"
@@ -48,6 +51,10 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
     view = std::make_shared<ScrollViewComponentView>();
   } else if (componentHandle == facebook::react::ImageShadowNode::Handle()) {
     view = std::make_shared<ImageComponentView>(m_context);
+  } else if (componentHandle == facebook::react::SliderShadowNode::Handle()) {
+    view = std::make_shared<SliderComponentView>(m_context);
+  } else if (componentHandle == facebook::react::SwitchShadowNode::Handle()) {
+    view = std::make_shared<SwitchComponentView>(m_context);
   } else if (componentHandle == facebook::react::ActivityIndicatorViewShadowNode::Handle()) {
     view = std::make_shared<ActivityIndicatorComponentView>();
   } else {
@@ -80,6 +87,6 @@ void ComponentViewRegistry::enqueueComponentViewWithComponentHandle(
   assert(m_registry.find(tag) != m_registry.end());
 
   m_registry.erase(tag);
-  SetTag(static_cast<ViewComponentView &>(*componentViewDescriptor.view).Element(), nullptr);
+  SetTag(static_cast<ViewComponentView &>(*componentViewDescriptor.view).Element(), InvalidTag);
 }
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp

@@ -17,6 +17,7 @@
 #include <react/components/rnwcore/ComponentDescriptors.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/image/ImageComponentDescriptor.h>
+#include <react/renderer/components/slider/SliderComponentDescriptor.h>
 #include <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #include <react/renderer/components/text/RawTextComponentDescriptor.h>
 #include <react/renderer/components/text/TextComponentDescriptor.h>
@@ -142,6 +143,10 @@ std::shared_ptr<facebook::react::ComponentDescriptorProviderRegistry const> shar
         facebook::react::concreteComponentDescriptorProvider<facebook::react::RawTextComponentDescriptor>());
     providerRegistry->add(
         facebook::react::concreteComponentDescriptorProvider<facebook::react::ScrollViewComponentDescriptor>());
+    providerRegistry->add(
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::SliderComponentDescriptor>());
+    providerRegistry->add(
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::SwitchComponentDescriptor>());
     providerRegistry->add(
         facebook::react::concreteComponentDescriptorProvider<facebook::react::TextComponentDescriptor>());
     providerRegistry->add(
@@ -200,6 +205,9 @@ void FabricUIManager::installFabricUIManager() noexcept {
   toolbox.runtimeExecutor = runtimeExecutor;
   toolbox.synchronousEventBeatFactory = synchronousBeatFactory;
   toolbox.asynchronousEventBeatFactory = asynchronousBeatFactory;
+  // We currently rely on using XAML elements to perform measure/layout,
+  // which requires that the background thread also be the UI thread
+  /*
   toolbox.backgroundExecutor = [context = m_context,
                                 dispatcher = Mso::DispatchQueue::MakeLooperQueue()](std::function<void()> &&callback) {
     if (context.UIDispatcher().HasThreadAccess()) {
@@ -209,6 +217,15 @@ void FabricUIManager::installFabricUIManager() noexcept {
 
     dispatcher.Post(std::move(callback));
   };
+  */
+  toolbox.backgroundExecutor = [context = m_context](std::function<void()> &&callback) {
+    if (context.UIDispatcher().HasThreadAccess()) {
+      callback();
+      return;
+    }
+
+    context.UIDispatcher().Post(std::move(callback));
+  };
 
   m_scheduler = std::make_shared<facebook::react::Scheduler>(
       toolbox, (/*animationDriver_ ? animationDriver_.get() :*/ nullptr), this);
@@ -477,7 +494,18 @@ 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 descriptor = pThis->m_registry.componentViewDescriptorWithTag(tag);
+            descriptor.view->handleCommand(commandName, args);
+          }
+        });
+  }
 }
 
 void FabricUIManager::schedulerDidSetIsJSResponder(

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

package/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -20,6 +20,10 @@ const facebook::react::SharedViewEventEmitter &BaseComponentView::GetEventEmitte
   return m_eventEmitter;
 }
 
+void BaseComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  assert(false); // Unhandled command
+}
+
 ViewComponentView::ViewComponentView() {
   static auto const defaultProps = std::make_shared<facebook::react::ViewProps const>();
   m_props = defaultProps;

package/Microsoft.ReactNative/Fabric/ViewComponentView.h

@@ -14,6 +14,7 @@ struct BaseComponentView : IComponentView {
   virtual const xaml::FrameworkElement Element() const noexcept = 0;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
 
  protected:
   facebook::react::SharedViewEventEmitter m_eventEmitter;

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/rncore/EventEmitters.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/components/rnwcore/EventEmitters.h>

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/rncore/Props.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/components/rnwcore/Props.h>

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/slider/SliderMeasurementsManager.cpp

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "SliderMeasurementsManager.h"
+
+#include <react/renderer/core/conversions.h>
+#include <winrt/Windows.Foundation.Collections.h>
+#include <winrt/Windows.UI.Xaml.Interop.h>
+
+namespace facebook::react {
+
+Size SliderMeasurementsManager::measure(SurfaceId surfaceId, LayoutConstraints layoutConstraints) const {
+  if (!m_slider) {
+    m_slider = xaml::Controls::Slider();
+    xaml::Style sliderStyle;
+    xaml::Application::Current()
+        .Resources()
+        .TryLookup(winrt::box_value(winrt::xaml_typename<xaml::Controls::Slider>()))
+        .as(sliderStyle);
+    m_slider.Style(sliderStyle);
+  }
+
+  winrt::Windows::Foundation::Size availiableSize(
+      layoutConstraints.maximumSize.width, layoutConstraints.maximumSize.height);
+
+  m_slider.Measure(availiableSize);
+  auto size = m_slider.DesiredSize();
+  return {static_cast<float>(size.Width), static_cast<float>(size.Height)};
+}
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/slider/SliderMeasurementsManager.h

@@ -0,0 +1,30 @@
+#pragma once
+
+#include <CppWinrtIncludes.h>
+#include <UI.Xaml.Controls.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/utils/ContextContainer.h>
+
+namespace facebook::react {
+
+/**
+ * Class that manages slider measurements across platforms.
+ * On iOS it is a noop, since the height is passed in from JS on iOS only.
+ */
+class SliderMeasurementsManager {
+ public:
+  SliderMeasurementsManager(const ContextContainer::Shared &contextContainer) : m_contextContainer(contextContainer) {}
+
+  static inline bool shouldMeasureSlider() {
+    return true;
+  }
+
+  Size measure(SurfaceId surfaceId, LayoutConstraints layoutConstraints) const;
+
+ private:
+  ContextContainer::Shared m_contextContainer;
+  mutable xaml::Controls::Slider m_slider{nullptr};
+};
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -5,67 +5,69 @@
 
 #include "pch.h"
 
-#include "TextLayoutManager.h"
-
 #include <dwrite.h>
+#include "TextLayoutManager.h"
 
+#include <CppWinrtIncludes.h>
+#include <UI.Xaml.Controls.h>
 #include <unicode.h>
 
-namespace facebook {
-namespace react {
+namespace facebook::react {
 
 TextLayoutManager::~TextLayoutManager() {}
 
-// TODO: This is a placeholder implementation to get basic text rendering.  This should not be considered a real
-// implementation. It currently has various performance issues (like creating a new factory on every run), and only
-// handles single strings, and makes all kinds of assumptions around things like locale, font family etc. This whole
-// implementation will need to be replaced to get text rendering/layout to work properly.
+// Ideally we'd be able to measure Text either without creating a XAML element,
+// or we'd be able to create a XAML element on a background thread.
+//
+// For now we've forced the background executor to be the UI thread, so that we can use
+// TextBlocks within the measure call.
+//
+// There will be inconsistencies with layout if any property that affects layout is set differently here vs in the
+// actual view component. -- Any properties that rely on the context from the UI tree should be set directly on the
+// TextBlock here and in the view component.
 TextMeasurement TextLayoutManager::measure(
     AttributedStringBox attributedStringBox,
     ParagraphAttributes paragraphAttributes,
     LayoutConstraints layoutConstraints) const {
-  winrt::com_ptr<IDWriteFactory> spDWriteFactory;
-  DWriteCreateFactory(
-      DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown **>(spDWriteFactory.put()));
-
   for (auto &fragment : attributedStringBox.getValue().getFragments()) {
-    DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
-    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
-      style = DWRITE_FONT_STYLE_ITALIC;
-    else if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
-      style = DWRITE_FONT_STYLE_OBLIQUE;
-
-    winrt::com_ptr<IDWriteTextFormat> spTextFormat;
-    spDWriteFactory->CreateTextFormat(
-        fragment.textAttributes.fontFamily.empty()
-            ? L"Segoe UI"
-            : Microsoft::Common::Unicode::Utf8ToUtf16(fragment.textAttributes.fontFamily).c_str(),
-        NULL, // Font collection (NULL sets it to use the system font collection).
-        static_cast<DWRITE_FONT_WEIGHT>(fragment.textAttributes.fontWeight.value_or(
-            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
-        style,
-        DWRITE_FONT_STRETCH_NORMAL,
-        fragment.textAttributes.fontSize,
-        L"en-us",
-        spTextFormat.put());
-
-    auto str = Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string);
-
-    winrt::com_ptr<IDWriteTextLayout> spTextLayout;
-    spDWriteFactory->CreateTextLayout(
-        str.c_str(), // The string to be laid out and formatted.
-        static_cast<UINT32>(str.length()), // The length of the string.
-        spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
-        layoutConstraints.maximumSize.width, // The width of the layout box.
-        layoutConstraints.maximumSize.height, // The height of the layout box.
-        spTextLayout.put() // The IDWriteTextLayout interface pointer.
-    );
-
+    if (!m_textBlock) {
+      m_textBlock = xaml::Controls::TextBlock();
+    }
+
+    auto textblock = xaml::Controls::TextBlock();
+    m_textBlock.Text(winrt::to_hstring(fragment.string));
+    m_textBlock.FontSize(fragment.textAttributes.fontSize);
+    m_textBlock.FontWeight(
+        winrt::Windows::UI::Text::FontWeight{static_cast<uint16_t>(fragment.textAttributes.fontWeight.value_or(
+            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR)))});
+
+    switch (fragment.textAttributes.fontStyle.value_or(facebook::react::FontStyle::Normal)) {
+      case facebook::react::FontStyle::Italic:
+        m_textBlock.FontStyle(winrt::Windows::UI::Text::FontStyle::Italic);
+        break;
+      case facebook::react::FontStyle::Normal:
+        m_textBlock.FontStyle(winrt::Windows::UI::Text::FontStyle::Normal);
+        break;
+      case facebook::react::FontStyle::Oblique:
+        m_textBlock.FontStyle(winrt::Windows::UI::Text::FontStyle::Oblique);
+        break;
+      default:
+        assert(false);
+    }
+
+    if (fragment.textAttributes.fontFamily.empty())
+      m_textBlock.FontFamily(xaml::Media::FontFamily(L"Segoe UI"));
+    else
+      m_textBlock.FontFamily(
+          xaml::Media::FontFamily(Microsoft::Common::Unicode::Utf8ToUtf16(fragment.textAttributes.fontFamily)));
+
+    winrt::Windows::Foundation::Size availableSize(
+        layoutConstraints.maximumSize.width, layoutConstraints.maximumSize.height);
+    m_textBlock.Measure(availableSize);
     TextMeasurement tm;
+    auto size = m_textBlock.DesiredSize();
 
-    DWRITE_TEXT_METRICS dtm;
-    spTextLayout->GetMetrics(&dtm);
-    tm.size = {dtm.width, dtm.height};
+    tm.size = {static_cast<float>(size.Width), static_cast<float>(size.Height)};
     return tm;
   }
 
@@ -86,5 +88,4 @@ void *TextLayoutManager::getNativeTextLayoutManager() const {
   return (void *)this;
 }
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.h

@@ -3,6 +3,8 @@
 
 #pragma once
 
+#include <CppWinrtIncludes.h>
+#include <UI.Xaml.Controls.h>
 #include <react/renderer/attributedstring/AttributedString.h>
 #include <react/renderer/attributedstring/AttributedStringBox.h>
 #include <react/renderer/attributedstring/ParagraphAttributes.h>
@@ -54,6 +56,7 @@ class TextLayoutManager {
 
  private:
   ContextContainer::Shared m_contextContainer;
+  mutable xaml::Controls::TextBlock m_textBlock{nullptr};
 };
 
 } // namespace react

package/Microsoft.ReactNative/IViewManager.idl

@@ -88,10 +88,18 @@ namespace Microsoft.ReactNative
     )
     void OnPointerEvent(Object view, ReactPointerEventArgs args);
   };
+  
+  [webhosthidden]
+  DOC_STRING(
+    "Enables view managers to track when views are"
+    "removed from their shadow trees. "
+  )
   interface IViewManagerWithDropViewInstance {
     DOC_STRING(
-        "Enables the view manager to track when the view is "
-        "being removed from the visual tree. "
+        "Invoked when React has removed the view "
+        "from its shadow tree. Note this method call is distinct from "
+        "the XAML Unloaded event, which is asynchronously triggered "
+        "from when the removal of the view from the UI tree happens. "
     )
     void OnDropViewInstance(XAML_NAMESPACE.FrameworkElement view);
   };

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -417,6 +417,8 @@
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\scrollview\ScrollViewProps.cpp" DisableSpecificWarnings="4018;4305;4715;%(DisableSpecificWarnings)" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\scrollview\ScrollViewShadowNode.cpp" DisableSpecificWarnings="4305;%(DisableSpecificWarnings)" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\scrollview\ScrollViewState.cpp" />
+    <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\slider\SliderShadowNode.cpp" />
+    <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\slider\SliderState.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\text\TextProps.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\text\BaseTextProps.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\text\BaseTextShadowNode.cpp" />
@@ -490,6 +492,7 @@
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\uimanager\SurfaceRegistryBinding.cpp" DisableSpecificWarnings="4715;%(DisableSpecificWarnings)" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\uimanager\UIManager.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\uimanager\UIManagerBinding.cpp" DisableSpecificWarnings="4389;4715;%(DisableSpecificWarnings)" />
+    <ClCompile Include="$(ReactNativeWindowsDir)codegen\react\components\rnwcore\EventEmitters.cpp" DisableSpecificWarnings="4715;%(DisableSpecificWarnings)" />
     <ClCompile Include="$(ReactNativeWindowsDir)codegen\react\components\rnwcore\Props.cpp" DisableSpecificWarnings="4018;%(DisableSpecificWarnings)">
       <ObjectFileName>$(IntDir)\codegenRnwCoreProps.obj</ObjectFileName>
     </ClCompile>
@@ -502,9 +505,12 @@
     <ClCompile Include="Fabric\ImageRequest.cpp" />
     <ClCompile Include="Fabric\ParagraphComponentView.cpp" />
     <ClCompile Include="Fabric\platform\react\renderer\textlayoutmanager\TextLayoutManager.cpp" />
+    <ClCompile Include="Fabric\platform\react\renderer\components\slider\SliderMeasurementsManager.cpp" />
     <ClCompile Include="Fabric\platform\react\renderer\graphics\Color.cpp" />
     <ClCompile Include="Fabric\ReactNativeConfigProperties.cpp" />
     <ClCompile Include="Fabric\ScrollViewComponentView.cpp" />
+    <ClCompile Include="Fabric\SliderComponentView.cpp" />
+    <ClCompile Include="Fabric\SwitchComponentView.cpp" />
     <ClCompile Include="Fabric\TextComponentView.cpp" />
     <ClCompile Include="Fabric\ViewComponentView.cpp" />
     <ClCompile Include="SchedulerSettings.cpp" />

package/Microsoft.ReactNative/Views/SliderViewManager.cpp

@@ -14,10 +14,6 @@
 #include <UI.Xaml.Controls.Primitives.h>
 #include <UI.Xaml.Controls.h>
 
-namespace winrt {
-using ToggleButton = xaml::Controls::Primitives::ToggleButton;
-}
-
 namespace Microsoft::ReactNative {
 
 class SliderShadowNode : public ShadowNodeBase {
@@ -80,6 +76,18 @@ bool SliderViewManager::UpdateProperty(
       slider.Value(propertyValue.AsDouble());
     else if (propertyValue.IsNull())
       slider.Value(0);
+  } else if (propertyName == "maximumValue") {
+    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
+        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
+      slider.Maximum(propertyValue.AsDouble());
+    else if (propertyValue.IsNull())
+      slider.Maximum(100);
+  } else if (propertyName == "minimumValue") {
+    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
+        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
+      slider.Minimum(propertyValue.AsDouble());
+    else if (propertyValue.IsNull())
+      slider.Minimum(0);
   } else {
     return Super::UpdateProperty(nodeToUpdate, propertyName, propertyValue);
   }

package/Microsoft.ReactNative/Views/TouchEventHandler.cpp

@@ -129,11 +129,7 @@ void TouchEventHandler::OnPointerPressed(
 
     size_t pointerIndex = AddReactPointer(args, tag, sourceElement);
 
-    // For now, when using the mouse we only want to send click events for the left button.
-    // Finger and pen taps will also set isLeftButton.
-    if (m_pointers[pointerIndex].isLeftButton) {
-      DispatchTouchEvent(eventType, pointerIndex);
-    }
+    DispatchTouchEvent(eventType, pointerIndex);
   }
 }
 
@@ -211,14 +207,12 @@ void TouchEventHandler::OnPointerConcluded(TouchEventType eventType, const winrt
   if (PropagatePointerEventAndFindReactSourceBranch(reactArgs, &tagsForBranch, &sourceElement))
     UpdateReactPointer(m_pointers[*optPointerIndex], args, sourceElement);
 
-  if (m_pointers[*optPointerIndex].isLeftButton) {
-    // In case a PointerCaptureLost event should be treated as an "end" event,
-    // check the ReactPointerEventArgs Kind property before emitting the event.
-    const auto adjustedEventType = reactArgs.Kind() == winrt::Microsoft::ReactNative::PointerEventKind::End
-        ? TouchEventType::End
-        : TouchEventType::Cancel;
-    DispatchTouchEvent(adjustedEventType, *optPointerIndex);
-  }
+  // In case a PointerCaptureLost event should be treated as an "end" event,
+  // check the ReactPointerEventArgs Kind property before emitting the event.
+  const auto adjustedEventType = reactArgs.Kind() == winrt::Microsoft::ReactNative::PointerEventKind::End
+      ? TouchEventType::End
+      : TouchEventType::Cancel;
+  DispatchTouchEvent(adjustedEventType, *optPointerIndex);
 
   m_pointers.erase(cbegin(m_pointers) + *optPointerIndex);
   if (m_pointers.size() == 0)
@@ -368,7 +362,21 @@ void TouchEventHandler::UpdatePointersInViews(
   }
 }
 
+// defines button payload, follows https://developer.mozilla.org/docs/Web/API/MouseEvent/button
+enum class MouseEventButtonKind { None = -1, Main = 0, Auxiliary = 1, Secondary = 2, Eraser = 5 };
+
 winrt::Microsoft::ReactNative::JSValue TouchEventHandler::GetPointerJson(const ReactPointer &pointer, int64_t target) {
+  MouseEventButtonKind button = MouseEventButtonKind::None;
+  if (pointer.isLeftButton) {
+    button = MouseEventButtonKind::Main;
+  } else if (pointer.isMiddleButton) {
+    button = MouseEventButtonKind::Auxiliary;
+  } else if (pointer.isRightButton || pointer.isBarrelButton) {
+    button = MouseEventButtonKind::Secondary;
+  } else if (pointer.isEraser) {
+    button = MouseEventButtonKind::Eraser;
+  }
+
   return winrt::Microsoft::ReactNative::JSValueObject{
       {"target", target},
       {"identifier", pointer.identifier},
@@ -390,6 +398,7 @@ winrt::Microsoft::ReactNative::JSValue TouchEventHandler::GetPointerJson(const R
       {"isEraser", pointer.isEraser},
       {"shiftKey", pointer.shiftKey},
       {"ctrlKey", pointer.ctrlKey},
+      {"button", static_cast<int>(button)},
       {"altKey", pointer.altKey}};
 }
 

package/PropertySheets/External/Microsoft.ReactNative.Uwp.CSharpApp.targets

@@ -46,4 +46,6 @@
   </Target>
 
   <Import Project="$(ReactNativeWindowsDir)\PropertySheets\RequireSolution.targets" />
+
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\OutputMSBuildProperties.targets" />
 </Project>

package/PropertySheets/External/Microsoft.ReactNative.Uwp.CppApp.targets

@@ -47,6 +47,7 @@
   <Import Project="$(ReactNativeWindowsDir)\PropertySheets\CppAppConsumeCSharpModule.targets" />
   <Import Project="$(ReactNativeWindowsDir)\PropertySheets\RequireSolution.targets" />
   <Import Project="$(ReactNativeWindowsDir)\PropertySheets\FixupRoslynCscWarnings.targets" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\OutputMSBuildProperties.targets" />
 
   <ItemDefinitionGroup>
     <Reference>

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,7 +10,7 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.0.0-canary.463</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.0.0-canary.464</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>0</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>

package/PropertySheets/OutputMSBuildProperties.targets

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 
+  Copyright (c) Microsoft Corporation. All rights reserved.
+ Licensed under the MIT License.. 
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+
+  <Target Name="OutputMSBuildProperties" AfterTargets="PrepareForBuild">
+    <PropertyGroup>
+    <!--
+      These are the properties we will report in telemetry. Do NOT add properties that may contain PII.
+      You can add new properties following the format "PropertyName": "$(PropertyName)",
+    -->
+      <MSBuildPropertiesJSON>
+      {
+        "WinUIPackageName": "$(WinUIPackageName)",
+        "WinUIPackageVersion": "$(WinUIPackageVersion)",
+        "WindowsTargetPlatformVersion": "$(WindowsTargetPlatformVersion)",
+        "UseExperimentalNuGet": "$(UseExperimentalNuGet)",
+        "UseHermes": "$(UseHermes)",
+        "UseWinUI3": "$(UseWinUI3)"
+      }
+      </MSBuildPropertiesJSON>
+    </PropertyGroup>
+    <WriteLinesToFile
+        File="$([MSBuild]::NormalizePath($(ProjectDir)\Generated Files))\msbuildproperties.g.json"
+        Overwrite="true"
+        Lines="$(MSBuildPropertiesJSON)" />
+  </Target>
+
+</Project>

package/codegen/react/components/rnwcore/EventEmitters.cpp

@@ -0,0 +1,149 @@
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @generated by codegen project: GenerateEventEmitterCpp.js
+ */
+
+#include <react/renderer/components/rnwcore/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+void ModalHostViewEventEmitter::onRequestClose(OnRequestClose event) const {
+  dispatchEvent("requestClose", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+void ModalHostViewEventEmitter::onShow(OnShow event) const {
+  dispatchEvent("show", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+void ModalHostViewEventEmitter::onDismiss(OnDismiss event) const {
+  dispatchEvent("dismiss", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+void ModalHostViewEventEmitter::onOrientationChange(OnOrientationChange event) const {
+  dispatchEvent("orientationChange", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "orientation", toString(event.orientation));
+    return payload;
+  });
+}
+
+void DatePickerEventEmitter::onChange(OnChange event) const {
+  dispatchEvent("change", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "timestamp", event.timestamp);
+    return payload;
+  });
+}
+void AndroidDrawerLayoutEventEmitter::onDrawerSlide(OnDrawerSlide event) const {
+  dispatchEvent("drawerSlide", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "offset", event.offset);
+    return payload;
+  });
+}
+void AndroidDrawerLayoutEventEmitter::onDrawerStateChanged(OnDrawerStateChanged event) const {
+  dispatchEvent("drawerStateChanged", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "drawerState", event.drawerState);
+    return payload;
+  });
+}
+void AndroidDrawerLayoutEventEmitter::onDrawerOpen(OnDrawerOpen event) const {
+  dispatchEvent("drawerOpen", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+void AndroidDrawerLayoutEventEmitter::onDrawerClose(OnDrawerClose event) const {
+  dispatchEvent("drawerClose", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+
+
+
+void AndroidSwipeRefreshLayoutEventEmitter::onRefresh(OnRefresh event) const {
+  dispatchEvent("refresh", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+void PullToRefreshViewEventEmitter::onRefresh(OnRefresh event) const {
+  dispatchEvent("refresh", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+
+
+void RCTSegmentedControlEventEmitter::onChange(OnChange event) const {
+  dispatchEvent("change", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", event.value);
+payload.setProperty(runtime, "selectedSegmentIndex", event.selectedSegmentIndex);
+    return payload;
+  });
+}
+void SliderEventEmitter::onChange(OnChange event) const {
+  dispatchEvent("change", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", event.value);
+payload.setProperty(runtime, "fromUser", event.fromUser);
+    return payload;
+  });
+}
+void SliderEventEmitter::onValueChange(OnValueChange event) const {
+  dispatchEvent("valueChange", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", event.value);
+payload.setProperty(runtime, "fromUser", event.fromUser);
+    return payload;
+  });
+}
+void SliderEventEmitter::onSlidingComplete(OnSlidingComplete event) const {
+  dispatchEvent("slidingComplete", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", event.value);
+payload.setProperty(runtime, "fromUser", event.fromUser);
+    return payload;
+  });
+}
+void AndroidSwitchEventEmitter::onChange(OnChange event) const {
+  dispatchEvent("change", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", event.value);
+    return payload;
+  });
+}
+void SwitchEventEmitter::onChange(OnChange event) const {
+  dispatchEvent("change", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", event.value);
+    return payload;
+  });
+}
+
+
+
+} // namespace react
+} // namespace facebook

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.0.0-canary.463",
+  "version": "0.0.0-canary.464",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "@react-native-community/cli": "^7.0.1",
     "@react-native-community/cli-platform-android": "^7.0.1",
     "@react-native-community/cli-platform-ios": "^7.0.1",
-    "@react-native-windows/cli": "0.0.0-canary.117",
+    "@react-native-windows/cli": "0.0.0-canary.118",
     "@react-native-windows/virtualized-list": "0.0.0-canary.30",
     "@react-native/assets": "1.0.0",
     "@react-native/normalize-color": "2.0.0",
@@ -57,7 +57,7 @@
     "ws": "^6.1.4"
   },
   "devDependencies": {
-    "@react-native-windows/codegen": "0.0.0-canary.26",
+    "@react-native-windows/codegen": "0.0.0-canary.27",
     "@rnw-scripts/eslint-config": "1.1.11",
     "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.0.5",
     "@rnw-scripts/metro-dev-config": "0.0.0",