react-native-windows 0.0.0-canary.440 → 0.0.0-canary.441

package/Directory.Build.targets

@@ -5,8 +5,9 @@
   <Import Condition="Exists($([MSBuild]::GetPathOfFileAbove('Directory.Build.targets', '$(MSBuildThisFileDirectory)../')))" Project="$([MSBuild]::GetPathOfFileAbove('Directory.Build.targets', '$(MSBuildThisFileDirectory)../'))" />
 
   <!--Allow implicitly restoring PackageReference dependencies in C++ projects using the Visual Studio IDE.-->
-  <Target Name="BeforeResolveReferences" Condition="'$(BuildingInsideVisualStudio)' == 'true' AND '$(MSBuildProjectExtension)' == '.vcxproj'">
-    <MSBuild Projects="$(MSBuildProjectFile)" Targets="Restore" />
+  <Target Name="BeforeResolveReferences" Condition="'$(BuildingInsideVisualStudio)' == 'true'">
+    <MSBuild Projects="$(SolutionPath)" Targets="Restore" Properties="RestoreProjectStyle=PackageReference" />
+    <MSBuild Projects="$(SolutionPath)" Targets="Restore" Properties="RestoreProjectStyle=PackagesConfig;RestorePackagesConfig=true" />
   </Target>
 
 </Project>

package/Libraries/AppTheme/AppTheme.js

@@ -1,47 +1,83 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-'use strict';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppTheme = void 0;
-const react_native_1 = require("react-native");
-// We previously gracefully handled importing AppTheme in the Jest environment.
-// Mock the NM until we have a coherent story for exporting our own Jest mocks,
-// or remove this API.
-const NativeAppTheme = react_native_1.NativeModules.RTCAppTheme || {
-    initialHighContrast: false,
-    initialHighContrastColors: {
-        ButtonFaceColor: '',
-        ButtonTextColor: '',
-        GrayTextColor: '',
-        HighlightColor: '',
-        HighlightTextColor: '',
-        HotlightColor: '',
-        WindowColor: '',
-        WindowTextColor: '',
-    },
-};
-class AppThemeModule extends react_native_1.NativeEventEmitter {
-    constructor() {
-        super();
-        this._highContrastColors = NativeAppTheme.initialHighContrastColors;
-        this._isHighContrast = NativeAppTheme.initialHighContrast;
-        this.addListener('highContrastChanged', (nativeEvent) => {
-            this._isHighContrast = nativeEvent.isHighContrast;
-            this._highContrastColors = nativeEvent.highContrastColors;
-        });
-    }
-    addListener(eventName, listener) {
-        return super.addListener(eventName, listener);
-    }
-    get isHighContrast() {
-        return this._isHighContrast;
-    }
-    get currentHighContrastColors() {
-        return this._highContrastColors;
-    }
-}
-exports.AppTheme = new AppThemeModule();
-//# sourceMappingURL=AppTheme.js.map
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import EventEmitter, {
+  type EventSubscription,
+} from '../vendor/emitter/EventEmitter';
+import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import NativeAppTheme, {
+  type AppThemeData,
+  type HighContrastColors,
+} from './NativeAppTheme';
+
+// Default values here are used in jest environment, or when native module otherwise not availiable
+let _isHighContrast = false;
+let _highContrastColors = {
+  ButtonFaceColor: '',
+  ButtonTextColor: '',
+  GrayTextColor: '',
+  HighlightColor: '',
+  HighlightTextColor: '',
+  HotlightColor: '',
+  WindowColor: '',
+  WindowTextColor: '',
+};
+
+type AppThemeListener = (nativeEvent: AppThemeData) => void;
+const eventEmitter = new EventEmitter<{
+  highContrastChanged: [AppThemeData],
+}>();
+
+type NativeAppThemeEventDefinitions = {
+  highContrastChanged: [AppThemeData],
+};
+
+if (NativeAppTheme) {
+  _isHighContrast = NativeAppTheme.getConstants().isHighContrast;
+  _highContrastColors = NativeAppTheme.getConstants().highContrastColors;
+
+  const nativeEventEmitter =
+    new NativeEventEmitter<NativeAppThemeEventDefinitions>(null);
+  nativeEventEmitter.addListener(
+    'highContrastChanged',
+    (newAppTheme: AppThemeData) => {
+      _isHighContrast = newAppTheme.isHighContrast;
+      _highContrastColors = newAppTheme.highContrastColors;
+      eventEmitter.emit('highContrastChanged', newAppTheme);
+    },
+  );
+}
+
+module.exports = {
+  // $FlowFixMe[unsafe-getters-setters]
+  get isHighContrast(): boolean {
+    return _isHighContrast;
+  },
+
+  // $FlowFixMe[unsafe-getters-setters]
+  get currentHighContrastColors(): HighContrastColors {
+    return _highContrastColors;
+  },
+
+  /**
+   * Add an event handler that is fired when appearance preferences change.
+   */
+  addListener(
+    eventName: 'highContrastChanged',
+    listener: AppThemeListener,
+  ): EventSubscription {
+    return eventEmitter.addListener(eventName, listener);
+  },
+
+  removeListener(
+    eventName: 'highContrastChanged',
+    listener: AppThemeListener,
+  ): void {
+    eventEmitter.removeListener(eventName, listener);
+  },
+};

package/Libraries/AppTheme/AppThemeTypes.d.ts

