React Native Windows
Microsoft recently started a project, in which they’re adding react native support for native windows applications. Although it is at an early stage right now, and there aren’t many libraries that have windows support, you can start building simple windows applications with react native.
This article focuses on how you can set up your windows machine to run react native windows applications.
First things first, you need nodejs installed on your windows machine. To make sure you do, run the command node -v and if you get a version number, you’re all set. Next, I would strongly recommend that you install react native cli, which would ensure that you don’t have to use npx every time you want to work on RN. For this, run npm install -g react-native-cli and react native cli would be installed globally for your system.
Now, we are all set to create a react native application (make sure to navigate from your terminal to the location where you want the project), and you can do this by running react-native init <project-name> --version ^0.61.5 where you’ll have to add a name for your project. Right now, you’ll have a project with android and iOS support only, but we’re soon going to add windows support.
Before we proceed to adding windows support to this project, we need to make sure we have Visual Studio Build Tools on our system. If you don’t you can download the community version from the Microsoft website itself. When installing the build tools, make sure you have the following selected:
- Universal Windows Platform Build Tools > Windows 10 SDK
- Universal Windows Platform Build Tools > C++ (v141) Universal Windows Platform tools
Once you are done with this installation, you’re ready to add windows support to your react native app.
Go to your application folder (make sure to go inside the directory named with the name that you gave your project) and run npx react-native-windows-init and this should add windows support to your project. You can ensure this by looking at your project and noticing that another directory like android and iOS has been created, this time named windows.
Another step we need to follow before running our app on windows is making sure we have developer mode ON on our machine. You can do this by simply opening the Settings app and searching for developer settings, and you should find a radio button corresponding to developer mode there.
Next is running the project, and this part is the same as how you would run an RN project on android or iOS. You just need to run react-native run-windows just like run-android or run-ios.
However, this is where I got stuck for quite some time. I kept getting an error that said, “Build failed, maybe developer mode is not on.” To fix this, all you have to do is open your command prompt with Administrator Access and run the same command, react-native run-windows from the root of your project structure.
Voila! you have an RN application running on windows!
Hope this article helped, and if it did, don’t forget to give it a clap, and follow me on medium for more such articles. Happy coding, hope to see some really cool windows native apps made in react native soon!
In case you have any questions, feel free to drop a comment, and if this article helped you and you developed a windows app in RN, do send me a link as well. I would love to take a look!
