How do I embed react-native-windows into an existing UWP application?

[AlyElhaddad]

I currently have an existing C# UWP project. I also have a few components already implemented in react native that I would like to utilize in my UWP app.

How do I do this without having to replace my App class's base to ReactApplication, just like Android with the instance manager...

This is probably related to: Integration with existing uwp applications.

[chrisglein]

It's certainly possible, but there isn't a straightforward sample that exists today.
There was an old one you can find here: https://github.com/microsoft/react-native-windows-samples/tree/main/samples
And then there's the playground app.
Any of those helpful?

You can also open a sample request on the repo: https://github.com/microsoft/react-native-windows-samples/issues/new/choose

[AlyElhaddad]

@chrisglein thanks for your answer but unfortunately, none of these samples addressed this scenario (existing UWP app and existing RN app) and were therefore not helpful. However, I managed to make my way through. It really is not straightforward so I'll write down the steps here soon should anybody need it.

[chrisglein]

Sorry those weren't helpful :(
Glad you were able to make it through. Absolutely if you can share what you did that'd be useful.

[hunainhumail-purevpn]

I am also doing the same @AlyElhaddad @chrisglein but my case is I want to call ReactNative Javascript function on Native Xaml Button OnClick. I am trying to use EmitJSEvent from ReactContext.. But I am getting React context null.

How to get ReactContext

I am using this _reactContext.EmitJSEvent("RCTDeviceEventEmitter", "myJavscriptFunction", WriteOnXamlButtonClickArgs);

I am getting null in reactContext. How to get it? I was able to get ReactContext in Android like this:

ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();

But there is no InstanceManager.getReactContext in Windows.. How to implement?

[AlyElhaddad]

Sorry it turns out I've written it but forgot to post it that long. Here's what I did, @chrisglein
@hunainhumail-purevpn FYI

Approach

The original scenario, where we have an existing react-native application, and we would like to create a UWP app for it, we would usually use npx react-native-windows-init, or npx react-native-windows-init --language cs to generate the project in C# instead of C++ (more about react-native-windows-init). This will create a windows directory under the root directory of the react native project. We would then need to auto-link the project (more about auto-linking). This, however, could be done automatically by running the recently-created project using npx react-native run-windows. The UWP project generated by react native contains certain characteristics. It has several flags in the csproj (or vcxproj for C++) that tell MSBuild to do certain things during the build (MSBuild is the tool used to build C# projects, and certain types of C++ projects). It can also happen that multiple react native 3rd-party packages may have certain dependencies, or certain instructions to MSBuild. Therefore it’s essential that the auto-link process succeeds, because it links everything together and generates code in the main UWP project to work its magic. That, however, applies only to the original scenario. Our solution is more or less about the same thing. It revolves around four main axes:

1. To mimic the characteristics of the UWP project generated by react native, but in our actual existing project.
2. To do what is necessary to ensure the success of the auto-link process.
3. Connecting the dots and writing missing code.
4. [optionally but covered in this document] Having our UWP project code-base outside of the root directory of the react native project.

Throughout the following steps, I’ll assume that:

• Visual Studio (for Windows) is the IDE used with the UWP project.
• Yarn is the node package manager we use for react native.
• Visual Studio Code is the IDE used with the react native project.
• Windows Powershell is the terminal used for our CLI commands.

What to do

The steps mentioned here will assume that we would like to have our UWP project code-base outside of the root directory of the react native project.

1. To start with, and to smoothen our next steps, we would want to install react-native-windows and react-native-windows-init into our react native project.

yarn add react-native-windows
yarn add react-native-windows-init

2. We want our react-native project to recognize that we have a windows application, the easiest way to do that is to pretend to be creating a UWP project from scratch, so in our RN root dir:

npx react-native-windows-init --language cs --experimentalNuGetDependency true --overwrite

That helps us out by creating the necessary configuration for react native to acknowledge that there will be a windows app utilizing the react native project.That, however, generates a hello-world windows application utilizing our RN project. We don’t need that. So we can safely delete the recently-generated windows directory under the RN root dir.

3. By now, react native expects a windows project under the windows directory, which have just been deleted! So we would like to override the part in the configuration that tells react native to look for the project in that path.We should then add a file with the following name into our react native root directory: react-native.config.js. It should have the following contents:

module.exports = {
  root: '{rn_root_dir}',
  reactNativePath:
    '{rn_root_dir}\\node_modules\\react-native',
  platforms: {
    windows: {
      npmPackageName: 'react-native-windows',
    },
  },
  project: {
    windows: {
      folder: '{rn_root_dir}',
      sourceDir: '..\\{windows_solution_relative_dir}', //realtive to {rn_root_dir}
      solutionFile: '{solution_file}.sln',
      project: {
        projectFile: '{proj_dir}\\{proj_file}.csproj',
      },
      experimentalFeatures: {
        UseHermes: 'false',
        UseWinUI3: 'false',
        UseExperimentalNuget: 'true',
      },
    },
  },
};

