react-native-windows 0.82.3 → 0.83.0-preview.1

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h

@@ -32,36 +32,29 @@ virtual State::Shared createInitialState(
 
     ThemePadding theme;
     // TODO: figure out RTL/start/end/left/right stuff here
-    if (surfaceIdToThemePaddingMap_.find(surfaceId) !=
-        surfaceIdToThemePaddingMap_.end()) {
+    if (surfaceIdToThemePaddingMap_.find(surfaceId) != surfaceIdToThemePaddingMap_.end()) {
       theme = surfaceIdToThemePaddingMap_[surfaceId];
     } else {
-      const jni::global_ref<jobject>& fabricUIManager =
+      const jni::global_ref<jobject> &fabricUIManager =
           contextContainer_->at<jni::global_ref<jobject>>("FabricUIManager");
 
       auto env = jni::Environment::current();
       auto defaultTextInputPaddingArray = env->NewFloatArray(4);
       static auto getThemeData =
-          jni::findClassStatic(UIManagerJavaDescriptor)
-              ->getMethod<jboolean(jint, jfloatArray)>("getThemeData");
+          jni::findClassStatic(UIManagerJavaDescriptor)->getMethod<jboolean(jint, jfloatArray)>("getThemeData");
 
-      if (getThemeData(
-              fabricUIManager, surfaceId, defaultTextInputPaddingArray)) {
-        jfloat* defaultTextInputPadding =
-            env->GetFloatArrayElements(defaultTextInputPaddingArray, nullptr);
+      if (getThemeData(fabricUIManager, surfaceId, defaultTextInputPaddingArray) != 0u) {
+        jfloat *defaultTextInputPadding = env->GetFloatArrayElements(defaultTextInputPaddingArray, nullptr);
         theme.start = defaultTextInputPadding[0];
         theme.end = defaultTextInputPadding[1];
         theme.top = defaultTextInputPadding[2];
         theme.bottom = defaultTextInputPadding[3];
         surfaceIdToThemePaddingMap_.emplace(std::make_pair(surfaceId, theme));
-        env->ReleaseFloatArrayElements(
-            defaultTextInputPaddingArray, defaultTextInputPadding, JNI_ABORT);
+        env->ReleaseFloatArrayElements(defaultTextInputPaddingArray, defaultTextInputPadding, JNI_ABORT);
       }
 
     return std::make_shared<AndroidTextInputShadowNode::ConcreteState>(
-        std::make_shared<const AndroidTextInputState>(
-            AndroidTextInputState({}, {}, {}, 0)),
-        family);
+        std::make_shared<const AndroidTextInputState>(AndroidTextInputState({}, {}, {}, 0)), family);
   }
   */
 
@@ -74,43 +67,36 @@ virtual State::Shared createInitialState(
     textInputShadowNode.setTextLayoutManager(textLayoutManager_);
 
     /*
-            int surfaceId = textInputShadowNode.getSurfaceId();
-    if (surfaceIdToThemePaddingMap_.find(surfaceId) !=
-        surfaceIdToThemePaddingMap_.end()) {
-      const auto& theme = surfaceIdToThemePaddingMap_[surfaceId];
+      int surfaceId = textInputShadowNode.getSurfaceId();
+      if (surfaceIdToThemePaddingMap_.find(surfaceId) != surfaceIdToThemePaddingMap_.end()) {
+        const auto &theme = surfaceIdToThemePaddingMap_[surfaceId];
 
-      auto& textInputProps = textInputShadowNode.getConcreteProps();
+      auto &textInputProps = textInputShadowNode.getConcreteProps();
 
       // Override padding
       // Node is still unsealed during adoption, before layout is complete
       // TODO: T62959168 account for RTL and paddingLeft when setting default
       // paddingStart, and vice-versa with paddingRight/paddingEnd.
       // For now this assumes no RTL.
-      auto& style = const_cast<yoga::Style&>(textInputProps.yogaStyle);
+      auto &style = const_cast<yoga::Style &>(textInputProps.yogaStyle);
       bool changedPadding = false;
-      if (!textInputProps.hasPadding && !textInputProps.hasPaddingStart &&
-          !textInputProps.hasPaddingLeft &&
+      if (!textInputProps.hasPadding && !textInputProps.hasPaddingStart && !textInputProps.hasPaddingLeft &&
           !textInputProps.hasPaddingHorizontal) {
         changedPadding = true;
-        style.setPadding(
-            yoga::Edge::Start, yoga::StyleLength::points(theme.start));
+        style.setPadding(yoga::Edge::Start, yoga::StyleLength::points(theme.start));
       }
-      if (!textInputProps.hasPadding && !textInputProps.hasPaddingEnd &&
-          !textInputProps.hasPaddingRight &&
+      if (!textInputProps.hasPadding && !textInputProps.hasPaddingEnd && !textInputProps.hasPaddingRight &&
           !textInputProps.hasPaddingHorizontal) {
         changedPadding = true;
         style.setPadding(yoga::Edge::End, yoga::StyleLength::points(theme.end));
       }
-      if (!textInputProps.hasPadding && !textInputProps.hasPaddingTop &&
-          !textInputProps.hasPaddingVertical) {
+      if (!textInputProps.hasPadding && !textInputProps.hasPaddingTop && !textInputProps.hasPaddingVertical) {
         changedPadding = true;
         style.setPadding(yoga::Edge::Top, yoga::StyleLength::points(theme.top));
       }
-      if (!textInputProps.hasPadding && !textInputProps.hasPaddingBottom &&
-          !textInputProps.hasPaddingVertical) {
+      if (!textInputProps.hasPadding && !textInputProps.hasPaddingBottom && !textInputProps.hasPaddingVertical) {
         changedPadding = true;
-        style.setPadding(
-            yoga::Edge::Bottom, yoga::StyleLength::points(theme.bottom));
+        style.setPadding(yoga::Edge::Bottom, yoga::StyleLength::points(theme.bottom));
       }
 
       // If the TextInput initially does not have paddingLeft or paddingStart, a
@@ -118,13 +104,11 @@ virtual State::Shared createInitialState(
       // paddingLeft update, we must explicitly unset paddingStart... (same with
       // paddingEnd)
       // TODO: support RTL
-      if ((textInputProps.hasPadding || textInputProps.hasPaddingLeft ||
-           textInputProps.hasPaddingHorizontal) &&
+      if ((textInputProps.hasPadding || textInputProps.hasPaddingLeft || textInputProps.hasPaddingHorizontal) &&
           !textInputProps.hasPaddingStart) {
         style.setPadding(yoga::Edge::Start, yoga::StyleLength::undefined());
       }
-      if ((textInputProps.hasPadding || textInputProps.hasPaddingRight ||
-           textInputProps.hasPaddingHorizontal) &&
+      if ((textInputProps.hasPadding || textInputProps.hasPaddingRight || textInputProps.hasPaddingHorizontal) &&
           !textInputProps.hasPaddingEnd) {
         style.setPadding(yoga::Edge::End, yoga::StyleLength::undefined());
       }

package/Microsoft.ReactNative/Fabric/Composition/UriImageManager.cpp

@@ -104,6 +104,11 @@ struct SvgDataImageHandler
             ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingBrush, 1.0, &pt);
             auto renderTarget = autoDraw.GetRenderTarget();
 
+            // Defensive check: ensure device context is valid before D2D operations
+            if (!renderTarget) {
+              return nullptr;
+            }
+
             winrt::com_ptr<ID2D1DeviceContext5> deviceContext5;
             winrt::check_hresult(renderTarget->QueryInterface(IID_ID2D1DeviceContext5, deviceContext5.put_void()));
 

package/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl

@@ -21,6 +21,7 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   delegate void ComponentIslandComponentViewInitializer(ContentIslandComponentView view);
 
+
   [webhosthidden]
   [experimental]
   delegate void PortalComponentViewInitializer(PortalComponentView view);

package/Microsoft.ReactNative/Modules/ImageViewManagerModule.cpp

@@ -157,4 +157,4 @@ void ImageLoader::queryCache(
   result.Resolve(React::JSValueObject{});
 }
 
-} // namespace Microsoft::ReactNative
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/LogBoxModule.cpp

@@ -11,19 +11,18 @@
 
 #include <Fabric/Composition/CompositionContextHelper.h>
 #include <Fabric/Composition/CompositionUIService.h>
+#include <winrt/Microsoft.UI.Windowing.h>
 #include <winrt/Windows.UI.Composition.h>
 
 namespace Microsoft::ReactNative {
 
 LogBox::~LogBox() {
-  if (m_hwnd) {
-    m_context.UIDispatcher().Post([hwnd = m_hwnd]() { DestroyWindow(hwnd); });
-    m_hwnd = nullptr;
+  if (m_rnWindow) {
+    m_context.UIDispatcher().Post([rnWindow = m_rnWindow]() { rnWindow.Close(); });
+    m_rnWindow = nullptr;
   }
 }
 
-constexpr PCWSTR c_logBoxWindowClassName = L"MS_REACTNATIVE_LOGBOX";
-constexpr auto CompHostProperty = L"CompHost";
 const int LOGBOX_DEFAULT_WIDTH = 700;
 const int LOGBOX_DEFAULT_HEIGHT = 1000;
 
@@ -47,108 +46,35 @@ void LogBox::Hide() noexcept {
   });
 }
 
-LRESULT CALLBACK LogBoxWndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam) noexcept {
-  auto data = reinterpret_cast<::IUnknown *>(GetProp(hwnd, CompHostProperty));
-  winrt::com_ptr<winrt::IUnknown> spunk;
-  React::CompositionHwndHost host{nullptr};
-
-  if (data) {
-    winrt::check_hresult(data->QueryInterface(winrt::guid_of<React::CompositionHwndHost>(), winrt::put_abi(host)));
-    auto result = static_cast<LRESULT>(host.TranslateMessage(message, wparam, lparam));
-    if (result)
-      return result;
-  }
-
-  switch (message) {
-    case WM_NCCREATE: {
-      auto cs = reinterpret_cast<CREATESTRUCT *>(lparam);
-      auto windowData = static_cast<::IUnknown *>(cs->lpCreateParams);
-      SetProp(hwnd, CompHostProperty, reinterpret_cast<::IUnknown *>(windowData));
-      break;
-    }
-    case WM_CREATE: {
-      host.Initialize((uint64_t)hwnd);
-      break;
-    }
-    case WM_CLOSE: {
-      // Just hide the window instead of destroying it
-      ::ShowWindow(hwnd, SW_HIDE);
-      return 0;
-    }
-    case WM_DESTROY: {
-      data->Release();
-      SetProp(hwnd, CompHostProperty, nullptr);
-    }
-  }
-
-  return DefWindowProc(hwnd, message, wparam, lparam);
-}
-
-void LogBox::RegisterWndClass() noexcept {
-  static bool registered = false;
-  if (registered)
-    return;
-
-  HINSTANCE hInstance = GetModuleHandle(NULL);
-
-  WNDCLASSEXW wcex = {};
-  wcex.cbSize = sizeof(WNDCLASSEX);
-  wcex.style = CS_HREDRAW | CS_VREDRAW;
-  wcex.lpfnWndProc = &LogBoxWndProc;
-  wcex.cbClsExtra = DLGWINDOWEXTRA;
-  wcex.cbWndExtra = sizeof(winrt::impl::abi<winrt::Microsoft::ReactNative::ICompositionHwndHost>::type *);
-  wcex.hInstance = hInstance;
-  wcex.hCursor = LoadCursor(nullptr, IDC_ARROW);
-  wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
-  wcex.lpszClassName = c_logBoxWindowClassName;
-  ATOM classId = RegisterClassEx(&wcex);
-  WINRT_VERIFY(classId);
-  winrt::check_win32(!classId);
-
-  registered = true;
-}
-
 void LogBox::ShowOnUIThread() noexcept {
   auto host = React::implementation::ReactNativeHost::GetReactNativeHost(m_context.Properties());
   if (!host)
     return;
 
-  RegisterWndClass();
-
-  if (!m_hwnd) {
-    auto CompositionHwndHost = React::CompositionHwndHost();
+  if (!m_rnWindow) {
+    m_rnWindow = winrt::Microsoft::ReactNative::ReactNativeWindow::CreateFromCompositor(
+        winrt::Microsoft::ReactNative::Composition::CompositionUIService::GetCompositor(
+            host.InstanceSettings().Properties()));
     winrt::Microsoft::ReactNative::ReactViewOptions viewOptions;
     viewOptions.ComponentName(L"LogBox");
-    CompositionHwndHost.ReactViewHost(
+    m_rnWindow.AppWindow().Title(L"LogBox");
+    m_rnWindow.AppWindow().Closing([](winrt::Microsoft::UI::Windowing::AppWindow const & /*appWindow*/,
+                                      winrt::Microsoft::UI::Windowing::AppWindowClosingEventArgs const &args) {
+      // Prevent default close behavior - as JS will never try to show the logbox again if it isn't hidden through JS
+      args.Cancel(true);
+    });
+    m_rnWindow.ReactNativeIsland().ReactViewHost(
         winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(host, viewOptions));
-    HINSTANCE hInstance = GetModuleHandle(NULL);
-    winrt::impl::abi<winrt::Microsoft::ReactNative::ICompositionHwndHost>::type *pHost{nullptr};
-    winrt::com_ptr<::IUnknown> spunk;
-    CompositionHwndHost.as(spunk);
-    spunk->AddRef(); // Will be stored in windowData
-
-    m_hwnd = CreateWindow(
-        c_logBoxWindowClassName,
-        L"React-Native LogBox",
-        WS_OVERLAPPEDWINDOW,
-        CW_USEDEFAULT,
-        CW_USEDEFAULT,
-        LOGBOX_DEFAULT_WIDTH,
-        LOGBOX_DEFAULT_HEIGHT,
-        nullptr,
-        nullptr,
-        hInstance,
-        spunk.get());
+    m_rnWindow.AppWindow().ResizeClient({LOGBOX_DEFAULT_WIDTH, LOGBOX_DEFAULT_HEIGHT});
   }
 
