React Native Windows is Microsoft’s latest attempt to merge JavaScript with its Universal Windows Platform ecosystem. Having phased out the ability to create JS UWP apps in Visual Studio 2019, Microsoft is banking on the success of Facebook’s React Native platform to do a lot of the heavy lifting of writing UWP apps in JavaScript.

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>
...

Next, open 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 ViewManagement and 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 PreferredLaunchViewSize.

...

#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

...

Save 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.