react-native-windows 0.70.8 → 0.71.0-preview.1

package/Microsoft.ReactNative/Modules/Animated/SubtractionAnimatedNode.cpp

@@ -9,32 +9,54 @@
 namespace Microsoft::ReactNative {
 SubtractionAnimatedNode::SubtractionAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : ValueAnimatedNode(tag, manager) {
-  for (const auto &inputNode : config.find(s_inputName).dereference().second) {
+    : ValueAnimatedNode(tag, config, manager) {
+  for (const auto &inputNode : config[s_inputName].AsArray()) {
+    const auto inputTag = inputNode.AsInt64();
+    assert(HasCompatibleAnimationDriver(inputTag));
     if (m_firstInput == s_firstInputUnset) {
-      m_firstInput = static_cast<int64_t>(inputNode.asDouble());
+      m_firstInput = inputTag;
     } else {
-      m_inputNodes.insert(static_cast<int64_t>(inputNode.asDouble()));
+      m_inputNodes.insert(inputTag);
     }
   }
 
-  m_propertySet.StartAnimation(s_valueName, [firstNode = m_firstInput, nodes = m_inputNodes, manager]() {
-    const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
-
-    anim.Expression([firstNode, nodes, manager, anim]() {
-      anim.SetReferenceParameter(s_baseName, manager->GetValueAnimatedNode(firstNode)->PropertySet());
-      winrt::hstring expr = static_cast<winrt::hstring>(L"(") + s_baseName + L"." + s_valueName + L" + " + s_baseName +
-          L"." + s_offsetName + L")";
-      for (const auto tag : nodes) {
-        const auto identifier = L"n" + std::to_wstring(tag);
-        anim.SetReferenceParameter(identifier, manager->GetValueAnimatedNode(tag)->PropertySet());
-        expr = expr + L" - (" + identifier + L"." + s_valueName + L" + " + identifier + L"." + s_offsetName + L")";
-      }
-      return expr;
+  if (m_useComposition) {
+    m_propertySet.StartAnimation(s_valueName, [firstNode = m_firstInput, nodes = m_inputNodes, manager]() {
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
+
+      anim.Expression([firstNode, nodes, manager, anim]() {
+        anim.SetReferenceParameter(s_baseName, manager->GetValueAnimatedNode(firstNode)->PropertySet());
+        winrt::hstring expr = static_cast<winrt::hstring>(L"(") + s_baseName + L"." + s_valueName + L" + " +
+            s_baseName + L"." + s_offsetName + L")";
+        for (const auto tag : nodes) {
+          const auto identifier = L"n" + std::to_wstring(tag);
+          anim.SetReferenceParameter(identifier, manager->GetValueAnimatedNode(tag)->PropertySet());
+          expr = expr + L" - (" + identifier + L"." + s_valueName + L" + " + identifier + L"." + s_offsetName + L")";
+        }
+        return expr;
+      }());
+      return anim;
     }());
-    return anim;
-  }());
+  }
+}
+
+void SubtractionAnimatedNode::Update() {
+  assert(!m_useComposition);
+  if (const auto manager = m_manager.lock()) {
+    auto rawValue = 0.0;
+    if (const auto firstNode = manager->GetValueAnimatedNode(m_firstInput)) {
+      rawValue = firstNode->Value();
+    }
+
+    for (const auto &tag : m_inputNodes) {
+      if (const auto node = manager->GetValueAnimatedNode(tag)) {
+        rawValue -= node->Value();
+      }
+    }
+
+    RawValue(rawValue);
+  }
 }
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/SubtractionAnimatedNode.h

@@ -10,9 +10,11 @@ class SubtractionAnimatedNode final : public ValueAnimatedNode {
  public:
   SubtractionAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
+  virtual void Update() override;
+
  private:
   int64_t m_firstInput{s_firstInputUnset};
   std::unordered_set<int64_t> m_inputNodes{};

package/Microsoft.ReactNative/Modules/Animated/TrackingAnimatedNode.cpp

@@ -9,15 +9,20 @@
 namespace Microsoft::ReactNative {
 TrackingAnimatedNode::TrackingAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : AnimatedNode(tag, manager) {
-  m_animationId = static_cast<int64_t>(config.find(s_animationIdName).dereference().second.asDouble());
-  m_toValueId = static_cast<int64_t>(config.find(s_toValueIdName).dereference().second.asDouble());
-  m_valueId = static_cast<int64_t>(config.find(s_valueIdName).dereference().second.asDouble());
-  m_animationConfig = std::move(config.find(s_animationConfigName).dereference().second);
+    : AnimatedNode(tag, config, manager) {
+  m_animationId = config[s_animationIdName].AsInt64();
+  m_toValueId = config[s_toValueIdName].AsInt64();
+  m_valueId = config[s_valueIdName].AsInt64();
+  m_animationConfig = std::move(config[s_animationConfigName].AsObject().Copy());
+  if (config.count(s_platformConfigName) && !m_animationConfig.count(s_platformConfigName)) {
+    m_animationConfig[s_platformConfigName] = std::move(config[s_platformConfigName].Copy());
+  }
 
-  StartAnimation();
+  if (m_useComposition) {
+    StartAnimation();
+  }
 }
 
 void TrackingAnimatedNode::Update() {
@@ -30,10 +35,14 @@ void TrackingAnimatedNode::StartAnimation() {
       // In case the animation is already running, we need to stop it to free up the
       // animationId key in the active animations map in the animation manager.
       strongManager->StopAnimation(m_animationId, true);
-      toValueNode->AddActiveTrackingNode(m_tag);
-      m_animationConfig.insert(static_cast<folly::StringPiece>(s_toValueIdName), toValueNode->Value());
-      strongManager->StartTrackingAnimatedNode(
-          m_animationId, m_valueId, m_toValueId, m_animationConfig, nullptr, strongManager);
+      m_animationConfig[s_toValueIdName] = toValueNode->Value();
+      if (m_useComposition) {
+        toValueNode->AddActiveTrackingNode(m_tag);
+        strongManager->StartTrackingAnimatedNode(
+            m_animationId, m_valueId, m_toValueId, m_animationConfig, nullptr, strongManager);
+      } else {
+        strongManager->StartAnimatingNode(m_animationId, m_valueId, m_animationConfig, nullptr, strongManager);
+      }
     }
   }
 }

package/Microsoft.ReactNative/Modules/Animated/TrackingAnimatedNode.h

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
+#include <JSValue.h>
 #include "AnimatedNode.h"
 
 namespace Microsoft::ReactNative {
@@ -10,18 +10,17 @@ class TrackingAnimatedNode final : public AnimatedNode {
  public:
   TrackingAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
-  void Update() override;
-
- private:
+  virtual void Update() override;
   void StartAnimation();
 
+ private:
   int64_t m_animationId{};
   int64_t m_toValueId{};
   int64_t m_valueId{};
-  folly::dynamic m_animationConfig{};
+  winrt::Microsoft::ReactNative::JSValueObject m_animationConfig;
 
   static constexpr std::string_view s_animationIdName{"animationId"};
   static constexpr std::string_view s_toValueIdName{"toValue"};

package/Microsoft.ReactNative/Modules/Animated/TransformAnimatedNode.cpp

@@ -4,27 +4,29 @@
 #include "pch.h"
 
 #include "FacadeType.h"
+#include "NativeAnimatedNodeManager.h"
 #include "TransformAnimatedNode.h"
 
 namespace Microsoft::ReactNative {
 TransformAnimatedNode::TransformAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : AnimatedNode(tag, manager) {
-  for (const auto &transform : config.find(s_transformsName).dereference().second) {
-    const auto property = transform.find(s_propertyName).dereference().second.asString();
-    if (transform.find(s_typeName).dereference().second.asString() == s_animatedName) {
-      m_transformConfigs.push_back(TransformConfig{
-          property, static_cast<int64_t>(transform.find(s_nodeTagName).dereference().second.asDouble()), 0});
+    : AnimatedNode(tag, config, manager) {
+  for (const auto &transform : config[s_transformsName].AsArray()) {
+    const auto property = transform[s_propertyName].AsString();
+    if (transform[s_typeName].AsString() == s_animatedName) {
+      const auto inputTag = transform[s_nodeTagName].AsInt64();
+      assert(HasCompatibleAnimationDriver(inputTag));
+      m_transformConfigs.push_back(TransformConfig{property, inputTag, 0});
     } else {
-      m_transformConfigs.push_back(
-          TransformConfig{property, s_unsetNodeTag, transform.find(s_valueName).dereference().second.asDouble()});
+      m_transformConfigs.push_back(TransformConfig{property, s_unsetNodeTag, transform[s_valueName].AsDouble()});
     }
   }
 }
 
 std::unordered_map<FacadeType, int64_t> TransformAnimatedNode::GetMapping() {
+  assert(m_useComposition);
   std::unordered_map<FacadeType, int64_t> mapping;
   for (const auto &config : m_transformConfigs) {
     if (config.nodeTag != s_unsetNodeTag) {
@@ -36,4 +38,29 @@ std::unordered_map<FacadeType, int64_t> TransformAnimatedNode::GetMapping() {
   }
   return mapping;
 }
+
+void TransformAnimatedNode::CollectViewUpdates(winrt::Microsoft::ReactNative::JSValueObject &props) {
+  assert(!m_useComposition);
+  winrt::Microsoft::ReactNative::JSValueArray transforms;
+  if (const auto manager = m_manager.lock()) {
+    for (const auto &transformConfig : m_transformConfigs) {
+      std::optional<double> value;
+      if (transformConfig.nodeTag == s_unsetNodeTag) {
+        value = transformConfig.value;
+      } else {
+        if (const auto node = manager->GetValueAnimatedNode(transformConfig.nodeTag)) {
+          value = node->Value();
+        }
+      }
+
+      if (value) {
+        transforms.emplace_back(
+            winrt::Microsoft::ReactNative::JSValueObject{{transformConfig.property, value.value()}});
+      }
+    }
+  }
+
+  props[s_transformPropName] = std::move(transforms);
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/TransformAnimatedNode.h

@@ -2,9 +2,10 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
+#include <JSValue.h>
 #include "AnimatedNode.h"
 #include "FacadeType.h"
+#include "JSValue.h"
 
 namespace Microsoft::ReactNative {
 struct TransformConfig {
@@ -18,9 +19,10 @@ class TransformAnimatedNode final : public AnimatedNode {
  public:
   TransformAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   std::unordered_map<FacadeType, int64_t> GetMapping();
+  void CollectViewUpdates(winrt::Microsoft::ReactNative::JSValueObject &props);
 
  private:
   std::vector<TransformConfig> m_transformConfigs;
@@ -33,5 +35,6 @@ class TransformAnimatedNode final : public AnimatedNode {
   static constexpr std::string_view s_animatedName{"animated"};
   static constexpr std::string_view s_nodeTagName{"nodeTag"};
   static constexpr std::string_view s_valueName{"value"};
+  static constexpr std::string_view s_transformPropName{"transform"};
 };
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/ValueAnimatedNode.cpp

@@ -9,59 +9,70 @@
 namespace Microsoft::ReactNative {
 ValueAnimatedNode::ValueAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : AnimatedNode(tag, manager) {
-  // TODO: Islands - need to get the XamlView associated with this animation in order to
-  // use the compositor Microsoft::ReactNative::GetCompositor(xamlView)
-  m_propertySet = Microsoft::ReactNative::GetCompositor().CreatePropertySet();
-  m_propertySet.InsertScalar(
-      s_valueName, static_cast<float>(config.find(s_jsValueName).dereference().second.asDouble()));
-  m_propertySet.InsertScalar(
-      s_offsetName, static_cast<float>(config.find(s_jsOffsetName).dereference().second.asDouble()));
-}
+    : AnimatedNode(tag, config, manager) {
+  auto value = 0.0;
+  auto offset = 0.0;
+  if (config.count(s_jsValueName) && config.count(s_jsOffsetName)) {
+    value = config[s_jsValueName].AsDouble();
+    offset = config[s_jsOffsetName].AsDouble();
+  }
 
-ValueAnimatedNode::ValueAnimatedNode(int64_t tag, const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : AnimatedNode(tag, manager) {
-  // TODO: Islands - need to get the XamlView associated with this animation in order to
-  // use the compositor Microsoft::ReactNative::GetCompositor(xamlView)
-  m_propertySet = Microsoft::ReactNative::GetCompositor().CreatePropertySet();
-  m_propertySet.InsertScalar(s_valueName, 0.0);
-  m_propertySet.InsertScalar(s_offsetName, 0.0);
+  if (m_useComposition) {
+    m_propertySet = manager->Compositor().CreatePropertySet();
+    m_propertySet.InsertScalar(s_valueName, static_cast<float>(value));
+    m_propertySet.InsertScalar(s_offsetName, static_cast<float>(offset));
+  } else {
+    m_value = value;
+    m_offset = offset;
+  }
 }
 
 double ValueAnimatedNode::RawValue() {
-  auto rawValue = 0.0f;
-  m_propertySet.TryGetScalar(s_valueName, rawValue);
-  return rawValue;
+  if (m_useComposition) {
+    auto rawValue = 0.0f;
+    m_propertySet.TryGetScalar(s_valueName, rawValue);
+    return rawValue;
+  } else {
+    return m_value;
+  }
 }
 
 void ValueAnimatedNode::RawValue(double value) {
   if (RawValue() != value) {
-    m_propertySet.InsertScalar(s_valueName, static_cast<float>(value));
-    UpdateTrackingNodes();
+    if (m_useComposition) {
+      m_propertySet.InsertScalar(s_valueName, static_cast<float>(value));
+      UpdateTrackingNodes();
+    } else {
+      m_value = value;
+    }
   }
 }
 
 double ValueAnimatedNode::Offset() {
-  auto offset = 0.0f;
-  m_propertySet.TryGetScalar(s_offsetName, offset);
-  return offset;
+  if (m_useComposition) {
+    auto offset = 0.0f;
+    m_propertySet.TryGetScalar(s_offsetName, offset);
+    return offset;
+  } else {
+    return m_offset;
+  }
 }
 
 void ValueAnimatedNode::Offset(double offset) {
   if (Offset() != offset) {
-    m_propertySet.InsertScalar(s_offsetName, static_cast<float>(offset));
-    UpdateTrackingNodes();
+    if (m_useComposition) {
+      m_propertySet.InsertScalar(s_offsetName, static_cast<float>(offset));
+      UpdateTrackingNodes();
+    } else {
+      m_offset = offset;
+    }
   }
 }
 
 double ValueAnimatedNode::Value() {
-  auto rawValue = 0.0f;
-  auto offset = 0.0f;
-  m_propertySet.TryGetScalar(s_valueName, rawValue);
-  m_propertySet.TryGetScalar(s_offsetName, offset);
-  return static_cast<double>(rawValue) + static_cast<double>(offset);
+  return RawValue() + Offset();
 }
 
 void ValueAnimatedNode::FlattenOffset() {
@@ -74,15 +85,28 @@ void ValueAnimatedNode::ExtractOffset() {
   RawValue(0.0f);
 }
 
+void ValueAnimatedNode::OnValueUpdate() {
+  if (m_valueListener) {
+    m_valueListener(Value());
+  }
+}
+
+void ValueAnimatedNode::ValueListener(const ValueListenerCallback &callback) {
+  m_valueListener = callback;
+}
+
 void ValueAnimatedNode::AddDependentPropsNode(int64_t propsNodeTag) {
+  assert(m_useComposition);
   m_dependentPropsNodes.insert(propsNodeTag);
 }
 
 void ValueAnimatedNode::RemoveDependentPropsNode(int64_t propsNodeTag) {
+  assert(m_useComposition);
   m_dependentPropsNodes.erase(propsNodeTag);
 }
 
 void ValueAnimatedNode::AddActiveAnimation(int64_t animationTag) {
+  assert(m_useComposition);
   m_activeAnimations.insert(animationTag);
   if (m_activeAnimations.size() == 1) {
     if (const auto manager = m_manager.lock()) {
@@ -95,6 +119,7 @@ void ValueAnimatedNode::AddActiveAnimation(int64_t animationTag) {
 }
 
 void ValueAnimatedNode::RemoveActiveAnimation(int64_t animationTag) {
+  assert(m_useComposition);
   m_activeAnimations.erase(animationTag);
   if (!m_activeAnimations.size()) {
     if (const auto manager = m_manager.lock()) {
@@ -107,14 +132,17 @@ void ValueAnimatedNode::RemoveActiveAnimation(int64_t animationTag) {
 }
 
 void ValueAnimatedNode::AddActiveTrackingNode(int64_t trackingNodeTag) {
+  assert(m_useComposition);
   m_activeTrackingNodes.insert(trackingNodeTag);
 }
 
 void ValueAnimatedNode::RemoveActiveTrackingNode(int64_t trackingNodeTag) {
+  assert(m_useComposition);
   m_activeTrackingNodes.erase(trackingNodeTag);
 }
 
 void ValueAnimatedNode::UpdateTrackingNodes() {
+  assert(m_useComposition);
   if (auto const manager = m_manager.lock()) {
     for (auto trackingNodeTag : m_activeTrackingNodes) {
       if (auto trackingNode = manager->GetTrackingAnimatedNode(trackingNodeTag)) {

package/Microsoft.ReactNative/Modules/Animated/ValueAnimatedNode.h

@@ -2,8 +2,9 @@
 // Licensed under the MIT License.
 
 #pragma once
+#include <JSValue.h>
 #include <UI.Composition.h>
-#include <folly/dynamic.h>
+#include <unordered_set>
 #include "AnimatedNode.h"
 
 namespace winrt {
@@ -11,13 +12,14 @@ using namespace comp;
 }
 
 namespace Microsoft::ReactNative {
+typedef std::function<void(double)> ValueListenerCallback;
+
 class ValueAnimatedNode : public AnimatedNode {
  public:
   ValueAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
-  ValueAnimatedNode(int64_t tag, const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   double Value();
   double RawValue();
   void RawValue(double value);
@@ -25,6 +27,9 @@ class ValueAnimatedNode : public AnimatedNode {
   void Offset(double offset);
   void FlattenOffset();
   void ExtractOffset();
+  void OnValueUpdate();
+  void ValueListener(const ValueListenerCallback &callback);
+
   comp::CompositionPropertySet PropertySet() {
     return m_propertySet;
   };
@@ -41,7 +46,6 @@ class ValueAnimatedNode : public AnimatedNode {
 
  protected:
   comp::CompositionPropertySet m_propertySet{nullptr};
-
   static constexpr std::string_view s_inputName{"input"};
 
   static constexpr std::string_view s_jsValueName{"value"};
@@ -52,5 +56,8 @@ class ValueAnimatedNode : public AnimatedNode {
   std::unordered_set<int64_t> m_dependentPropsNodes{};
   std::unordered_set<int64_t> m_activeAnimations{};
   std::unordered_set<int64_t> m_activeTrackingNodes{};
+  double m_value{0.0};
+  double m_offset{0.0};
+  ValueListenerCallback m_valueListener{};
 };
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/AppearanceModule.cpp

@@ -10,60 +10,81 @@ using Application = xaml::Application;
 using ApplicationTheme = xaml::ApplicationTheme;
 using UISettings = winrt::Windows::UI::ViewManagement::UISettings;
 
-using Method = facebook::xplat::module::CxxModule::Method;
-
 namespace Microsoft::ReactNative {
 
-AppearanceChangeListener::AppearanceChangeListener(
-    const Mso::React::IReactContext &context,
-    const Mso::React::IDispatchQueue2 &uiQueue) noexcept
-    : m_queue(&uiQueue), m_context(&context) {
+static const React::ReactPropertyId<ApplicationTheme> &AppearanceCurrentThemePropertyId() noexcept {
+  static const React::ReactPropertyId<ApplicationTheme> prop{L"ReactNative.Appearance", L"ApplicationTheme"};
+  return prop;
+}
+
+void Appearance::Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  m_context = reactContext;
+
+  m_context.UIDispatcher().Post([wkThis = weak_from_this()]() {
+    if (auto pThis = wkThis.lock()) {
+      pThis->RequeryTheme();
+    }
+  });
+
+  // UISettings will notify us on a background thread regardless of where we construct it or register for events.
+  // Redirect callbacks to the UI thread where we can check app theme.
+  m_revoker = m_uiSettings.ColorValuesChanged(
+      winrt::auto_revoke,
+      [wkThis = weak_from_this(), reactContext](const auto & /*sender*/, const auto & /*args*/) noexcept {
+        if (auto pThis = wkThis.lock()) {
+          reactContext.UIDispatcher().Post([wkThis]() noexcept {
+            if (auto pThis = wkThis.lock()) {
+              pThis->RequeryTheme();
+            }
+          });
+        }
+      });
+}
+
+ApplicationTheme Appearance::GetCurrentTheme() noexcept {
+  assert(m_context.UIDispatcher().HasThreadAccess()); // xaml::Application is only accessible on the UI thread
   if (auto currentApp = xaml::TryGetCurrentApplication()) {
-    m_currentTheme = currentApp.RequestedTheme();
-
-    // UISettings will notify us on a background thread regardless of where we construct it or register for events.
-    // Redirect callbacks to the UI thread where we can check app theme.
-    m_revoker = m_uiSettings.ColorValuesChanged(
-        winrt::auto_revoke, [weakThis{Mso::WeakPtr(this)}](const auto & /*sender*/, const auto & /*args*/) noexcept {
-          if (auto strongThis = weakThis.GetStrongPtr()) {
-            strongThis->m_queue->Post([weakThis]() noexcept {
-              if (auto strongThis = weakThis.GetStrongPtr()) {
-                strongThis->OnColorValuesChanged();
-              }
-            });
-          }
-        });
+    return currentApp.RequestedTheme();
   }
-}
 
-const char *AppearanceChangeListener::GetColorScheme() const noexcept {
-  return ToString(m_currentTheme);
+  return ApplicationTheme::Light;
 }
 
-const char *AppearanceChangeListener::ToString(ApplicationTheme theme) noexcept {
+const char *Appearance::ToString(ApplicationTheme theme) noexcept {
   return theme == ApplicationTheme::Dark ? "dark" : "light";
 }
 
-void AppearanceChangeListener::OnColorValuesChanged() noexcept {
-  auto newTheme = Application::Current().RequestedTheme();
-  if (m_currentTheme != newTheme) {
-    m_currentTheme = newTheme;
+void Appearance::RequeryTheme() noexcept {
+  auto theme = GetCurrentTheme();
+  auto oldThemeBoxed =
+      m_context.Properties().Handle().Set(AppearanceCurrentThemePropertyId().Handle(), winrt::box_value(theme));
+  auto oldTheme = winrt::unbox_value_or<ApplicationTheme>(oldThemeBoxed, ApplicationTheme::Light);
 
-    m_context->CallJSFunction(
-        "RCTDeviceEventEmitter", "emit", folly::dynamic::array("appearanceChanged", ToString(m_currentTheme)));
+  if (oldTheme != theme) {
+    appearanceChanged(ToString(theme));
   }
 }
 
-AppearanceModule::AppearanceModule(Mso::CntPtr<AppearanceChangeListener> &&appearanceListener) noexcept
-    : m_changeListener(std::move(appearanceListener)) {}
+void Appearance::InitOnUIThread(const Mso::React::IReactContext &context) noexcept {
+  xaml::ApplicationTheme theme = ApplicationTheme::Light;
+  if (auto currentApp = xaml::TryGetCurrentApplication()) {
+    theme = currentApp.RequestedTheme();
+  }
+
+  winrt::Microsoft::ReactNative::ReactPropertyBag pb{context.Properties()};
+  pb.Set(AppearanceCurrentThemePropertyId(), theme);
+}
+
+std::optional<std::string> Appearance::getColorScheme() noexcept {
+  return ToString(*(m_context.Properties().Get(AppearanceCurrentThemePropertyId())));
+}
 
-std::string AppearanceModule::getName() {
-  return AppearanceModule::Name;
+void Appearance::addListener(std::string eventName) noexcept {
+  // no-op
 }
 
-std::vector<Method> AppearanceModule::getMethods() {
-  return {Method(
-      "getColorScheme", [this](folly::dynamic /*args*/) { return m_changeListener->GetColorScheme(); }, SyncTag)};
+void Appearance::removeListeners(double count) noexcept {
+  // no-op
 }
 
 } // namespace Microsoft::ReactNative