ReactApplication should not impose a ReactRootView

change/react-native-windows-2020-05-19-03-08-41-reactApplication.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "set up react application to use an app's reactrootview",
+  "packageName": "react-native-windows",
+  "email": "asklar@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-05-19T10:08:41.333Z"
+}

packages/E2ETest/run_wdio.js

@@ -117,6 +117,7 @@ function parseLogs() {
 }
 
 function printFailedTests(ft) {
+  console.log('Failed test cases: ');
   for (const key in ft) {
     console.log(chalk.redBright(key));
     console.log(
@@ -133,8 +134,9 @@ function printFailedTests(ft) {
 function doProcess(code) {
   const failedTests = parseLogs();
   for (const failedTest of failedTests) {
-    console.log('Failed tests: ');
-    printFailedTests(failedTest);
+    if (Object.keys(failedTest).length > 0) {
+      printFailedTests(failedTest);
+    }
   }
   process.exit(code);
 }

packages/E2ETest/windows/ReactUWPTestApp/App.xaml.cs

@@ -9,6 +9,8 @@
 using Windows.UI.Core;
 using Windows.UI.ViewManagement;
 using Microsoft.ReactNative.Managed;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
 
 namespace ReactUWPTestApp
 {
@@ -23,8 +25,6 @@ sealed partial class App : ReactApplication
         /// </summary>
         public App()
         {
-            MainComponentName = "ReactUWPTestApp";
-
 #if BUNDLE
             JavaScriptBundleFile = "index.windows";
             InstanceSettings.UseWebDebugger = false;
@@ -56,12 +56,17 @@ public App()
         protected override void OnLaunched(LaunchActivatedEventArgs e)
         {
             base.OnLaunched(e);
-            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
-            ApplicationView.GetForCurrentView().TryResizeView(new Size(800, 600));
-            if (DisplayInformation.GetForCurrentView().ResolutionScale != ResolutionScale.Scale100Percent)
+            var frame = Window.Current.Content as Frame;
+            if (frame == null)
             {
-                throw new Exception("A bug requires this app to run at 100% for accurate results - See https://github.com/microsoft/react-native-windows/issues/4619");
+                frame = new Frame();
+                Window.Current.Content = frame;
             }
+            frame.Navigate(typeof(MainPage));
+            Window.Current.Activate();
+
+            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
+            ApplicationView.GetForCurrentView().TryResizeView(new Size(800, 600));
         }
     }
 }

packages/E2ETest/windows/ReactUWPTestApp/MainPage.xaml

@@ -0,0 +1,13 @@
+<Page
+    x:Class="ReactUWPTestApp.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:ReactUWPTestApp"
+    xmlns:react="using:Microsoft.ReactNative"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <react:ReactRootView x:Name="myRootView" ComponentName="ReactUWPTestApp"
+        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="500"/>
+</Page>

packages/E2ETest/windows/ReactUWPTestApp/MainPage.xaml.cs

@@ -0,0 +1,20 @@
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace ReactUWPTestApp
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class MainPage : Page
+    {
+        public MainPage()
+        {
+            this.InitializeComponent();
+            var app = Application.Current as App;
+            myRootView.ReactNativeHost = app.Host;
+        }
+    }
+}

packages/E2ETest/windows/ReactUWPTestApp/ReactUWPTestApp.csproj

@@ -124,6 +124,9 @@
     <Compile Include="App.xaml.cs">
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
+    <Compile Include="MainPage.xaml.cs">
+      <DependentUpon>MainPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="ReactPackageProvider.cs" />
     <Compile Include="TreeDumpControlViewManager.cs" />
@@ -175,6 +178,12 @@
       <Name>Microsoft.ReactNative.Managed</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Page Include="MainPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '16.0' ">
     <VisualStudioVersion>16.0</VisualStudioVersion>
   </PropertyGroup>

packages/E2ETest/windows/ReactUWPTestApp/TreeDumpControlViewManager.cs

@@ -32,11 +32,12 @@ public FrameworkElement CreateView()
             m_textBlock.IsTextSelectionEnabled = false;
             m_textBlock.LayoutUpdated += (source, e) =>
             {
+                ApplicationView.GetForCurrentView().TryResizeView(new Size(800, 600));
                 var bounds = ApplicationView.GetForCurrentView().VisibleBounds;
                 if (bounds.Width != 800 || bounds.Height != 600)
                 {
                     // Dump disabled when window size is not 800x600!
-                    UpdateResult(false /*matchDump*/ , "Window has been resized, dump comparison is only valid at default launch size: 800x600!, current size:" + bounds.ToString());
+                    UpdateResult(false /*matchDump*/ , $"Window has been resized, dump comparison is only valid at default launch size: 800x600!, current size: {bounds.Width}x{bounds.Height}");
                 }
                 else
                 {

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/App.cpp

@@ -17,8 +17,6 @@ namespace winrt::SampleAppCpp::implementation {
 /// WinMain().
 /// </summary>
 App::App() noexcept {
-  MainComponentName(L"SampleApp");
-
 #if BUNDLE
   JavaScriptBundleFile(L"index.windows");
   InstanceSettings().UseWebDebugger(false);

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/MainPage.cpp

@@ -0,0 +1,19 @@
+#include "pch.h"
+#include "MainPage.h"
+#if __has_include("MainPage.g.cpp")
+#include "MainPage.g.cpp"
+#endif
+
+#include <App.h>
+#include <winrt/Microsoft.ReactNative.h>
+
+using namespace winrt;
+using namespace Windows::UI::Xaml;
+
+namespace winrt::SampleAppCpp::implementation {
+MainPage::MainPage() {
+  InitializeComponent();
+  ReactRootView().ReactNativeHost(Application::Current().as<App>()->Host());
+}
+
+} // namespace winrt::SampleAppCpp::implementation

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/MainPage.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include "MainPage.g.h"
+
+namespace winrt::SampleAppCpp::implementation {
+struct MainPage : MainPageT<MainPage> {
+  MainPage();
+};
+} // namespace winrt::SampleAppCpp::implementation
+
+namespace winrt::SampleAppCpp::factory_implementation {
+struct MainPage : MainPageT<MainPage, implementation::MainPage> {};
+} // namespace winrt::SampleAppCpp::factory_implementation

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/MainPage.idl

@@ -0,0 +1,8 @@
+namespace SampleAppCpp
+{
+    [default_interface]
+    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
+    {
+        MainPage();
+    }
+}

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/MainPage.xaml

@@ -0,0 +1,12 @@
+<Page
+    x:Class="SampleAppCpp.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:SampleAppCpp"
+    xmlns:react="using:Microsoft.ReactNative"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <react:ReactRootView x:Name="ReactRootView" ComponentName="SampleApp" />
+</Page>

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/SampleAppCpp.vcxproj

@@ -130,6 +130,10 @@
   </ItemDefinitionGroup>
   <ItemGroup>
     <ClInclude Include="DebugConsole.h" />
+    <ClInclude Include="MainPage.h">
+      <DependentUpon>MainPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="ReactPackageProvider.h" />
     <ClInclude Include="pch.h" />
     <ClInclude Include="App.h">
@@ -157,6 +161,10 @@
     <Image Include="Assets\Wide310x150Logo.scale-200.png" />
   </ItemGroup>
   <ItemGroup>
+    <ClCompile Include="MainPage.cpp">
+      <DependentUpon>MainPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="ReactPackageProvider.cpp" />
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader>Create</PrecompiledHeader>
@@ -170,6 +178,10 @@
     <Midl Include="App.idl">
       <DependentUpon>App.xaml</DependentUpon>
     </Midl>
+    <Midl Include="MainPage.idl">
+      <DependentUpon>MainPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
   </ItemGroup>
   <ItemGroup>
     <None Include="PropertySheet.props" />
@@ -191,6 +203,11 @@
       <Project>{c0a6bd9c-3ee5-4b12-8ce4-cee95178539c}</Project>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Page Include="MainPage.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+  </ItemGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
   <ImportGroup Label="ExtensionTargets">
     <Import Project="..\packages\Microsoft.UI.Xaml.2.3.191129002\build\native\Microsoft.UI.Xaml.targets" Condition="Exists('..\packages\Microsoft.UI.Xaml.2.3.191129002\build\native\Microsoft.UI.Xaml.targets')" />

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/SampleAppCpp.vcxproj.filters

@@ -59,4 +59,7 @@
   <ItemGroup>
     <Natvis Include="$(ReactNativeWindowsDir)\Folly\Folly.natvis" />
   </ItemGroup>
+  <ItemGroup>
+    <Page Include="MainPage.xaml" />
+  </ItemGroup>
 </Project>

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/packages.config

@@ -2,4 +2,4 @@
 <packages>
   <package id="Microsoft.UI.Xaml" version="2.3.191129002" targetFramework="native" />
   <package id="Microsoft.Windows.CppWinRT" version="2.0.200316.3" targetFramework="native" />
-</packages>
+</packages>

packages/microsoft-reactnative-sampleapps/windows/SampleAppCS/App.xaml.cs

@@ -3,6 +3,9 @@
 
 using Microsoft.ReactNative;
 using Microsoft.ReactNative.Managed;
+using Windows.ApplicationModel.Activation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
 
 namespace SampleAppCS
 {
@@ -19,7 +22,6 @@ sealed partial class App : ReactApplication
         /// </summary>
         public App()
         {
-            MainComponentName = "SampleApp";
 
 #if BUNDLE
             JavaScriptBundleFile = "index.windows";
@@ -47,5 +49,13 @@ public App()
 
             InitializeComponent();
         }
+
+        protected override void OnLaunched(LaunchActivatedEventArgs e)
+        {
+            base.OnLaunched(e);
+            var frame = Window.Current.Content as Frame;
+            frame.Navigate(typeof(MainPage));
+            Window.Current.Activate();
+        }
     }
 }

packages/microsoft-reactnative-sampleapps/windows/SampleAppCS/MainPage.xaml

@@ -0,0 +1,13 @@
+<Page
+    x:Class="SampleAppCS.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:SampleAppCS"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    xmlns:react="using:Microsoft.ReactNative"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <react:ReactRootView x:Name="ReactRootView" ComponentName="SampleApp"/>
+</Page>

packages/microsoft-reactnative-sampleapps/windows/SampleAppCS/MainPage.xaml.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace SampleAppCS
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class MainPage : Page
+    {
+        public MainPage()
+        {
+            this.InitializeComponent();
+            ReactRootView.ReactNativeHost = (Application.Current as App).Host;
+        }
+    }
+}

packages/microsoft-reactnative-sampleapps/windows/SampleAppCS/SampleAppCS.csproj

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="16.0" DefaultTargets="Build" 
-  xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+<Project ToolsVersion="16.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
     <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@@ -126,6 +125,9 @@
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
     <Compile Include="DebugConsole.cs" />
+    <Compile Include="MainPage.xaml.cs">
+      <DependentUpon>MainPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
@@ -172,6 +174,12 @@
       <Name>SampleLibraryCS</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Page Include="MainPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '16.0' ">
     <VisualStudioVersion>16.0</VisualStudioVersion>
   </PropertyGroup>

packages/playground/windows/playground-win32/Playground-Win32.cpp

@@ -129,7 +129,7 @@ struct WindowData {
 
           auto host = Host();
           host.InstanceSettings().JavaScriptBundleFile(m_bundleFile);
-          host.InstanceSettings().MainComponentName(appName);
+
           host.InstanceSettings().UseWebDebugger(m_useWebDebugger);
           host.InstanceSettings().UseDirectDebugger(m_useDirectDebugger);
           host.InstanceSettings().BundleRootPath(
@@ -146,7 +146,7 @@ struct WindowData {
           host.ReloadInstance();
 
           m_reactRootView = winrt::Microsoft::ReactNative::ReactRootView();
-          m_reactRootView.ComponentName(host.InstanceSettings().MainComponentName());
+          m_reactRootView.ComponentName(appName);
           m_reactRootView.ReactNativeHost(host);
 
           // Retrieve ABI pointer from C++/CX pointer