Where:

• rn_root_dir is the root directory of our react native project.

• project:windows:folder is typically any directory in your file system; however, in reality, it doesn’t really work if it was outside rn_root_dir, so we simply set it to the root dir anyway.

• project:windows:sourceDir should be set to a relative path to project:windows:folder or simply to rn_root_dir. Therefore, we should be aware of the relative path of our primary UWP code-base.

• project:windows:solutionFile is the *.sln file name of our UWP app.

• project:windows:project:projectFile is the *.csproj file name of our UWP app, preceded by its relative path to project:windows:sourceDir.
  To ensure the integrity of your recently-created react-native.config.js, run npx react-native config. If the command succeeds, it will show the full configuration (including things we didn’t write) that is actually in effect. If it fails, we should check the error message and fix whatever mistakes we might’ve made in the file.

4. This step is not absolutely necessary, and what we do here doesn’t even take place by default in the generated project. However, it can happen (and it is likely to happen) for some packages to have dependencies outside nuget.org. They would be referencing packages from https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json. Therefore, we need to add that to our solution packages restore sources. We do that by adding NuGet.Config file to our UWP solution directory (next to *.sln), with the following contents

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <config>
    <add key="repositoryPath" value="packages" />
  </config>
  <packageSources>
    <clear />
    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
  </packageSources>
  <disabledPackageSources>
    <clear />
  </disabledPackageSources>
</configuration>

5. While we’re at the UWP solution directory, we would also want to add ExperimentalFeatures.props with the following contents

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <!--
    This file contains some important settings that will apply globally for
    your app and *all* native modules your app consumes. These values were
    set when you created the app project, and in some cases cannot be
    simply changed here without recreating a new project.
  -->

  <PropertyGroup Label="Microsoft.ReactNative Experimental Features">
    <!--
      Enables default usage of Hermes.
      
      See https://microsoft.github.io/react-native-windows/docs/hermes
    -->
    <UseHermes>false</UseHermes>

    <!--
      Changes compilation to assume use of WinUI 3 instead of System XAML.
      Requires creation of new project.

      See https://microsoft.github.io/react-native-windows/docs/winui3
    -->
    <UseWinUI3>false</UseWinUI3>

    <!--
      Changes compilation to assume use of Microsoft.ReactNative NuGet packages
      instead of building the framework from source.
      Requires creation of new project.

      See https://microsoft.github.io/react-native-windows/docs/nuget
    -->
    <UseExperimentalNuget>true</UseExperimentalNuget>
  
  </PropertyGroup>
</Project>

6. In our react native root directory, we need to add a file with the name Directory.build.props. Its contents should be

<?xml version="1.0" encoding="utf-8"?>
<Project>

    <PropertyGroup Label="NuGet" Condition="'$(MSBuildProjectExtension)' == '.vcxproj'">
        <ResolveNuGetPackages>false</ResolveNuGetPackages>
    </PropertyGroup>

</Project>

This is a workaround to a bug mentioned here that can cause the Windows build of certain 3rd-party packages to fail.

7. Now, we need to make a few modifications in the *.csproj file of our UWP app project.Under the following line

<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />

We need to add

<Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
  <PropertyGroup Label="ReactNativeWindowsProps">
    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$(SolutionDir)..\ReactNativeProj\node_modules\react-native-windows\</ReactNativeWindowsDir>
  </PropertyGroup>

It is very important for the value given to ReactNativeWindowsDir to point to the react-native-windows directory, under node_modules, under the root directory of our react native project. Absolute paths here often fail, therefore relative paths should work best. We can use $(SolutionDir) (a variable provided by MSBuild that points to the path of our solution file directory) as a starting point, and then navigate to our react native path and then to the node modules and react native windows. It is worth mentioning that the $(SolutionDir) variable ends with a path separator (\). So we don’t need to append that after the variable in our relative path. Our relative path here needs to end with a path separator (\).

Still in the same *.csproj, and below the following line

<Import Project="$(MSBuildExtensionsPath)\Microsoft\WindowsXaml\v$(VisualStudioVersion)\Microsoft.Windows.UI.Xaml.CSharp.targets" />

We need to add

<!--<ImportGroup Label="ReactNativeWindowsPropertySheets">
    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.props')" />
  </ImportGroup>-->
  <ImportGroup Label="ReactNativeWindowsTargets">
    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.targets')" />
  </ImportGroup>
  <Target Name="EnsureReactNativeWindowsTargets" BeforeTargets="PrepareForBuild">
    <PropertyGroup>
      <ErrorText>This project references targets in your node_modules\react-native-windows folder that are missing. The missing file is {0}.</ErrorText>
    </PropertyGroup>
    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.props'))" />
    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CSharpApp.targets'))" />
  </Target>

8. Now under our UWP project, we need to add the following class ReactPackageProvider.cs

using Microsoft.ReactNative;

