React Native can also be used to create desktop applications for Windows and macOS devices using the Microsoft framework - React Native for Windows + macOS.
As we can read on the framework’s site:
In short, the possibilities are endless.
In this article, I’ll cover:
One of the advantages of using React Native is that you have one codebase building apps for different platforms. Now, the same UI components available in React Native can be used not only for mobile development but also for desktop apps.
There are some additional requirements and configuration steps to build applications for desktops using React Native.
React Native for Windows apps can only be run on devices with Windows 11 and Windows 10 version: 10.0.16299.0 or higher but not all features will work on all versions.
You can find all supported versions of Windows 10 here.
Plus, it’s possible to develop Windows apps on a non-Windows PC by using a virtual machine. The virtual machine can run either locally or on Azure.
macOS apps created using this framework can be run on Mac devices with High Sierra (10.13) or newer ones. Mac device is needed to build applications with native code for macOS.
Also, you need to install Xcode 11.3.1 or a newer version and ensure to install Xcode Command Line Tools. The final step is to install CocoaPods for the device running:
sudo gem install cocoapods
Before the development phase begins, make sure you’ve set up all development dependencies.
All dependencies installation can be done manually or using PowerShell window - running script rnw-dependencies.ps1. To run the installation process automatically you need to start an elevated PowerShell window and run:
Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')
More details for manual installation are available here.
Development dependencies for React Native apps for macOS are the same as for React Native for iOS. Make sure you have installed all standard React Native dependencies described here.
You also need to install Node.js version 12 LTS or newer and Watchman via HomeBrew.
brew install node and brew install watchman
For setting up a project for Windows or macOS application follow the below steps:
npx react-native init <projectName> --template [email protected]^0.67.0
npx react-native-macos-init or npx react-native-windows-init --overwrite
npx react-native run-macos or npx react-native run-windows
Considering applications built using the cross-platform solution and those built with React Native using RN for Windows + macOS the performance is better for the second solution - apps are more lightweight, consume less memory, and spawn fewer processes.
But it's worth remembering that it's rather impossible to build an application using React Native that has the same level of performance as natively developed app presents.
When the app is ready it's high time to prepare build files for platform stores. The process of preparing applications for release is quite similar for each platform store.
React Native Windows apps are Universal Windows Platform (UWP) apps. To be able to publish React Native Windows apps to the Microsoft Store you should be registered as an app developer for Windows app development and then sign up through the Microsoft Partner Center and reserve a name for the app.
Reserving a name is the first step of creating an app in Partner Center. So let me show you how to do it.
Navigate to the Partner Center apps and games page.
Click New product.
Choose your app's type.
Enter the name you'd like to use and click Check availability. If the name is available, you'll see a green checkmark. If the name is already in use, you'll see a message indicating so.
Once you've selected an available name that you'd like to reserve, click Reserve product name.
After reserving a name for the app, the app’s solution needs to be opened in Visual Studio. Some operations should be done (like associating the app with the store, setting solution configuration to Release) before running the app through the Windows App Certification Kit to verify if it passes all tests.
Then, in Partner Center you have to fill out the app submission form which contains questions about the app (Age Ratings, Pricing, Availability, Store Listings, etc) and upload the .appxupload.
However, there are some requirements for .appxupload:
it must be signed with the desired certificate,
it has to successfully pass WACK,
it has personalized visual assets,
it has a Display Name that matches the reserved app name,
it’s created from the same developer account as the account where the submission is being made.
After filling out the submission form, an app can be submitted to the Microsoft Store. It usually takes a couple of hours to run through certification and validation and to appear in the app store.
Now, let’s take a look at macOS deployment. In order to be able to submit apps to the App Store, you need to sign up for the Apple Developer Program. Preparing the app for submission should start with confirmation that the app follows the App Store guidelines.
It's an important step, during the app certification process, the reviewer judges the application based on the guidelines. After verifying the app is free from bugs and crashes, you can create an App Store listing via App Store Connect.
Here’s how you do it:
When choosing RN for Windows + macOS there could be some problems that occur during the development phase that can’t be solved unless you’re experienced with native platform development. Nevertheless, selecting this framework for multi-platform applications is a big opportunity as there is one codebase for each platform. Plus, it speeds up the development time.
And that’s it! If you're interested in finding out more about the subject, visit our blog. There's plenty of information about React, its libraries, components, and many more.
This article was written by Aleksandra Szpila, a Software Developer at Gorrion.