@@ -1,22 +1,47 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-/**
- * Color information for high contrast
- */
-export interface IHighContrastColors {
-    ButtonFaceColor: string;
-    ButtonTextColor: string;
-    GrayTextColor: string;
-    HighlightColor: string;
-    HighlightTextColor: string;
-    HotlightColor: string;
-    WindowColor: string;
-    WindowTextColor: string;
-}
-export interface IHighContrastChangedEvent {
-    isHighContrast: boolean;
-    highContrastColors: IHighContrastColors;
-}
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import {EmitterSubscription} from 'react-native';
+
+/**
+ * Color information for high contrast
+ */
+export interface IHighContrastColors {
+  ButtonFaceColor: string;
+  ButtonTextColor: string;
+  GrayTextColor: string;
+  HighlightColor: string;
+  HighlightTextColor: string;
+  HotlightColor: string;
+  WindowColor: string;
+  WindowTextColor: string;
+}
+
+export interface IHighContrastChangedEvent {
+  isHighContrast: boolean;
+  highContrastColors: IHighContrastColors;
+}
+
+export type AppTheme = {
+  addListener(
+    eventName: 'highContrastChanged',
+    listener: (nativeEvent: IHighContrastChangedEvent) => void,
+  ): EmitterSubscription;
+
+  /**
+   * @deprecated Use remove method on the EmitterSubscription returned from addListener
+   */
+  removeListener(
+    eventName: 'highContrastChanged',
+    listener: (nativeEvent: IHighContrastChangedEvent) => void,
+  ): void;
+
+  isHighContrast: boolean;
+
+  currentHighContrastColors: IHighContrastColors;
+};
+
+export const AppTheme: AppTheme;

package/Libraries/AppTheme/NativeAppTheme.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @flow strict
+ * @format
+ */
+
+import type {TurboModule} from '../TurboModule/RCTExport';
+import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+
+export type HighContrastColors = {|
+  ButtonFaceColor: string,
+  ButtonTextColor: string,
+  GrayTextColor: string,
+  HighlightColor: string,
+  HighlightTextColor: string,
+  HotlightColor: string,
+  WindowColor: string,
+  WindowTextColor: string,
+|};
+
+export type AppThemeData = {|
+  isHighContrast: boolean,
+  highContrastColors: HighContrastColors,
+|};
+
+export interface Spec extends TurboModule {
+  +getConstants: () => AppThemeData;
+}
+
+export default (TurboModuleRegistry.get<Spec>('AppTheme'): ?Spec);

package/Microsoft.ReactNative/Base/CoreNativeModules.cpp

@@ -7,7 +7,6 @@
 // Modules
 #include <AsyncStorageModule.h>
 #include <Modules/Animated/NativeAnimatedModule.h>
-#include <Modules/AppThemeModuleUwp.h>
 #include <Modules/AppearanceModule.h>
 #include <Modules/AsyncStorageModuleWin32.h>
 #include <Modules/ClipboardModule.h>
@@ -43,7 +42,6 @@ std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
     const std::shared_ptr<facebook::react::MessageQueueThread> &batchingUIMessageQueue,
     const std::shared_ptr<facebook::react::MessageQueueThread>
         &jsMessageQueue, // JS engine thread (what we use for external modules)
-    std::shared_ptr<AppTheme> &&appTheme,
     Mso::CntPtr<AppearanceChangeListener> &&appearanceListener,
     Mso::CntPtr<Mso::React::IReactContext> &&context) noexcept {
   std::vector<facebook::react::NativeModuleDescription> modules;
@@ -58,11 +56,6 @@ std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
       [batchingUIMessageQueue]() { return facebook::react::CreateTimingModule(batchingUIMessageQueue); },
       batchingUIMessageQueue);
 
-  modules.emplace_back(
-      AppThemeModule::Name,
-      [appTheme = std::move(appTheme)]() mutable { return std::make_unique<AppThemeModule>(std::move(appTheme)); },
-      batchingUIMessageQueue);
-
   modules.emplace_back(
       NativeAnimatedModule::name,
       [context = std::move(context)]() mutable { return std::make_unique<NativeAnimatedModule>(std::move(context)); },

package/Microsoft.ReactNative/Base/CoreNativeModules.h

@@ -3,7 +3,6 @@
 
 #pragma once
 
-#include <Modules/AppThemeModuleUwp.h>
 #include <Modules/AppearanceModule.h>
 #include <React.h>
 #include <Shared/NativeModuleProvider.h>
@@ -27,7 +26,6 @@ struct ViewManagerProvider;
 std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
     const std::shared_ptr<facebook::react::MessageQueueThread> &batchingUIMessageQueue,
     const std::shared_ptr<facebook::react::MessageQueueThread> &jsMessageQueue,
-    std::shared_ptr<AppTheme> &&appTheme,
     Mso::CntPtr<AppearanceChangeListener> &&appearanceListener,
     Mso::CntPtr<Mso::React::IReactContext> &&context) noexcept;
 

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

@@ -23,13 +23,15 @@ std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> CalculatedA
     std::vector<float> keyFrames;
     bool done = false;
     double time = 0;
+    std::optional<double> previousValue = std::nullopt;
     while (!done) {
       time += 1.0f / 60.0f;
       auto [currentValue, currentVelocity] = GetValueAndVelocityForTime(time);
       keyFrames.push_back(currentValue);
-      if (IsAnimationDone(currentValue, currentVelocity)) {
+      if (IsAnimationDone(currentValue, previousValue, currentVelocity)) {
         done = true;
       }
+      previousValue = currentValue;
     }
     return keyFrames;
   }();

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

@@ -18,7 +18,7 @@ class CalculatedAnimationDriver : public AnimationDriver {
  protected:
   virtual std::tuple<float, double> GetValueAndVelocityForTime(double time) = 0;
 
-  virtual bool IsAnimationDone(double currentValue, double currentVelocity) = 0;
+  virtual bool IsAnimationDone(double currentValue, std::optional<double> previousValue, double currentVelocity) = 0;
   double m_startValue{0};
 };
 } // namespace Microsoft::ReactNative

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

