react-native-windows 0.74.23 → 0.74.25

package/Microsoft.ReactNative/ReactNativeAppBuilder.cpp

@@ -1,43 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 #include "pch.h"
 #include "ReactNativeAppBuilder.h"
 #include "ReactNativeAppBuilder.g.cpp"
-#include "IReactDispatcher.h"
-#include "ReactNativeHost.h"
+
 #include "ReactNativeWin32App.h"
+
+#include "winrt/Microsoft.ReactNative.h"
 #include "winrt/Microsoft.UI.Composition.h"
 #include "winrt/Microsoft.UI.Dispatching.h"
+#include "winrt/Microsoft.UI.Interop.h"
 #include "winrt/Microsoft.UI.Windowing.h"
-#include "winrt/microsoft.UI.Interop.h"
-
-// Scaling factor for the window's content based on the DPI of the display where the window is located.
-float ScaleFactor(HWND hwnd) noexcept {
-  return GetDpiForWindow(hwnd) / static_cast<float>(USER_DEFAULT_SCREEN_DPI);
-}
-
-void UpdateRootViewSizeToAppWindow(
-    winrt::Microsoft::ReactNative::ReactNativeIsland const &rootView,
-    winrt::Microsoft::UI::Windowing::AppWindow const &window) {
-  auto hwnd = winrt::Microsoft::UI::GetWindowFromWindowId(window.Id());
-  auto scaleFactor = ScaleFactor(hwnd);
-  winrt::Windows::Foundation::Size size{
-      window.ClientSize().Width / scaleFactor, window.ClientSize().Height / scaleFactor};
-  // Do not relayout when minimized
-  if (window.Presenter().as<winrt::Microsoft::UI::Windowing::OverlappedPresenter>().State() !=
-      winrt::Microsoft::UI::Windowing::OverlappedPresenterState::Minimized) {
-    winrt::Microsoft::ReactNative::LayoutConstraints constraints;
-    constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
-    constraints.MaximumSize = constraints.MinimumSize = size;
-    rootView.Arrange(constraints, {0, 0});
-  }
-}
-
-namespace winrt::ReactNative {
-using namespace winrt::Microsoft::ReactNative;
-}
-
-namespace winrt::UI {
-using namespace winrt::Microsoft::UI;
-}
 
 namespace winrt::Microsoft::ReactNative::implementation {
 ReactNativeAppBuilder::ReactNativeAppBuilder() {
@@ -46,133 +20,55 @@ ReactNativeAppBuilder::ReactNativeAppBuilder() {
 
 ReactNativeAppBuilder::~ReactNativeAppBuilder() {}
 
-winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::AddPackageProviders(
-    winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const
-        &packageProviders) {
-  for (auto const &provider : packageProviders) {
-    m_reactNativeWin32App.ReactNativeHost().PackageProviders().Append(provider);
-  }
-
-  return *this;
-}
-
-winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetReactInstanceSettings(
-    winrt::Microsoft::ReactNative::ReactInstanceSettings const &settings) {
-  m_reactNativeWin32App.ReactNativeHost().InstanceSettings(settings);
-
+winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetDispatcherQueueController(
+    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
+  m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->DispatcherQueueController(
+      dispatcherQueueController);
   return *this;
 }
 
-winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetCompositor(
+winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetCompositor(
     winrt::Microsoft::UI::Composition::Compositor const &compositor) {
   m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->Compositor(compositor);
   return *this;
 }
 
-winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetAppWindow(
+winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetAppWindow(
     winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
   m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->AppWindow(appWindow);
 
   return *this;
 }
 
-winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetReactViewOptions(
-    winrt::Microsoft::ReactNative::ReactViewOptions const &reactViewOptions) {
-  m_reactViewOptions = reactViewOptions;
+winrt::Microsoft::ReactNative::ReactNativeWin32App ReactNativeAppBuilder::Build() {
+  // Create the DispatcherQueueController if the app developer doesn't provide one
+  if (m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->DispatcherQueueController() == nullptr) {
+    assert(m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->Compositor() == nullptr);
 
-  return *this;
-}
-
-winrt::ReactNative::ReactNativeWin32App ReactNativeAppBuilder::Build() {
-  if (m_reactNativeWin32App.Compositor() == nullptr) {
-    // Create a DispatcherQueue for this thread.  This is needed for Composition, Content, and
-    // Input APIs.
+    // Create a DispatcherQueue for this thread. This is needed for Composition, Content, and Input APIs.
     auto dispatcherQueueController =
         winrt::Microsoft::UI::Dispatching::DispatcherQueueController::CreateOnCurrentThread();
 
-    m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->DispatchQueueController(
+    m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->DispatcherQueueController(
         dispatcherQueueController);
+  }
 
-    // Create the compositor on behalf of the App Developer
+  // Create the Compositor if the app developer doesn't provide one
+  if (m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->Compositor() == nullptr) {
+    // Create the compositor on behalf of the App Developer.
     auto compositor = winrt::Microsoft::UI::Composition::Compositor();
     m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->Compositor(compositor);
   }
 
-  // Create the AppWindow if the developer doesn't provide one
+  // Create the AppWindow if the app developer doesn't provide one
   if (m_reactNativeWin32App.AppWindow() == nullptr) {
     auto appWindow = winrt::Microsoft::UI::Windowing::AppWindow::Create();
-    appWindow.Title(L"SampleApplication");
+    appWindow.Title(L"ReactNativeWin32App");
     appWindow.Resize({1000, 1000});
-    appWindow.Show();
 
     m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->AppWindow(appWindow);
   }
 
-  // Currently set the property to use current thread dispatcher as a default UI dispatcher.
-  // TODO: Provision for setting dispatcher based on the thread dispatcherQueueController is created.
-  m_reactNativeWin32App.ReactNativeHost().InstanceSettings().Properties().Set(
-      ReactDispatcherHelper::UIDispatcherProperty(), ReactDispatcherHelper::UIThreadDispatcher());
-
-  auto hwnd{winrt::UI::GetWindowFromWindowId(m_reactNativeWin32App.AppWindow().Id())};
-
-  winrt::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
-      m_reactNativeWin32App.ReactNativeHost().InstanceSettings().Properties(), reinterpret_cast<uint64_t>(hwnd));
-
-  winrt::ReactNative::Composition::CompositionUIService::SetCompositor(
-      m_reactNativeWin32App.ReactNativeHost().InstanceSettings(), m_reactNativeWin32App.Compositor());
-
-  // Start the react-native instance, which will create a JavaScript runtime and load the applications bundle.
-  m_reactNativeWin32App.ReactNativeHost().ReloadInstance();
-
-  // Create a RootView which will present a react-native component
-  auto reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland(m_reactNativeWin32App.Compositor());
-  reactNativeIsland.ReactViewHost(winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(
-      m_reactNativeWin32App.ReactNativeHost(), m_reactViewOptions));
-
-  m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->ReactNativeIsland(
-      std::move(reactNativeIsland));
-
-  // Update the size of the RootView when the AppWindow changes size
-  m_reactNativeWin32App.AppWindow().Changed(
-      [wkRootView = winrt::make_weak(m_reactNativeWin32App.ReactNativeIsland())](
-          winrt::Microsoft::UI::Windowing::AppWindow const &window,
-          winrt::Microsoft::UI::Windowing::AppWindowChangedEventArgs const &args) {
-        if (args.DidSizeChange() || args.DidVisibilityChange()) {
-          if (auto rootView = wkRootView.get()) {
-            UpdateRootViewSizeToAppWindow(rootView, window);
-          }
-        }
-      });
-
-  // Quit application when main window is closed
-  m_reactNativeWin32App.AppWindow().Destroying([this](
-                                                   winrt::Microsoft::UI::Windowing::AppWindow const &window,
-                                                   winrt::Windows::Foundation::IInspectable const & /*args*/) {
-    // Before we shutdown the application - unload the ReactNativeHost to give the javascript a chance to save any
-    // state
-    auto async = m_reactNativeWin32App.ReactNativeHost().UnloadInstance();
-    async.Completed([this](auto asyncInfo, winrt::Windows::Foundation::AsyncStatus asyncStatus) {
-      assert(asyncStatus == winrt::Windows::Foundation::AsyncStatus::Completed);
-      m_reactNativeWin32App.ReactNativeHost().InstanceSettings().UIDispatcher().Post([]() { PostQuitMessage(0); });
-    });
-  });
-
-  // DesktopChildSiteBridge create a ContentSite that can host the RootView ContentIsland
-  auto desktopChildSiteBridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
-      m_reactNativeWin32App.Compositor(), m_reactNativeWin32App.AppWindow().Id());
-
-  desktopChildSiteBridge.Connect(m_reactNativeWin32App.ReactNativeIsland().Island());
-
-  desktopChildSiteBridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-
-  auto scaleFactor = ScaleFactor(hwnd);
-  m_reactNativeWin32App.ReactNativeIsland().ScaleFactor(scaleFactor);
-
-  UpdateRootViewSizeToAppWindow(reactNativeIsland, m_reactNativeWin32App.AppWindow());
-
-  m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->DesktopChildSiteBridge(
-      std::move(desktopChildSiteBridge));
-
   return m_reactNativeWin32App;
 }
 

package/Microsoft.ReactNative/ReactNativeAppBuilder.h

@@ -1,6 +1,8 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 #pragma once
+
 #include "ReactNativeAppBuilder.g.h"
-#include <winrt/Microsoft.UI.Content.h>
 
 namespace winrt::Microsoft::ReactNative::implementation {
 struct ReactNativeAppBuilder : ReactNativeAppBuilderT<ReactNativeAppBuilder> {
@@ -8,25 +10,15 @@ struct ReactNativeAppBuilder : ReactNativeAppBuilderT<ReactNativeAppBuilder> {
 
   ~ReactNativeAppBuilder();
 
-  winrt::Microsoft::ReactNative::ReactNativeAppBuilder AddPackageProviders(
-      winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const
-          &packageProviders);
-  winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetReactInstanceSettings(
-      winrt::Microsoft::ReactNative::ReactInstanceSettings const &settings);
-
-  // TODO: Currently, SetCompositor API is not exposed to the developer.
-  // Compositor depends on the DispatcherQueue created by DispatcherQueueController on a current thread
-  // or dedicated thread. So we also have to make a provision for setting DispatcherQueueController.
+  winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetDispatcherQueueController(
+      winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController);
   winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetCompositor(
       winrt::Microsoft::UI::Composition::Compositor const &compositor);
   winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetAppWindow(
       winrt::Microsoft::UI::Windowing::AppWindow const &appWindow);
-  winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetReactViewOptions(
-      winrt::Microsoft::ReactNative::ReactViewOptions const &reactViewOptions);
   winrt::Microsoft::ReactNative::ReactNativeWin32App Build();
 
  private:
-  winrt::Microsoft::ReactNative::ReactViewOptions m_reactViewOptions{};
   winrt::Microsoft::ReactNative::ReactNativeWin32App m_reactNativeWin32App{nullptr};
 };
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/ReactNativeAppBuilder.idl

@@ -9,60 +9,39 @@ import "IReactPackageProvider.idl";
 namespace Microsoft.ReactNative {
 
      [experimental]
-     DOC_STRING("ReactNativeWin32App is used to manage resources appropriately to be able to host ReactNative component in a contentIsland.")
+     DOC_STRING("ReactNativeWin32App sets up the infrastructure for the default experience of a ReactNative application filling a WinAppSDK window.")
      runtimeclass ReactNativeWin32App {
         // Properties
         Microsoft.UI.Windowing.AppWindow AppWindow {get;};
 
-        Microsoft.UI.Composition.Compositor Compositor {get;};
-
-        Microsoft.UI.Content.DesktopChildSiteBridge DesktopChildSiteBridge {get;};
-
         ReactNativeHost ReactNativeHost {get;};
 
-        ReactNativeIsland ReactNativeIsland {get;};
+        ReactViewOptions ReactViewOptions {get;};
+
+        // TODO: Hide these APIs for now until we're sure we need to expose them and can do so safely
+        // Microsoft.UI.Composition.Compositor Compositor {get;};
+        // Microsoft.UI.Content.DesktopChildSiteBridge DesktopChildSiteBridge {get;};
+        // Microsoft.UI.Dispatching DispatcherQueueController {get;};
+        // ReactNativeIsland ReactNativeIsland {get;};
 
         // Methods
         void Start();
      }
 
     [experimental]
-    DOC_STRING("This is the builder for creating ReactInstanceSettings.")
-    runtimeclass ReactInstanceSettingsBuilder
-    {
-        ReactInstanceSettingsBuilder();
-
-        // Properties
-        ReactInstanceSettings ReactInstanceSettings {get;};
-
-        // Methods
-        ReactInstanceSettingsBuilder UseDirectDebugger(Boolean state);
-
-        ReactInstanceSettingsBuilder UseDeveloperSupport(Boolean state);
-    
-        ReactInstanceSettingsBuilder BundleRootPath(String path);
-
-        ReactInstanceSettingsBuilder DebugBundlePath(String path);
-
-        ReactInstanceSettingsBuilder JavaScriptBundleFile(String file);
-
-        ReactInstanceSettingsBuilder UseFastRefresh(Boolean state);
-    }
-
-    [experimental]
-    DOC_STRING("ReactNativeAppBuilder initializes all the required infrastructure for a Win32 Fabric Application.")
+    DOC_STRING("ReactNativeAppBuilder builds a ReactNativeWin32App with the base WinAppSDK infrastructure.")
     runtimeclass ReactNativeAppBuilder
     {
         ReactNativeAppBuilder();
 
         // Methods
-        ReactNativeAppBuilder AddPackageProviders(Windows.Foundation.Collections.IVector<Microsoft.ReactNative.IReactPackageProvider> packageProviders);
-
-        ReactNativeAppBuilder SetReactInstanceSettings(ReactInstanceSettings settings);
 
         ReactNativeAppBuilder SetAppWindow(Microsoft.UI.Windowing.AppWindow appWindow);
 
-        ReactNativeAppBuilder SetReactViewOptions(Microsoft.ReactNative.ReactViewOptions reactViewOptions);
+        // TODO: Hide these APIs for now until we're sure we need to expose them and can do so safely
+        // Compositor depends on the DispatcherQueue created by DispatcherQueueController
+        // ReactNativeAppBuilder SetCompositor(Microsoft.UI.Composition.Compositor compositor);
+        // ReactNativeAppBuilder SetDispatcherQueueController(Microsoft.UI.Dispatching DispatcherQueueController);
 
         ReactNativeWin32App Build();
     }

package/Microsoft.ReactNative/ReactNativeIsland.idl

@@ -78,11 +78,12 @@ namespace Microsoft.ReactNative
   DOC_STRING("A windows composition component that hosts React Native UI elements.")
   runtimeclass ReactNativeIsland
   {
-    DOC_STRING("Creates a new instance of @ReactNativeIsland.")
+    DOC_STRING("Creates a new instance of @ReactNativeIsland. Can be implemented with a ReactViewHost or a ComponentView with reactContext")
     ReactNativeIsland();
 
 #ifdef USE_WINUI3
     ReactNativeIsland(Microsoft.UI.Composition.Compositor compositor);
+    ReactNativeIsland(Microsoft.UI.Composition.Compositor compositor, Microsoft.ReactNative.IReactContext context, Microsoft.ReactNative.ComponentView componentView);
 #endif
 
     DOC_STRING(
@@ -97,7 +98,7 @@ namespace Microsoft.ReactNative
 
     DOC_STRING("ScaleFactor for this windows (DPI/96)")
     Single ScaleFactor {get; set;};
-
+  
     Single FontSizeMultiplier { get; };
 
     DOC_STRING("Move focus to this @ReactNativeIsland")

package/Microsoft.ReactNative/ReactNativeWin32App.cpp

@@ -1,12 +1,42 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 #include "pch.h"
 #include "ReactNativeWin32App.h"
 #include "ReactNativeWin32App.g.cpp"
+
+#include "IReactDispatcher.h"
+#include "ReactCoreInjection.h"
 #include "ReactNativeHost.h"
+
 #include "winrt/Microsoft.UI.Composition.h"
 #include "winrt/Microsoft.UI.Content.h"
+#include "winrt/Microsoft.UI.Dispatching.h"
 #include "winrt/Microsoft.UI.Interop.h"
 #include "winrt/Microsoft.UI.Windowing.h"
 
+// Scaling factor for the window's content based on the DPI of the display where the window is located.
+float ScaleFactor(HWND hwnd) noexcept {
+  return GetDpiForWindow(hwnd) / static_cast<float>(USER_DEFAULT_SCREEN_DPI);
+}
+
+void UpdateRootViewSizeToAppWindow(
+    winrt::Microsoft::ReactNative::ReactNativeIsland const &rootView,
+    winrt::Microsoft::UI::Windowing::AppWindow const &window) {
+  auto hwnd = winrt::Microsoft::UI::GetWindowFromWindowId(window.Id());
+  auto scaleFactor = ScaleFactor(hwnd);
+  winrt::Windows::Foundation::Size size{
+      window.ClientSize().Width / scaleFactor, window.ClientSize().Height / scaleFactor};
+  // Do not relayout when minimized
+  if (window.Presenter().as<winrt::Microsoft::UI::Windowing::OverlappedPresenter>().State() !=
+      winrt::Microsoft::UI::Windowing::OverlappedPresenterState::Minimized) {
+    winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+    constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
+    constraints.MaximumSize = constraints.MinimumSize = size;
+    rootView.Arrange(constraints, {0, 0});
+  }
+}
+
 namespace winrt::Microsoft::ReactNative::implementation {
 ReactNativeWin32App::ReactNativeWin32App() {}
 
@@ -14,41 +44,44 @@ ReactNativeWin32App::~ReactNativeWin32App() {
   m_desktopChildSiteBridge = nullptr;
 
   // Destroy all Composition objects
-  m_compositor.Close();
-  m_compositor = nullptr;
-}
-
-void ReactNativeWin32App::AppWindow(winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
-  m_appWindow = appWindow;
+  if (m_compositor != nullptr) {
+    m_compositor.Close();
+    m_compositor = nullptr;
+  }
 }
 
 winrt::Microsoft::UI::Windowing::AppWindow ReactNativeWin32App::AppWindow() {
   return m_appWindow;
 }
 
-void ReactNativeWin32App::Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor) {
-  m_compositor = compositor;
+void ReactNativeWin32App::AppWindow(winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
+  m_appWindow = appWindow;
 }
 
 winrt::Microsoft::UI::Composition::Compositor ReactNativeWin32App::Compositor() {
   return m_compositor;
 }
 
-winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeWin32App::ReactNativeIsland() {
-  return m_reactNativeIsland;
+void ReactNativeWin32App::Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor) {
+  m_compositor = compositor;
 }
 
-void ReactNativeWin32App::ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland) {
-  m_reactNativeIsland = reactNativeIsland;
+void ReactNativeWin32App::DesktopChildSiteBridge(
+    winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge) {
+  m_desktopChildSiteBridge = desktopChildSiteBridge;
 }
 
 winrt::Microsoft::UI::Content::DesktopChildSiteBridge ReactNativeWin32App::DesktopChildSiteBridge() {
   return m_desktopChildSiteBridge;
 }
 
-void ReactNativeWin32App::DesktopChildSiteBridge(
-    winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge) {
-  m_desktopChildSiteBridge = desktopChildSiteBridge;
+winrt::Microsoft::UI::Dispatching::DispatcherQueueController ReactNativeWin32App::DispatcherQueueController() {
+  return m_dispatcherQueueController;
+}
+
+void ReactNativeWin32App::DispatcherQueueController(
+    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
+  m_dispatcherQueueController = dispatcherQueueController;
 }
 
 winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeWin32App::ReactNativeHost() {
@@ -62,12 +95,90 @@ void ReactNativeWin32App::ReactNativeHost(winrt::Microsoft::ReactNative::ReactNa
   m_host = host;
 }
 
-void ReactNativeWin32App::DispatchQueueController(
-    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
-  m_dispatcherQueueController = dispatcherQueueController;
+winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeWin32App::ReactNativeIsland() {
+  return m_reactNativeIsland;
+}
+
+void ReactNativeWin32App::ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland) {
+  m_reactNativeIsland = reactNativeIsland;
+}
+
+winrt::Microsoft::ReactNative::ReactViewOptions ReactNativeWin32App::ReactViewOptions() {
+  if (m_reactViewOptions == nullptr) {
+    m_reactViewOptions = winrt::make<winrt::Microsoft::ReactNative::implementation::ReactViewOptions>();
+  }
+  return m_reactViewOptions;
+}
+
+void ReactNativeWin32App::ReactViewOptions(winrt::Microsoft::ReactNative::ReactViewOptions const &viewOptions) {
+  m_reactViewOptions = viewOptions;
 }
 
 void ReactNativeWin32App::Start() {
+  // Show the hosting AppWindow
+  m_appWindow.Show();
+
+  // Currently set the property to use current thread dispatcher as a default UI dispatcher.
+  // TODO: Use the correct dispatcher from a developer-provided DispatcherQueueController
+  ReactNativeHost().InstanceSettings().Properties().Set(
+      ReactDispatcherHelper::UIDispatcherProperty(), ReactDispatcherHelper::UIThreadDispatcher());
+
+  auto hwnd{winrt::Microsoft::UI::GetWindowFromWindowId(m_appWindow.Id())};
+
+  winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+      ReactNativeHost().InstanceSettings().Properties(), reinterpret_cast<uint64_t>(hwnd));
+
+  winrt::Microsoft::ReactNative::Composition::CompositionUIService::SetCompositor(
+      ReactNativeHost().InstanceSettings(), m_compositor);
+
+  // Start the react-native instance, which will create a JavaScript runtime and load the applications bundle.
+  ReactNativeHost().ReloadInstance();
+
+  // Create a RootView which will present a react-native component
+  if (m_reactNativeIsland == nullptr) {
+    m_reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland(m_compositor);
+  }
+
+  m_reactNativeIsland.ReactViewHost(
+      winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(ReactNativeHost(), ReactViewOptions()));
+
+  // Update the size of the RootView when the AppWindow changes size
+  m_appWindow.Changed([wkRootView = winrt::make_weak(m_reactNativeIsland)](
+                          winrt::Microsoft::UI::Windowing::AppWindow const &window,
+                          winrt::Microsoft::UI::Windowing::AppWindowChangedEventArgs const &args) {
+    if (args.DidSizeChange() || args.DidVisibilityChange()) {
+      if (auto rootView = wkRootView.get()) {
+        UpdateRootViewSizeToAppWindow(rootView, window);
+      }
+    }
+  });
+
+  // Quit application when main window is closed
+  m_appWindow.Destroying([this](
+                             winrt::Microsoft::UI::Windowing::AppWindow const &window,
+                             winrt::Windows::Foundation::IInspectable const & /*args*/) {
+    // Before we shutdown the application - unload the ReactNativeHost to give the javascript a chance to save any
+    // state
+    auto async = ReactNativeHost().UnloadInstance();
+    async.Completed([this](auto asyncInfo, winrt::Windows::Foundation::AsyncStatus asyncStatus) {
+      assert(asyncStatus == winrt::Windows::Foundation::AsyncStatus::Completed);
+      ReactNativeHost().InstanceSettings().UIDispatcher().Post([]() { PostQuitMessage(0); });
+    });
+  });
+
+  // DesktopChildSiteBridge create a ContentSite that can host the RootView ContentIsland
+  m_desktopChildSiteBridge =
+      winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(m_compositor, m_appWindow.Id());
+
+  m_desktopChildSiteBridge.Connect(m_reactNativeIsland.Island());
+
+  m_desktopChildSiteBridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
+
+  auto scaleFactor = ScaleFactor(hwnd);
+  m_reactNativeIsland.ScaleFactor(scaleFactor);
+
+  UpdateRootViewSizeToAppWindow(m_reactNativeIsland, m_appWindow);
+
   m_desktopChildSiteBridge.Show();
 
   // Run the main application event loop

package/Microsoft.ReactNative/ReactNativeWin32App.h

@@ -1,5 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 #pragma once
+
 #include "ReactNativeWin32App.g.h"
+
 #include "winrt/Microsoft.UI.Dispatching.h"
 
 namespace winrt::Microsoft::ReactNative::implementation {
@@ -13,26 +17,31 @@ struct ReactNativeWin32App : ReactNativeWin32AppT<ReactNativeWin32App> {
   winrt::Microsoft::UI::Composition::Compositor Compositor();
   void Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor);
 
-  winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeIsland();
-  void ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland);
-
   winrt::Microsoft::UI::Content::DesktopChildSiteBridge DesktopChildSiteBridge();
   void DesktopChildSiteBridge(winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge);
 
-  void DispatchQueueController(
+  winrt::Microsoft::UI::Dispatching::DispatcherQueueController DispatcherQueueController();
+  void DispatcherQueueController(
       winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController);
 
   winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeHost();
   void ReactNativeHost(winrt::Microsoft::ReactNative::ReactNativeHost const &host);
 
+  winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeIsland();
+  void ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland);
+
+  winrt::Microsoft::ReactNative::ReactViewOptions ReactViewOptions();
+  void ReactViewOptions(winrt::Microsoft::ReactNative::ReactViewOptions const &reactViewOptions);
+
   void Start();
 
  private:
   winrt::Microsoft::UI::Windowing::AppWindow m_appWindow{nullptr};
   winrt::Microsoft::UI::Composition::Compositor m_compositor{nullptr};
+  winrt::Microsoft::UI::Content::DesktopChildSiteBridge m_desktopChildSiteBridge{nullptr};
   winrt::Microsoft::UI::Dispatching::DispatcherQueueController m_dispatcherQueueController{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeHost m_host{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeIsland m_reactNativeIsland{nullptr};
-  winrt::Microsoft::UI::Content::DesktopChildSiteBridge m_desktopChildSiteBridge{nullptr};
+  winrt::Microsoft::ReactNative::ReactViewOptions m_reactViewOptions{nullptr};
 };
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/ViewProps.idl

@@ -24,6 +24,8 @@ namespace Microsoft.ReactNative {
     Microsoft.UI.Composition.CompositionBrush AsBrush(Microsoft.ReactNative.Composition.Theme theme);
 #endif
 
+    Boolean Equals(Color color);
+
     static Color Black();
     static Color Transparent();
     static Color ReadValue(IJSValueReader reader);