React Native as a JavaScript framework is the most popular for cross-platform mobile development. Despite growing competitors, it’s still at the forefront of mobile technology. But it’s not the end of its possibilities. So, what else? Can React Native be used for desktop? The answer is yes!
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:
"it brings React Native support for the Windows SDK as well as the macOS 10.14 SDK. With this, you can use JavaScript to build native Windows apps for all devices supported by Windows 10 and higher including PCs, tablets, 2-in-1s, Xbox, Mixed reality devices, etc., as well as the macOS desktop and laptop ecosystems."
In short, the possibilities are endless.
In this article, I’ll cover:
- the benefits of React Native,
- React Native for desktop requirements,
- how to get started with React Native for desktop,
- desktop app deployment.
Why you should care
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.
Let’s talk about Requirements
There are some additional requirements and configuration steps to build applications for desktops using React Native.
Windows requirements
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 requirements
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
Getting started
Before the development phase begins, make sure you’ve set up all development dependencies.
Windows
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.
macOS
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
Project setup
For setting up a project for Windows or macOS application follow the below steps:
- Initialize RN project:
npx react-native init <projectName> --template react-native@^0.67.0 - Navigate into this newly created directory and install the macOS/Windows extension:
npx react-native-macos-init or npx react-native-windows-init --overwrite - To run the application use command:
npx react-native run-macos or npx react-native run-windows
What about Performance?
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.
Application release
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.
Windows deployment
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.
macOS deployment
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:
- Log in to App Store Connect and go to the “My Apps” section, create a new app using the “+” button.
- Fill in the information about your app (name, category, privacy policy URL, bundle ID, etc.), then provide some build information - app screenshots, title, description, release preferences, etc.
- Upload your app to App Store connect using Xcode (set up Signing and Team information, prepare archive and upload it: Product > Archive > Distribute App > iOS App Store).
- On the App Store Connect, select the build exported from Xcode and submit the app for review. The status should change to “Waiting for review”. If there is any issue in terms of the submitted build, the reviewer will contact you. The review process usually takes a few days.
Conclusion
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.
Sources
https://microsoft.github.io/react-native-windows/
https://reactnative.dev