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.
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.
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
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 email@example.com.*.
The above command will create a new subdirectory that includes all the files related to the project. Access it using the cd command.
Finally, you can install the packages for React Native Windows.
npx react-native-windows-init --overwrite
--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.slnif you have used
- Then, you can choose "Debug configuration" plus "x64 platform" from the controls of the combo box.
- Next, execute
yarn startfrom 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
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:
Then, install the React Native for macOS packages.
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
Go to Xcode and open up
macos\test.xcworkspace or you can run
xed -b macos;
yarn start:macos and press the "Run" button.
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
- Support auto-linking.
- Support for the c++ turboModules.
- Introducing structured error types.
- Support arrow and tab navigations.
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.
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.
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.