-  ShowWindow(m_hwnd, SW_NORMAL);
-  BringWindowToTop(m_hwnd);
-  SetFocus(m_hwnd);
+  m_rnWindow.AppWindow().Show(true);
+  m_rnWindow.AppWindow().MoveInZOrderAtTop();
 }
 
 void LogBox::HideOnUIThread() noexcept {
-  if (m_hwnd) {
-    ::ShowWindow(m_hwnd, SW_HIDE);
+  if (m_rnWindow) {
+    m_rnWindow.AppWindow().Hide();
   }
 }
 

package/Microsoft.ReactNative/Modules/LogBoxModule.h

@@ -28,9 +28,7 @@ struct LogBox : public std::enable_shared_from_this<LogBox> {
   void HideOnUIThread() noexcept;
 
   winrt::Microsoft::ReactNative::ReactContext m_context;
-  HWND m_hwnd{nullptr};
-  xaml::FrameworkElement::SizeChanged_revoker m_sizeChangedRevoker;
-  winrt::event_token m_tokenClosed;
+  winrt::Microsoft::ReactNative::ReactNativeWindow m_rnWindow{nullptr};
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/ReactNativeAppBuilder.cpp

@@ -20,19 +20,6 @@ ReactNativeAppBuilder::ReactNativeAppBuilder() {
 
 ReactNativeAppBuilder::~ReactNativeAppBuilder() {}
 
-winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetDispatcherQueueController(
-    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
-  m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->DispatcherQueueController(
-      dispatcherQueueController);
-  return *this;
-}
-
-winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetCompositor(
-    winrt::Microsoft::UI::Composition::Compositor const &compositor) {
-  m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->Compositor(compositor);
-  return *this;
-}
-
 winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetAppWindow(
     winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
   m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->AppWindow(appWindow);
@@ -41,34 +28,6 @@ winrt::Microsoft::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetA
 }
 
 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);
-
-    // 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()->DispatcherQueueController(
-        dispatcherQueueController);
-  }
-
-  // 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 app developer doesn't provide one
-  if (m_reactNativeWin32App.AppWindow() == nullptr) {
-    auto appWindow = winrt::Microsoft::UI::Windowing::AppWindow::Create();
-    appWindow.Title(L"ReactNativeWin32App");
-    appWindow.Resize({1000, 1000});
-
-    m_reactNativeWin32App.as<implementation::ReactNativeWin32App>().get()->AppWindow(appWindow);
-  }
-
   return m_reactNativeWin32App;
 }
 

