What is React Native for Windows + macOS?

React Native for Windows + macOS is an interesting framework that allows you to build cross-platform desktop applications for both Windows and macOS just by using a single base of React Native code. What it actually does is coordinate React Native support for the Windows 10 SDK and for the macOS 10.13 SDK so that developers don't need to build apps using separate native frameworks or languages.  

That means this this framework lets you develop native desktop applications for all Windows 10 devices (including PCs, tablet devices, Xbox and mixed reality devices) and macOS ecosystems by only using JavaScript.

React Native for Windows + macOS History and Maintenance

React Native is an open-source framework originally created for developing mobile applications for both iOS and Android by Facebook, Inc. However, in 2020, Microsoft extended the React Native framework for both Windows and macOS, bringing happy news for web and standalone app developers.

In this process, Microsoft reimplemented React Native and rewrote many components in C++ to boost the performance. The project is currently available on Github for anyone to use and test. Microsoft maintains comprehensive documentation specifically for React Native for Windows and macOS.

Why use React Native for Windows + macOS?

If you're a React Native developer, you're probably aware of the convenience and performance that it offers when building mobile apps. So, why wouldn't it be awesome to use React Native for building desktop apps on Windows and macOS? Let’s have a deeper look into the process.

When you create a new React Native project, it creates a project template for each development platform. As a result of that, you will get a new Visual Studio Solution on Windows and an Xcode project on macOS. The React Native layer, which uses JavaScript and TypeScript, exists on top of these native projects. Most of your UI components and shared UI components will live in this React Native layer. In this sense, React Native for Windows and macOS is not competing with React Native; it is adding to React Native.

Within Microsoft, we have a number of applications such as MSOffice and Xbox that are making a really big bet on React Native. Additionally, enterprise and consumer applications like Axsy, Plex, and Facebook Messenger are also using React Native for Windows and macOS to expand their reach beyond mobile and to drive their business forward on desktop.

Here are some key benefits of using React Native for Windows + macOS.

  • React Native builds a native application for you under the hood, providing a great user experience and built-in accessibility.
  • As it is native, it runs fast and smooth on each platform that you deploy on.
  • Has a web-like developer experience including live reloads to see your changes instantly after saving.
  • It has an active and engaged developer community and a wide variety of community modules that you can incorporate with your application.
  • It supports many essential features such as react-navigation and auto-linking.

Implementing RN for Windows + macOS

Getting Started with Windows

You are only allowed to run React Native for Windows apps on Windows 10 devices with Windows version 10.0.16299.0 or higher. When developing React Native apps for Windows, you need to install several dependencies as follows.

First, start an elevated PowerShell window and run:

Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/microsoft/react-native-windows/master/vnext/Scripts/rnw-dependencies.ps1')

This method is fully automated so that you won’t have to worry about installing dependencies separately for your Windows app.

Installing React Native on Windows

Using cmd or git bash, execute the following command from the directory where you wish to create the project.

npx react-native init <projectName> --template react-native@^0.63.2

If you are willing to work with TypeScript, create a TypeScript template using the following command.

npx react-native init <yourprojectName> --template react-native-template-typescript@6.5.*.

The above command will create a new subdirectory that includes all the files related to the project. Access it using the cd command.

cd projectName

Finally, you can install the packages for React Native Windows.

npx react-native-windows-init --overwrite

The --overwrite tag above is a transitory measure that guarantees the right documents are replicated to metro.config.js for the metro bundler to work along with Windows.

Running a React Native App on Windows

Make sure to launch a new browser window and keep it running in the background before running the React Native Windows app. Also, confirm that your device’s system meets all the prerequisites of building a Windows application. Let’s see how to run an application with Visual Studio, the most famous IDE for Windows app development.

  • First, open the application folder and navigate to the "Solution" file in Visual Studio (example: FirstProject/windows/FirstProject.sln if you have used FirstProject as <projectName>)
  • Then, you can choose "Debug configuration" plus "x64 platform" from the controls of the combo box.
  • Next, execute yarn start from the directory where the project exists, and wait a few minutes until the packager for React Native appears successful.
  • Now, click on the "Run" button, which is on the right side of the combo box control in Visual Studio, or, without the Debugging the menu item, select Debug->Start.