@@ -26,12 +26,11 @@ std::tuple<float, double> DecayAnimationDriver::GetValueAndVelocityForTime(doubl
                          42.0f); // we don't need the velocity, so set it to a dummy value
 }
 
-bool DecayAnimationDriver::IsAnimationDone(double currentValue, double /*currentVelocity*/) {
-  return (std::abs(ToValue() - currentValue) < 0.1);
-}
-
-double DecayAnimationDriver::ToValue() {
-  return m_startValue + m_velocity / (1 - m_deceleration);
+bool DecayAnimationDriver::IsAnimationDone(
+    double currentValue,
+    std::optional<double> previousValue,
+    double /*currentVelocity*/) {
+  return previousValue.has_value() && std::abs(currentValue - previousValue.value()) < 0.1;
 }
 
 } // namespace Microsoft::ReactNative

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

@@ -16,11 +16,9 @@ class DecayAnimationDriver : public CalculatedAnimationDriver {
       const folly::dynamic &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
-  double ToValue() override;
-
  protected:
   std::tuple<float, double> GetValueAndVelocityForTime(double time) override;
-  bool IsAnimationDone(double currentValue, double currentVelocity) override;
+  bool IsAnimationDone(double currentValue, std::optional<double> previousValue, double currentVelocity) override;
 
  private:
   double m_velocity{0};

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

@@ -134,7 +134,11 @@ void NativeAnimatedNodeManager::StopAnimation(int64_t animationId, bool isTracki
       const auto nodeTag = animation->AnimatedValueTag();
       if (nodeTag != -1) {
         const auto deferredAnimation = m_deferredAnimationForValues.find(nodeTag);
-        if (deferredAnimation != m_deferredAnimationForValues.end() && deferredAnimation->second == animationId) {
+        if (deferredAnimation != m_deferredAnimationForValues.end()) {
+          // We can assume that the currently deferred animation is the one
+          // being stopped given the constraint that only one animation can
+          // be active for a given value node.
+          assert(deferredAnimation->second == animationId);
           // If the animation is deferred, just remove the deferred animation
           // entry as two animations cannot animate the same value concurrently.
           m_deferredAnimationForValues.erase(nodeTag);

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

@@ -29,7 +29,10 @@ SpringAnimationDriver::SpringAnimationDriver(
   m_iterations = static_cast<int>(config.find(s_iterationsParameterName).dereference().second.asDouble());
 }
 
-bool SpringAnimationDriver::IsAnimationDone(double currentValue, double currentVelocity) {
+bool SpringAnimationDriver::IsAnimationDone(
+    double currentValue,
+    std::optional<double> /*previousValue*/,
+    double currentVelocity) {
   return (
       IsAtRest(currentVelocity, currentValue, m_endValue) ||
       (m_overshootClampingEnabled && IsOvershooting(currentValue)));

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

@@ -22,7 +22,7 @@ class SpringAnimationDriver : public CalculatedAnimationDriver {
 
  protected:
   std::tuple<float, double> GetValueAndVelocityForTime(double time) override;
-  bool IsAnimationDone(double currentValue, double currentVelocity) override;
+  bool IsAnimationDone(double currentValue, std::optional<double> previousValue, double currentVelocity) override;
 
  private:
   bool IsAtRest(double currentVelocity, double currentPosition, double endValue);

package/Microsoft.ReactNative/Modules/AppThemeModuleUwp.cpp

@@ -29,17 +29,20 @@ using namespace winrt::Microsoft::ReactNative;
 
 namespace Microsoft::ReactNative {
 
+static const React::ReactPropertyId<React::ReactNonAbiValue<std::shared_ptr<AppThemeHolder>>>
+    &AppThemeHolderPropertyId() noexcept {
+  static const React::ReactPropertyId<React::ReactNonAbiValue<std::shared_ptr<AppThemeHolder>>> prop{
+      L"ReactNative.AppTheme", L"AppThemeHolder"};
+  return prop;
+}
+
 //
-// AppTheme
+// AppThemeHolder
 //
 
-AppTheme::AppTheme(
-    const Mso::React::IReactContext &context,
-    const std::shared_ptr<facebook::react::MessageQueueThread> &defaultQueueThread)
-    : m_context(&context), m_queueThread(defaultQueueThread) {
+AppThemeHolder::AppThemeHolder(const Mso::React::IReactContext &context) : m_context(&context) {
   if (auto currentApp = xaml::TryGetCurrentApplication()) {
-    m_isHighContrast = getIsHighContrast();
-    m_highContrastColors = getHighContrastColors();
+    NotifyHighContrastChanged();
 
     if (IsWinUI3Island()) {
       m_wmSubscription = SubscribeToWindowMessage(
@@ -53,57 +56,69 @@ AppTheme::AppTheme(
   }
 }
 
-bool AppTheme::getIsHighContrast() const {
-  return m_accessibilitySettings.HighContrast();
+ReactNativeSpecs::AppThemeSpec_AppThemeData AppThemeHolder::GetConstants() noexcept {
+  return m_appThemeData;
 }
 
-// Returns the RBG values for the 8 relevant High Contrast elements.
-folly::dynamic AppTheme::getHighContrastColors() const {
-  winrt::Windows::UI::Color ButtonFaceColor = m_uiSettings.UIElementColor(winrt::UIElementType::ButtonFace);
-  winrt::Windows::UI::Color ButtonTextColor = m_uiSettings.UIElementColor(winrt::UIElementType::ButtonText);
-  winrt::Windows::UI::Color GrayTextColor = m_uiSettings.UIElementColor(winrt::UIElementType::GrayText);
-  winrt::Windows::UI::Color HighlightColor = m_uiSettings.UIElementColor(winrt::UIElementType::Highlight);
-  winrt::Windows::UI::Color HighlightTextColor = m_uiSettings.UIElementColor(winrt::UIElementType::HighlightText);
-  winrt::Windows::UI::Color HotlightColor = m_uiSettings.UIElementColor(winrt::UIElementType::Hotlight);
-  winrt::Windows::UI::Color WindowColor = m_uiSettings.UIElementColor(winrt::UIElementType::Window);
-  winrt::Windows::UI::Color WindowTextColor = m_uiSettings.UIElementColor(winrt::UIElementType::WindowText);
-
-  folly::dynamic rbgValues = folly::dynamic::object("ButtonFaceColor", formatRGB(ButtonFaceColor))(
-      "ButtonTextColor", formatRGB(ButtonTextColor))("GrayTextColor", formatRGB(GrayTextColor))(
-      "HighlightColor", formatRGB(HighlightColor))("HighlightTextColor", formatRGB(HighlightTextColor))(
-      "HotlightColor", formatRGB(HotlightColor))("WindowColor", formatRGB(WindowColor))(
-      "WindowTextColor", formatRGB(WindowTextColor));
-  return rbgValues;
+/*static*/ void AppThemeHolder::InitAppThemeHolder(const Mso::React::IReactContext &context) noexcept {
+  auto appThemeHolder = std::make_shared<AppThemeHolder>(context);
+  winrt::Microsoft::ReactNative::ReactPropertyBag pb{context.Properties()};
+  pb.Set(AppThemeHolderPropertyId(), std::move(appThemeHolder));
 }
 
-/*static*/ std::string AppTheme::formatRGB(winrt::Windows::UI::Color ElementColor) {
-  char colorChars[8];
-  sprintf_s(colorChars, "#%02x%02x%02x", ElementColor.R, ElementColor.G, ElementColor.B);
-  return colorChars;
-}
+void AppThemeHolder::SetCallback(
+    const React::ReactPropertyBag &propertyBag,
+    Mso::Functor<void(React::JSValueObject &&)> &&callback) noexcept {
+  auto holder = propertyBag.Get(AppThemeHolderPropertyId());
 
-void AppTheme::fireEvent(std::string const &eventName, folly::dynamic &&eventData) const {
-  m_context->CallJSFunction("RCTDeviceEventEmitter", "emit", folly::dynamic::array(eventName, std::move(eventData)));
+  (*holder)->m_notifyCallback = std::move(callback);
 }
 
-void AppTheme::NotifyHighContrastChanged() const {
-  folly::dynamic eventData =
-      folly::dynamic::object("highContrastColors", getHighContrastColors())("isHighContrast", getIsHighContrast());
-  this->
+void AppThemeHolder::NotifyHighContrastChanged() noexcept {
+  m_appThemeData.isHighContrast = m_accessibilitySettings.HighContrast();
+  m_appThemeData.highContrastColors.ButtonFaceColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::ButtonFace));
+  m_appThemeData.highContrastColors.ButtonTextColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::ButtonText));
+  m_appThemeData.highContrastColors.GrayTextColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::GrayText));
+  m_appThemeData.highContrastColors.HighlightColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::Highlight));
+  m_appThemeData.highContrastColors.HighlightTextColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::HighlightText));
+  m_appThemeData.highContrastColors.HotlightColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::Hotlight));
+  m_appThemeData.highContrastColors.WindowColor = FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::Window));
+  m_appThemeData.highContrastColors.WindowTextColor =
+      FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::WindowText));
+
+  if (m_notifyCallback) {
+    auto writer = MakeJSValueTreeWriter();
+    WriteValue(writer, m_appThemeData);
+    m_notifyCallback(TakeJSValue(writer).MoveObject());
+  }
+}
 
-      fireEvent("highContrastChanged", std::move(eventData));
+/*static*/ std::string AppThemeHolder::FormatRGB(winrt::Windows::UI::Color ElementColor) {
+  char colorChars[8];
+  sprintf_s(colorChars, "#%02x%02x%02x", ElementColor.R, ElementColor.G, ElementColor.B);
+  return colorChars;
 }
 
-AppThemeModule::AppThemeModule(std::shared_ptr<AppTheme> &&appTheme) : m_appTheme(std::move(appTheme)) {}
+void AppTheme::Initialize(React::ReactContext const &reactContext) noexcept {
+  m_context = reactContext;
 
-auto AppThemeModule::getConstants() -> std::map<std::string, folly::dynamic> {
-  return {
-      {"initialHighContrast", folly::dynamic{m_appTheme->getIsHighContrast()}},
-      {"initialHighContrastColors", folly::dynamic{m_appTheme->getHighContrastColors()}}};
+  AppThemeHolder::SetCallback(
+      m_context.Properties(), [weakThis = weak_from_this()](React::JSValueObject &&appThemeInfo) {
+        if (auto strongThis = weakThis.lock()) {
+          strongThis->m_context.EmitJSEvent(L"RCTDeviceEventEmitter", L"highContrastChanged", appThemeInfo);
+        }
+      });
 }
 
-auto AppThemeModule::getMethods() -> std::vector<facebook::xplat::module::CxxModule::Method> {
-  return {};
+ReactNativeSpecs::AppThemeSpec_AppThemeData AppTheme::GetConstants() noexcept {
+  winrt::Microsoft::ReactNative::ReactPropertyBag pb{m_context.Properties()};
+  return (*pb.Get(AppThemeHolderPropertyId()))->GetConstants();
 }
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/AppThemeModuleUwp.h

@@ -9,48 +9,47 @@
 #include <cxxreact/MessageQueueThread.h>
 #include <winrt/Windows.UI.ViewManagement.h>
 
+#include "../../codegen/NativeAppThemeSpec.g.h"
+#include <NativeModules.h>
+
 namespace Microsoft::ReactNative {
 
-class AppTheme : public std::enable_shared_from_this<AppTheme> {
+class AppThemeHolder {
  public:
-  AppTheme(
-      const Mso::React::IReactContext &reactContext,
-      const std::shared_ptr<facebook::react::MessageQueueThread> &defaultQueueThread);
+  AppThemeHolder(const Mso::React::IReactContext &reactContext);
 
-  bool getIsHighContrast() const;
-  folly::dynamic getHighContrastColors() const;
+  static void InitAppThemeHolder(const Mso::React::IReactContext &context) noexcept;
+  ReactNativeSpecs::AppThemeSpec_AppThemeData GetConstants() noexcept;
+  static void SetCallback(
+      const React::ReactPropertyBag &propertyBag,
+      Mso::Functor<void(React::JSValueObject &&)> &&callback) noexcept;
 
  private:
   // High Contrast Color helper method
-  static std::string formatRGB(winrt::Windows::UI::Color ElementColor);
-  void NotifyHighContrastChanged() const;
-  void fireEvent(std::string const &eventName, folly::dynamic &&eventData) const;
+  static std::string FormatRGB(winrt::Windows::UI::Color ElementColor);
+  void NotifyHighContrastChanged() noexcept;
 
   Mso::CntPtr<const Mso::React::IReactContext> m_context;
-  std::shared_ptr<facebook::react::MessageQueueThread> m_queueThread;
-  bool m_isHighContrast{false};
-  folly::dynamic m_highContrastColors;
+  Mso::Functor<void(React::JSValueObject &&)> m_notifyCallback;
+  ReactNativeSpecs::AppThemeSpec_AppThemeData m_appThemeData;
   winrt::Windows::UI::ViewManagement::AccessibilitySettings m_accessibilitySettings{};
   winrt::Windows::UI::ViewManagement::AccessibilitySettings::HighContrastChanged_revoker m_highContrastChangedRevoker{};
   winrt::Windows::UI::ViewManagement::UISettings m_uiSettings{};
   winrt::Microsoft::ReactNative::ReactNotificationSubscription m_wmSubscription;
 };
 
-class AppThemeModule : public facebook::xplat::module::CxxModule {
- public:
-  static constexpr const char *Name = "RTCAppTheme";
+REACT_MODULE(AppTheme)
+struct AppTheme : public std::enable_shared_from_this<AppTheme> {
+  using ModuleSpec = ReactNativeSpecs::AppThemeSpec;
 
-  AppThemeModule(std::shared_ptr<AppTheme> &&appTheme);
+  REACT_GET_CONSTANTS(GetConstants)
+  ReactNativeSpecs::AppThemeSpec_AppThemeData GetConstants() noexcept;
 
-  // CxxModule
-  std::string getName() override {
-    return Name;
-  };
-  auto getConstants() -> std::map<std::string, folly::dynamic> override;
-  auto getMethods() -> std::vector<Method> override;
+  REACT_INIT(Initialize)
+  void Initialize(React::ReactContext const &reactContext) noexcept;
 
  private:
-  std::shared_ptr<AppTheme> m_appTheme;
+  winrt::Microsoft::ReactNative::ReactContext m_context;
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp

@@ -41,6 +41,7 @@
 #include "Modules/AccessibilityInfoModule.h"
 #include "Modules/AlertModule.h"
 #include "Modules/AppStateModule.h"
+#include "Modules/AppThemeModuleUwp.h"
 #include "Modules/ClipboardModule.h"
 #endif
 #include "Modules/DevSettingsModule.h"
@@ -285,6 +286,9 @@ void ReactInstanceWin::LoadModules(
   registerTurboModule(
       L"AppState", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::AppState>());
 
+  registerTurboModule(
+      L"AppTheme", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::AppTheme>());
+
   registerTurboModule(
       L"LogBox", winrt::Microsoft::ReactNative::MakeTurboModuleProvider<::Microsoft::ReactNative::LogBox>());
 
@@ -331,8 +335,7 @@ void ReactInstanceWin::Initialize() noexcept {
     // Objects that must be created on the UI thread
     if (auto strongThis = weakThis.GetStrongPtr()) {
 #ifndef CORE_ABI
-      strongThis->m_appTheme = std::make_shared<Microsoft::ReactNative::AppTheme>(
-          strongThis->GetReactContext(), strongThis->m_uiMessageThread.LoadWithLock());
+      Microsoft::ReactNative::AppThemeHolder::InitAppThemeHolder(strongThis->GetReactContext());
       Microsoft::ReactNative::I18nManager::InitI18nInfo(
           winrt::Microsoft::ReactNative::ReactPropertyBag(strongThis->Options().Properties));
       strongThis->m_appearanceListener = Mso::Make<Microsoft::ReactNative::AppearanceChangeListener>(
@@ -380,11 +383,7 @@ void ReactInstanceWin::Initialize() noexcept {
           // Acquire default modules and then populate with custom modules.
           // Note that some of these have custom thread affinity.
           std::vector<facebook::react::NativeModuleDescription> cxxModules = Microsoft::ReactNative::GetCoreModules(
-              m_batchingUIThread,
-              m_jsMessageThread.Load(),
-              std::move(m_appTheme),
-              std::move(m_appearanceListener),
-              m_reactContext);
+              m_batchingUIThread, m_jsMessageThread.Load(), std::move(m_appearanceListener), m_reactContext);
 #endif
 
           auto nmp = std::make_shared<winrt::Microsoft::ReactNative::NativeModulesProvider>();

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.h

@@ -11,7 +11,6 @@
 #include "activeObject/activeObject.h"
 
 #ifndef CORE_ABI
-#include <Modules/AppThemeModuleUwp.h>
 #include <Modules/AppearanceModule.h>
 #include <Modules/I18nManagerModule.h>
 #include <Views/ExpressionAnimationStore.h>
@@ -178,7 +177,6 @@ class ReactInstanceWin final : public Mso::ActiveObject<IReactInstanceInternal>
 
   std::shared_ptr<IRedBoxHandler> m_redboxHandler;
 #ifndef CORE_ABI
-  std::shared_ptr<Microsoft::ReactNative::AppTheme> m_appTheme;
   Mso::CntPtr<Microsoft::ReactNative::AppearanceChangeListener> m_appearanceListener;
 #endif
   Mso::CntPtr<Mso::React::IDispatchQueue2> m_uiQueue;

package/PropertySheets/External/Microsoft.ReactNative.Common.targets

@@ -15,8 +15,9 @@
 
   <!-- Should match entry in $(ReactNativeWindowsDir)vnext\Directory.Build.targets -->
   <!--Allow implicitly restoring PackageReference dependencies in C++ projects using the Visual Studio IDE.-->
-  <Target Name="BeforeResolveReferences" Condition="'$(BuildingInsideVisualStudio)' == 'true' AND '$(MSBuildProjectExtension)' == '.vcxproj'">
-    <MSBuild Projects="$(MSBuildProjectFile)" Targets="Restore" />
+  <Target Name="BeforeResolveReferences" Condition="'$(BuildingInsideVisualStudio)' == 'true'">
+    <MSBuild Projects="$(SolutionPath)" Targets="Restore" Properties="RestoreProjectStyle=PackageReference" />
+    <MSBuild Projects="$(SolutionPath)" Targets="Restore" Properties="RestoreProjectStyle=PackagesConfig;RestorePackagesConfig=true" />
   </Target>
 
 </Project>

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.440</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.0.0-canary.441</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>0</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>

package/codegen/NativeAppThemeSpec.g.h

@@ -0,0 +1,57 @@
+
+/*
+ * This file is auto-generated from a NativeModule spec file in js.
+ *
+ * This is a C++ Spec class that should be used with MakeTurboModuleProvider to register native modules
+ * in a way that also verifies at compile time that the native module matches the interface required
+ * by the TurboModule JS spec.
+ */
+#pragma once
+
+#include "NativeModules.h"
+#include <tuple>
+
+namespace Microsoft::ReactNativeSpecs {
+
+REACT_STRUCT(AppThemeSpec_HighContrastColors)
+struct AppThemeSpec_HighContrastColors {
+    REACT_FIELD(ButtonFaceColor)
+    std::string ButtonFaceColor;
+    REACT_FIELD(ButtonTextColor)
+    std::string ButtonTextColor;
+    REACT_FIELD(GrayTextColor)
+    std::string GrayTextColor;
+    REACT_FIELD(HighlightColor)
+    std::string HighlightColor;
+    REACT_FIELD(HighlightTextColor)
+    std::string HighlightTextColor;
+    REACT_FIELD(HotlightColor)
+    std::string HotlightColor;
+    REACT_FIELD(WindowColor)
+    std::string WindowColor;
+    REACT_FIELD(WindowTextColor)
+    std::string WindowTextColor;
+};
+
+REACT_STRUCT(AppThemeSpec_AppThemeData)
+struct AppThemeSpec_AppThemeData {
+    REACT_FIELD(isHighContrast)
+    bool isHighContrast;
+    REACT_FIELD(highContrastColors)
+    AppThemeSpec_HighContrastColors highContrastColors;
+};
+
+struct AppThemeSpec : winrt::Microsoft::ReactNative::TurboModuleSpec {
+  static constexpr auto methods = std::tuple{
+
+  };
+
+  template <class TModule>
+  static constexpr void ValidateModule() noexcept {
+    constexpr auto methodCheckResults = CheckMethods<TModule, AppThemeSpec>();
+
+
+  }
+};
+
+} // namespace Microsoft::ReactNativeSpecs

package/index.windows.js

@@ -52,6 +52,9 @@ import typeof Animated from './Libraries/Animated/Animated';
 import typeof Appearance from './Libraries/Utilities/Appearance';
 import typeof AppRegistry from './Libraries/ReactNative/AppRegistry';
 import typeof AppState from './Libraries/AppState/AppState';
+// [Windows
+import typeof AppTheme from './Libraries/AppTheme/AppTheme';
+// Windows]
 import typeof AsyncStorage from './Libraries/Storage/AsyncStorage';
 import typeof BackHandler from './Libraries/Utilities/BackHandler';
 import typeof Clipboard from './Libraries/Components/Clipboard/Clipboard';
@@ -525,8 +528,8 @@ module.exports = {
   get ViewWindows(): any {
     return require('./Libraries/Components/View/ViewWindows').ViewWindows;
   },
-  get AppTheme(): any {
-    return require('./Libraries/AppTheme/AppTheme').AppTheme;
+  get AppTheme(): AppTheme {
+    return require('./Libraries/AppTheme/AppTheme');
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.0.0-canary.440",
+  "version": "0.0.0-canary.441",
   "license": "MIT",
   "repository": {
     "type": "git",

package/rntypes/index.d.ts

@@ -19,7 +19,6 @@
 //                 Ceyhun Ozugur <https://github.com/ceyhun>
 //                 Mike Martin <https://github.com/mcmar>
 //                 Theo Henry de Villeneuve <https://github.com/theohdv>
-//                 Eli White <https://github.com/TheSavior>
 //                 Romain Faust <https://github.com/romain-faust>
 //                 Be Birchall <https://github.com/bebebebebe>
 //                 Jesse Katsumata <https://github.com/Naturalclar>
@@ -6344,6 +6343,12 @@ export interface ScrollViewPropsIOS {
      */
     automaticallyAdjustContentInsets?: boolean | undefined; // true
 
+    /**
+     * Controls whether iOS should automatically adjust the scroll indicator
+     * insets. The default value is true. Available on iOS 13 and later.
+     */
+    automaticallyAdjustsScrollIndicatorInsets?: boolean | undefined;
+
     /**
      * When true the scroll view bounces when it reaches the end of the
      * content if the content is larger then the scroll view along the axis of

package/typings-index.d.ts

@@ -16,5 +16,4 @@ export * from './Libraries/Components/Keyboard/KeyboardExt';
 export * from './Libraries/Components/Keyboard/KeyboardExtProps';
 export * from './Libraries/Components/View/ViewWindowsProps';
 export * from './Libraries/Components/View/ViewWindows';
-export * from './Libraries/AppTheme/AppTheme';
 export * from './Libraries/AppTheme/AppThemeTypes';

package/typings-index.js

@@ -36,6 +36,5 @@ __exportStar(require("./Libraries/Components/Keyboard/KeyboardExt"), exports);
 __exportStar(require("./Libraries/Components/Keyboard/KeyboardExtProps"), exports);
 __exportStar(require("./Libraries/Components/View/ViewWindowsProps"), exports);
 __exportStar(require("./Libraries/Components/View/ViewWindows"), exports);
-__exportStar(require("./Libraries/AppTheme/AppTheme"), exports);
 __exportStar(require("./Libraries/AppTheme/AppThemeTypes"), exports);
 //# sourceMappingURL=typings-index.js.map

package/typings-index.js.map

@@ -1 +1 @@
-{"version":3,"file":"typings-index.js","sourceRoot":"","sources":["src/typings-index.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;;;;;;;;;;;AAEH;;;;EAIE;AAEF,2EAA2E;AAC3E,wFAAwF;AACxF,iDAAiD;AACjD,kDAAgC;AAChC,4EAA0D;AAC1D,uEAAqD;AACrD,qEAAmD;AACnD,0EAAwD;AACxD,qEAAmD;AACnD,8EAA4D;AAC5D,mFAAiE;AACjE,+EAA6D;AAC7D,0EAAwD;AACxD,gEAA8C;AAC9C,qEAAmD","sourcesContent":["/**\n * @packagedocumentation\n *\n * This package provides Windows specific components in addition to providing the core react-native primities.\n * Cross platform React-native primitives should be imported from 'react-native'\n * Windows specific components need to be imported from 'react-native-windows'\n *\n */\n\n/*\n   This file is used to provide the typings for this package.\n   NOTE: Concrete classes, objects etc that actually need to be exported from the package,\n         need to also be added to index.windows.js\n*/\n\n// Importing from a copy of react-native types instead of from react-native\n// to allow custom typescript resolvers to redirect react-native to react-native-windows\n// when building bundles for the windows platform\nexport * from './rntypes/index';\nexport * from './Libraries/Components/Flyout/FlyoutProps';\nexport * from './Libraries/Components/Flyout/Flyout';\nexport * from './Libraries/Components/Glyph/Glyph';\nexport * from './Libraries/Components/Popup/PopupProps';\nexport * from './Libraries/Components/Popup/Popup';\nexport * from './Libraries/Components/Keyboard/KeyboardExt';\nexport * from './Libraries/Components/Keyboard/KeyboardExtProps';\nexport * from './Libraries/Components/View/ViewWindowsProps';\nexport * from './Libraries/Components/View/ViewWindows';\nexport * from './Libraries/AppTheme/AppTheme';\nexport * from './Libraries/AppTheme/AppThemeTypes';\n"]}
+{"version":3,"file":"typings-index.js","sourceRoot":"","sources":["src/typings-index.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;;;;;;;;;;;AAEH;;;;EAIE;AAEF,2EAA2E;AAC3E,wFAAwF;AACxF,iDAAiD;AACjD,kDAAgC;AAChC,4EAA0D;AAC1D,uEAAqD;AACrD,qEAAmD;AACnD,0EAAwD;AACxD,qEAAmD;AACnD,8EAA4D;AAC5D,mFAAiE;AACjE,+EAA6D;AAC7D,0EAAwD;AACxD,qEAAmD","sourcesContent":["/**\n * @packagedocumentation\n *\n * This package provides Windows specific components in addition to providing the core react-native primities.\n * Cross platform React-native primitives should be imported from 'react-native'\n * Windows specific components need to be imported from 'react-native-windows'\n *\n */\n\n/*\n   This file is used to provide the typings for this package.\n   NOTE: Concrete classes, objects etc that actually need to be exported from the package,\n         need to also be added to index.windows.js\n*/\n\n// Importing from a copy of react-native types instead of from react-native\n// to allow custom typescript resolvers to redirect react-native to react-native-windows\n// when building bundles for the windows platform\nexport * from './rntypes/index';\nexport * from './Libraries/Components/Flyout/FlyoutProps';\nexport * from './Libraries/Components/Flyout/Flyout';\nexport * from './Libraries/Components/Glyph/Glyph';\nexport * from './Libraries/Components/Popup/PopupProps';\nexport * from './Libraries/Components/Popup/Popup';\nexport * from './Libraries/Components/Keyboard/KeyboardExt';\nexport * from './Libraries/Components/Keyboard/KeyboardExtProps';\nexport * from './Libraries/Components/View/ViewWindowsProps';\nexport * from './Libraries/Components/View/ViewWindows';\nexport * from './Libraries/AppTheme/AppThemeTypes';\n"]}

package/Libraries/AppTheme/AppTheme.d.ts

@@ -1,13 +0,0 @@
-import { EmitterSubscription, NativeEventEmitter } from 'react-native';
-import { IHighContrastColors, IHighContrastChangedEvent } from './AppThemeTypes';
-declare class AppThemeModule extends NativeEventEmitter {
-    private _isHighContrast;
-    private _highContrastColors;
-    constructor();
-    addListener(eventName: 'highContrastChanged', listener: (nativeEvent: IHighContrastChangedEvent) => void): EmitterSubscription;
-    get isHighContrast(): boolean;
-    get currentHighContrastColors(): IHighContrastColors;
-}
-export declare type AppTheme = AppThemeModule;
-export declare const AppTheme: AppThemeModule;
-export {};

package/Libraries/AppTheme/AppTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppTheme.js","sourceRoot":"","sources":["../../src/Libraries/AppTheme/AppTheme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;AAEb,+CAIsB;AAGtB,+EAA+E;AAC/E,+EAA+E;AAC/E,sBAAsB;AACtB,MAAM,cAAc,GAAG,4BAAa,CAAC,WAAW,IAAI;IAClD,mBAAmB,EAAE,KAAK;IAC1B,yBAAyB,EAAE;QACzB,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,EAAE;QAClB,kBAAkB,EAAE,EAAE;QACtB,aAAa,EAAE,EAAE;QACjB,WAAW,EAAE,EAAE;QACf,eAAe,EAAE,EAAE;KACpB;CACF,CAAC;AAEF,MAAM,cAAe,SAAQ,iCAAkB;IAI7C;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,mBAAmB,GAAG,cAAc,CAAC,yBAAyB,CAAC;QACpE,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,mBAAmB,CAAC;QAC1D,IAAI,CAAC,WAAW,CACd,qBAAqB,EACrB,CAAC,WAAsC,EAAE,EAAE;YACzC,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC,cAAc,CAAC;YAClD,IAAI,CAAC,mBAAmB,GAAG,WAAW,CAAC,kBAAkB,CAAC;QAC5D,CAAC,CACF,CAAC;IACJ,CAAC;IAED,WAAW,CACT,SAAgC,EAChC,QAA0D;QAE1D,OAAO,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,IAAI,yBAAyB;QAC3B,OAAO,IAAI,CAAC,mBAAmB,CAAC;IAClC,CAAC;CACF;AAGY,QAAA,QAAQ,GAAG,IAAI,cAAc,EAAE,CAAC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport {\n  EmitterSubscription,\n  NativeEventEmitter,\n  NativeModules,\n} from 'react-native';\nimport {IHighContrastColors, IHighContrastChangedEvent} from './AppThemeTypes';\n\n// We previously gracefully handled importing AppTheme in the Jest environment.\n// Mock the NM until we have a coherent story for exporting our own Jest mocks,\n// or remove this API.\nconst NativeAppTheme = NativeModules.RTCAppTheme || {\n  initialHighContrast: false,\n  initialHighContrastColors: {\n    ButtonFaceColor: '',\n    ButtonTextColor: '',\n    GrayTextColor: '',\n    HighlightColor: '',\n    HighlightTextColor: '',\n    HotlightColor: '',\n    WindowColor: '',\n    WindowTextColor: '',\n  },\n};\n\nclass AppThemeModule extends NativeEventEmitter {\n  private _isHighContrast: boolean;\n  private _highContrastColors: IHighContrastColors;\n\n  constructor() {\n    super();\n\n    this._highContrastColors = NativeAppTheme.initialHighContrastColors;\n    this._isHighContrast = NativeAppTheme.initialHighContrast;\n    this.addListener(\n      'highContrastChanged',\n      (nativeEvent: IHighContrastChangedEvent) => {\n        this._isHighContrast = nativeEvent.isHighContrast;\n        this._highContrastColors = nativeEvent.highContrastColors;\n      },\n    );\n  }\n\n  addListener(\n    eventName: 'highContrastChanged',\n    listener: (nativeEvent: IHighContrastChangedEvent) => void,\n  ): EmitterSubscription {\n    return super.addListener(eventName, listener);\n  }\n\n  get isHighContrast(): boolean {\n    return this._isHighContrast;\n  }\n\n  get currentHighContrastColors(): IHighContrastColors {\n    return this._highContrastColors;\n  }\n}\n\nexport type AppTheme = AppThemeModule;\nexport const AppTheme = new AppThemeModule();\n"]}

package/Libraries/AppTheme/AppThemeTypes.js

@@ -1,8 +0,0 @@
-"use strict";
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=AppThemeTypes.js.map

package/Libraries/AppTheme/AppThemeTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppThemeTypes.js","sourceRoot":"","sources":["../../src/Libraries/AppTheme/AppThemeTypes.ts"],"names":[],"mappings":";AAAA;;;;GAIG","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n\n/**\n * Color information for high contrast\n */\nexport interface IHighContrastColors {\n  ButtonFaceColor: string;\n  ButtonTextColor: string;\n  GrayTextColor: string;\n  HighlightColor: string;\n  HighlightTextColor: string;\n  HotlightColor: string;\n  WindowColor: string;\n  WindowTextColor: string;\n}\n\nexport interface IHighContrastChangedEvent {\n  isHighContrast: boolean;\n  highContrastColors: IHighContrastColors;\n}\n"]}