package/Microsoft.ReactNative/ReactNativeAppBuilder.idl

@@ -18,12 +18,6 @@ namespace Microsoft.ReactNative {
 
         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();
      }
@@ -38,11 +32,6 @@ namespace Microsoft.ReactNative {
 
         ReactNativeAppBuilder SetAppWindow(Microsoft.UI.Windowing.AppWindow appWindow);
 
-        // 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

@@ -80,9 +80,6 @@ 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. Can be implemented with a ReactViewHost or a ComponentView with reactContext")
-    ReactNativeIsland();
-
     ReactNativeIsland(Microsoft.UI.Composition.Compositor compositor);
 
     DOC_STRING("Used to create react portals, such as a native modal component.")
@@ -98,6 +95,8 @@ namespace Microsoft.ReactNative
 
     Windows.Foundation.Size Size { get; };
 
+    Microsoft.UI.Composition.Compositor Compositor { get; };
+
     DOC_STRING("ScaleFactor for this windows (DPI/96)")
     Single ScaleFactor {get; set;};
   

package/Microsoft.ReactNative/ReactNativeWin32App.cpp

@@ -15,34 +15,10 @@
 #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() {}
 
 ReactNativeWin32App::~ReactNativeWin32App() {
-  m_desktopChildSiteBridge = nullptr;
-
   // Destroy all Composition objects
   if (m_compositor != nullptr) {
     m_compositor.Close();
@@ -51,7 +27,7 @@ ReactNativeWin32App::~ReactNativeWin32App() {
 }
 
 winrt::Microsoft::UI::Windowing::AppWindow ReactNativeWin32App::AppWindow() {
-  return m_appWindow;
+  return ReactNativeWindow().AppWindow();
 }
 
 void ReactNativeWin32App::AppWindow(winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
@@ -59,29 +35,19 @@ void ReactNativeWin32App::AppWindow(winrt::Microsoft::UI::Windowing::AppWindow c
 }
 
 winrt::Microsoft::UI::Composition::Compositor ReactNativeWin32App::Compositor() {
-  return m_compositor;
-}
-
-void ReactNativeWin32App::Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor) {
-  m_compositor = compositor;
-}
-
-void ReactNativeWin32App::DesktopChildSiteBridge(
-    winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge) {
-  m_desktopChildSiteBridge = desktopChildSiteBridge;
-}
-
-winrt::Microsoft::UI::Content::DesktopChildSiteBridge ReactNativeWin32App::DesktopChildSiteBridge() {
-  return m_desktopChildSiteBridge;
-}
+  if (m_compositor == nullptr) {
+    // Create a DispatcherQueue for this thread. This is needed for Composition, Content, and Input APIs.
+    m_dispatcherQueueController = winrt::Microsoft::UI::Dispatching::DispatcherQueueController::CreateOnCurrentThread();
 
-winrt::Microsoft::UI::Dispatching::DispatcherQueueController ReactNativeWin32App::DispatcherQueueController() {
-  return m_dispatcherQueueController;
-}
+    // Currently set the property to use current thread dispatcher as a default UI dispatcher.
+    ReactNativeHost().InstanceSettings().Properties().Set(
+        ReactDispatcherHelper::UIDispatcherProperty(), ReactDispatcherHelper::UIThreadDispatcher());
 
-void ReactNativeWin32App::DispatcherQueueController(
-    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
-  m_dispatcherQueueController = dispatcherQueueController;
+    m_compositor = winrt::Microsoft::UI::Composition::Compositor();
+    winrt::Microsoft::ReactNative::Composition::CompositionUIService::SetCompositor(
+        ReactNativeHost().InstanceSettings(), m_compositor);
+  }
+  return m_compositor;
 }
 
 winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeWin32App::ReactNativeHost() {
@@ -91,18 +57,6 @@ winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeWin32App::ReactNativeH
   return m_host;
 }
 
-void ReactNativeWin32App::ReactNativeHost(winrt::Microsoft::ReactNative::ReactNativeHost const &host) {
-  m_host = host;
-}
-
-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>();
@@ -114,45 +68,36 @@ void ReactNativeWin32App::ReactViewOptions(winrt::Microsoft::ReactNative::ReactV
   m_reactViewOptions = viewOptions;
 }
 
+winrt::Microsoft::ReactNative::ReactNativeWindow ReactNativeWin32App::ReactNativeWindow() noexcept {
+  if (!m_rnWindow) {
+    if (m_appWindow) {
+      m_rnWindow = winrt::Microsoft::ReactNative::ReactNativeWindow::CreateFromWindow(m_appWindow, Compositor());
+    } else {
+      m_rnWindow = winrt::Microsoft::ReactNative::ReactNativeWindow::CreateFromCompositor(Compositor());
+      m_appWindow = m_rnWindow.AppWindow();
+      m_appWindow.Title(L"ReactNativeWin32App");
+      m_appWindow.Resize({1000, 1000});
+    }
+  }
+
+  return m_rnWindow;
+}
+
 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());
+  AppWindow().Show();
 
   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(
+  m_rnWindow.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,
@@ -166,28 +111,13 @@ void ReactNativeWin32App::Start() {
     });
   });
 