You will now observe that your newly created app and Chrome have been loaded on http://localhost:portnumber/debugger-ui/ in a new browser tab. You can open its Developer Tools by pressing the F12 key or using the Ctrl+Shift+I keys in Chrome.

Get Started with RN for macOS

In order to build projects with native code for macOS, you must have a Mac device. On your device, install Xcode version 11.3.1 or a newer version. Make sure to install Xcode Command Line Tools, too. Then, open Xcode and choose "Preferences..." from the Xcode menu. Next, go to the Locations panel and install the relevant tools in the Command Line Tools dropdown. As a final step, install CocoaPods for the device with the following command.

sudo gem install cocoapods

Installing React Native on macOS

First, install the standard React Native dependencies as mentioned above.

Install Node.js version 12 LTS or newer using HomeBrew:

brew install node

Finally, install Watchman:

brew install watchman

Then call react-native init after navigating to the place you want to create your project:

npx react-native init <projectName> --version 0.62.0

Move to the newly-created directory:

cd <projectName>

Then, install the React Native for macOS packages.

npx react-native-macos-init

Running a React Native App on macOS

Without using Xcode

Go inside your project directory and run the following command.

npx react-native run-macos

Using Xcode

Go to Xcode and open up macos\test.xcworkspace or you can run xed -b macos;

yarn start:macos and press the "Run" button.

A new cmd window will appear with the React packager and a new react-native-macos application. It will take a few minutes if this is the first time you are running the app, since it has to build the whole project and its dependencies. After finishing it, you can start developing your React Native macOS application.

There are some other frameworks such as electronJS for building native desktop applications for both Windows and macOS, but React Native is the most widely adopted framework that supports true universal app development. The React Native development team is dedicated to making sure that your apps will perform super snappy on any device that they are deployed to.

Major bug fixes, issues, and planned features for 2021

The team that maintains React Native for Windows and macOS is hoping to improve the number of their features and fix some major bugs in this year.

Although developers faced issues under various circumstances in previous versions, the current branch of React Native Windows is up to date with the master branch, and pain points of developers such as the inability to auto-link and less support for a navigation system are almost gone.

Let’s take a look at what changes are coming in 2021:

  • Support for react-navigation.
  • Support auto-linking.
  • Support for the c++ turboModules.
  • Introducing structured error types.
  • Support arrow and tab navigations.

Support for react-viro and react-native-auth0 will also be implemented in 2021.

Building Universal Apps with RN for Windows + macOS

Developing applications for Windows and macOS separately is quite a massive and long-term process. You also have to use two separate languages to implement the same app for both platforms.

React Native for Windows and macOS let you build applications with a single JavaScript code base, saving a lot of time and workload. For example, you can use the same UI components developed with React Native for both platforms. Also, creating UIs in React Native is much easier when compared to other frameworks with the use of tags like in basic HTML.

Using Crowdbotics with React Native for Windows + macOS

The Crowdbotics App Builder enables non-technical users to rapidly develop software applications. Using Crowdbotics and its wide range of prebuilt packages, developers can make and deploy their software applications more easily and quickly.

The Crowdbotics App Builder runs on RAD stack, which consists of React Native and Django. React Native for Windows + macOS is a critical piece of Crowdbotics' support for building web, mobile, and desktop apps simultaneously. Users who are building a mobile app will find that their single codebase also generates working applications for web and desktop operating systems with no added effort.

Wrapping Up

React Native for Windows and macOS offers you a native platform for building desktop applications without separating code bases for Windows and macOS. Although it is a new platform, a lot of developers have already started to build applications because of the unique convenience and speed advantages it offers.

If you're looking to build a scalable cross-platform app, Crowdbotics is here to help. Our expert PMs and developers can convert your website into a native app or vice-versa or build a brand new universal app from scratch. Get in touch with us today for a detailed quote and timeline.