React Native Windows is still in development. As of writing, its vnext branch (written in C++, instead of the current branch’s C#) is still quite a bit behind where the iOS and Android versions of React Native are at. One of the things that doesn’t come out of the box is the ability to control the initial size of the window, or to launch in fullscreen mode. This needs to be done in native code. Thankfully, it’s pretty simple.
First, you’ll want to open your React Native Windows solution in Visual Studio 2019. Once that’s finished loading, open up
pch.h and add an include for the
winrt/Windows.UI.ViewManagement header file.
... #include <winrt/Windows.UI.Xaml.h> #include <winrt/Windows.UI.ViewManagement.h> // add the above line #include <winrt/Microsoft.ReactNative.h> ...
App.cpp (you might need to expand
App.xaml to find it), here is where we can tell the app what size it should be on launch, or whether to launch in fullscreen mode.
When I’m developing, I like to be able to have the app load in a 1280×720 window, but when the app is deployed for production, I want it to load in fullscreen mode. Here’s how I accomplish that.
At the top of
App.cpp, add the namespaces for
Foundation. ViewManagement will let us set the launch mode and view size, and Foundation will let us provide the size that we want.
#include "pch.h" #include "App.h" #include "ReactPackageProvider.h" using namespace winrt::Windows::UI::ViewManagement; using namespace winrt::Windows::Foundation; ...
Next, scroll down to the
#if _DEBUG line. Here, the app launches conditionally based on whether we’re debugging or not. First, we’re going to set the
PreferredLaunchViewSize to a
Size of 1280, 720. Then, we’re going to set the
PreferredLaunchWindowingMode to the
... #if _DEBUG InstanceSettings().EnableDeveloperMenu(true); //first we set the preferred launch view size ApplicationView::PreferredLaunchViewSize(Size(1280, 720)); //then we set the preferred launch windowing mode to that size ApplicationView::PreferredLaunchWindowingMode(ApplicationViewWindowingMode::PreferredLaunchViewSize); #else InstanceSettings().EnableDeveloperMenu(false); #endif ...
If you save
App.cpp and run your app, you will see that it opens in a 1280×720 window. Next, we set the app to launch fullscreen if not in debug mode.
... #if _DEBUG InstanceSettings().EnableDeveloperMenu(true); ApplicationView::PreferredLaunchViewSize(Size(1280, 720)); ApplicationView::PreferredLaunchWindowingMode(ApplicationViewWindowingMode::PreferredLaunchViewSize); #else InstanceSettings().EnableDeveloperMenu(false); //set the preferred launch windowing mode to fullscreen ApplicationView::PreferredLaunchWindowingMode(ApplicationViewWindowingMode::FullScreen); #endif ...
App.cpp and run your app in Release mode (click the Debug dropdown next to the CPU dropdown in the toolbar, and select Release). You’ll see that your app launches in fullscreen mode! That wasn’t so difficult after all.