-  // 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
   m_dispatcherQueueController.DispatcherQueue().RunEventLoop();
 
+  m_appWindow.Destroy();
+
   // Rundown the DispatcherQueue. This drains the queue and raises events to let components
   // know the message loop has finished.
   m_dispatcherQueueController.ShutdownQueue();
-
-  m_desktopChildSiteBridge.Close();
 }
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/ReactNativeWin32App.h

@@ -15,20 +15,10 @@ struct ReactNativeWin32App : ReactNativeWin32AppT<ReactNativeWin32App> {
   winrt::Microsoft::UI::Windowing::AppWindow AppWindow();
 
   winrt::Microsoft::UI::Composition::Compositor Compositor();
-  void Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor);
-
-  winrt::Microsoft::UI::Content::DesktopChildSiteBridge DesktopChildSiteBridge();
-  void DesktopChildSiteBridge(winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge);
-
-  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::ReactNativeWindow ReactNativeWindow() noexcept;
 
   winrt::Microsoft::ReactNative::ReactViewOptions ReactViewOptions();
   void ReactViewOptions(winrt::Microsoft::ReactNative::ReactViewOptions const &reactViewOptions);
@@ -36,12 +26,11 @@ struct ReactNativeWin32App : ReactNativeWin32AppT<ReactNativeWin32App> {
   void Start();
 
  private:
+  winrt::Microsoft::ReactNative::ReactNativeWindow m_rnWindow{nullptr};
   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::ReactNative::ReactViewOptions m_reactViewOptions{nullptr};
 };
 } // namespace winrt::Microsoft::ReactNative::implementation