namespace [the_default_namespace_of_your_project]
{
    public partial class ReactPackageProvider : IReactPackageProvider
    {
        public void CreatePackage(IReactPackageBuilder packageBuilder)
        {
            CreatePackageImplementation(packageBuilder);
        }

        /// <summary>
        /// This method is implemented by the C# code generator
        /// </summary>
        partial void CreatePackageImplementation(IReactPackageBuilder packageBuilder);
    }
}

The contents of the partial void will be handled automatically later during the auto-link process.

9. Also under our UWP project, under Properties directory, we should find a file with the name Default.rd.xml. Below the following line

<Assembly Name="*Application*" Dynamic="Required All" />

We should add

<Namespace Name="Microsoft.ReactNative" Dynamic="Required All" MarshalObject="Required All" />
<Namespace Name="Microsoft.ReactNative.Managed" Dynamic="Required All" MarshalObject="Required All" />

10. At this point, we have done a nice job to mimic the generated application in our existing UWP app. We have also made the necessary configuration to allow having the UWP code-base outside the root directory of the RN project. Now it is time to actually run the auto-link process

npx react-native autolink-windows

It is essential for this step to succeed. Upon its success, few things are going to happen:

• you will find a few generated files in your UWP project directory.
• you may find a Generated Files directory under your UWP project directory that also contains other file(s).
• some of your RN 3rd-party packages may appear as C#/C++ projects in your UWP solution.
• if you check the installed nugets in your UWP project, you should be able to find Microsoft.ReactNative package (even though you might have not installed it explicitly).

11. We need to include the generated files from the last step in our UWP project (right click → include in project).
12. Some of the RN 3rd-party packages from step 10 might appear as C++ projects. These projects are likely to be referencing a very old C++ build tools version that may not be installed on your machine. It is okay to install that. But it is also safe (and easier) to right-click the UWP solution and click retarget to select a higher version of C++ build tools for these projects. We may need to repeat this step every time we delete node_modules and do a clean yarn install.
13. Now it’s time to start writing some code! The UWP app generated by RN has its App class always inheriting ReactApplication. However, in an existing app, we don’t always have this luxury, especially that there can only be one class throughout the project that inherits UWP’s Application class. In fact, we don’t really need anything from the ReactApplication but its properly initialized ReactNativeHost. Therefore we’re going to properly initialize a ReactNativeHost ourselves. Add the following snippet in your App's constructor

ReactInstanceSettings ris = new ReactInstanceSettings()
            {
#if BUNDLE
                JavaScriptBundleFile = "index.windows",
                UseWebDebugger = false,
                UseFastRefresh = false,
#else
                JavaScriptBundleFile = "index",
                UseWebDebugger = true,
                UseFastRefresh = true,
#endif

#if DEBUG
                UseDeveloperSupport = true,
#else
                UseDeveloperSupport = false,
#endif
            };

            ris.Properties.Set(
                ReactPropertyBagHelper.GetName(ReactPropertyBagHelper.GetNamespace("ReactNative.Dispatcher"), "UIDispatcher"),
                ris.UIDispatcher);


            ReactNativeHost rnh = new ReactNativeHost()
            {
                InstanceSettings = ris,
            };

            Microsoft.ReactNative.Managed.AutolinkedNativeModules.RegisterAutolinkedNativeModulePackages(rnh.PackageProviders); 
            rnh.PackageProviders.Add(new ReactPackageProvider());

This may seem very similar to the code generated by RN, except the generated never sets the RN dispatcher in ReactInstanceSettings like we do. In fact, that was really ReactApplication's job!

The next thing we need to do, while we’re still in the App class, we need to override (or modify the probably already overridden) protected override void OnLaunched(LaunchActivatedEventArgs e) and add this line

ReactNativeHost.ReloadInstance();

Which was also part of ReactApplication's job.
Here, ReactNativeHost is assumed to be the same instance (rnh) defined in our App constructor.

14. Now, having a certain component displayed as a sub-view in our existing UWP app have never been easier! We can simply go to our XAML page and and use the react native namespace

xmlns:react="using:Microsoft.ReactNative"

And then use it!

<react:ReactRootView x:Name="reactRootView" ComponentName="ourReactNativeComponentName" />

Don’t forget that at the code-behind of this page, you would also need to set the ReactNativeHost property of the reactRootView.

reactRootView.ReactNativeHost = rnh;

Where rnh is the same instance we defined in App's constructor.

15. It is worth mentioning that the Windows build of certain 3rd-party packages will not always be smooth and nice to work with. You might fall in a situation (although rare) where for certain packages, you would have to delete the build cache and generated files of that project for every new build (an obstacle that could be overcome by running a pre-build script to do that for us).
16. Now at last it is finally time to npx react-native start and then run your Windows app!

[hunainhumail-purevpn]

Thank You so much for this nice explanation of integrating react-native-windows into and existing UWP App.

[hunainhumail-purevpn]

@AlyElhaddad can you please help me in the question I asked? For calling javascript function from native xaml button press