Host React Native App in Universal Windows Platform (UWP)

Host React Native App in Universal Windows Platform (UWP)

In my earlier post, we saw how we can get a basic React Native app up and running in minutes and target both ios and Android platforms using the same code. In this post, we'll see how easy it is to extend this to support Universal Windows App (UWP) in Windows 10. By the end of this post, you'll appreciate how easy React Native makes it to have a single code base and target three different platforms.

For the most part, the steps would be similar to the earlier post. However, there is a slight difference. Instead of using create-react-native-app command line utility, we'll directly use react-native cli utility. If you have already created a react native app using the create-react-native-app utility, you might want to eject using the steps mentioned here. This is because we'll have to install React Native Windows at some point and at the time of writing it does not support Expo.

With this background, let's walk through the steps to create a React Native app and host it in Universal Windows Platform (UWP) on Windows 10.

Steps to create a React Native application

1. Install the latest version of Node.js

  • Install Node.js from here. I would recommend you install the latest LTS version.

  • Verify node is installed using

      C:\Users\sundeep>node -v

2. Install the Command Line Utility

  • Install the react-native-cli command line utility

      npm install -g react-native-cli

3. Create our React Native app

  • We can now create our React Native app using the command line utility as

      react-native init HelloWorld --version react-native@0.55.4

Once the project is created successfully, cd into the project HelloWorld.

Note: Specifying the react-native version is not mandatory. I have specified it as there was a compatibility issue with v0.56 at the time of writing.

Steps to host the React Native application in UWP

1. Install React Native Windows CLI

  • Install the React Native Windows CLI using npm.

      npm install --save-dev rnpm-plugin-windows

2. Initialize React Native Windows Project

  • Use the react-native CLI installed in the earlier step to initialize the React Native Windows project.

      react-native windows

This will create a folder with the name windows which will have a Visual Studio Solution file for the UWP app.

3. Configure the Visual Studio solution

  • Configure the Visual Studio Solution as per the steps mentioned here. Check the section Running a React Native Windows App.

  • Once the solution is configured, run the Visual Studio project and it will open the typical React Native app running on Windows that is showing an error saying it needs to contact the dev server.

4. Run the React Native dev server

  • Run react-native start from your project directory and wait for the React Native packager to report success.

      D:\Dev\ReactNative\UWP\HelloWorld>react-native start
      Scanning folders for symlinks in D:\Dev\ReactNative\UWP\HelloWorld\node_modules (32ms)
      Running Metro Bundler on port 8081.
      Keep Metro running while developing on any JS projects. 
      Feel free to close this tab and run your own Metro instance if you prefer.                                    
      Looking for JS files in
      Metro Bundler ready.
      Loading dependency graph, done.
       BUNDLE  [windows, dev] ./index.js 100.0% (488/488), done.

4. Reload the UWP app

  • Press Ctrl + R (or click Reload button) in your running app. It will now display the new app!!

You can now modify file to develop your custom React Native app.