Setup React Native on Windows!

(Note this is for Android development only, you cannot do iOS React Native development on Windows)

React has been making waves in the development community for a few years now. Recently, React Native was released for iOS development and in the past year React Native was released for Android development. Being an Android developer, I decided to try out React Native development on my Windows machine and see what it was all about!

While I was at it, I was unable to find a comprehensive guide on how to set a Windows machine up for React Native development, even the docs on the react native website weren't complete. So I decided to put together my own guide in the hopes that it would help out others who decide to try out this technology. If you are looking for a guide explaining what problems React Native solves, check out this post.

Tools/Environment:

- Windows 10
- PowerShell (this should come pre-installed on windows)
- The JDK (version 8)
- Android Studio
- An Intel machine with Virtualization technology enabled for HAXM (optional, only needed if you want to use an emulator). This SO post does a wonderful job explaining how to do this.

Step 1: Set up Chocolatey.

We will be using Chocolatey as a package manager. To get Chocolatey installed go ahead and start PowerShell in administrator mode (by right clicking it and selecting "Run as administrator") and enter the following commands.

Enable running of remote PowerShell scripts:
Set-ExecutionPolicy RemoteSigned

Download Chocolatey:
iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))

If you want to disable the ability to run remote PowerShell scripts after downloading Chocolately, run this in PowerShell:
Set-ExecutionPolicy Restricted

If my experience on a mac in the last two years has taught me anything it is that using a command line package manager is easier to work with and maintain than having to hunt down, download and install software yourself. Chocolaty brings the experience of using brew to windows!

Step 2: Setup your machine for React Native

With Chocolately this is turned into a few simple commands.
First make sure to close and restart PowerShell as an administrator so you can use the choco commands.
Then run the commands to install node, python and react-native:

choco install nodejs.install
choco install python2
Restart PowerShell as an administrator so you can run npm
npm install -g react-native-cli

After running the last command copy the directory that react-native was installed in. You will need this for Step 4. I tried this on two computers in one case it was: C:\Program Files (x86)\Nodist\v-x64\6.2.2. In the other it was: C:\Users\admin\AppData\Roaming\npm

Step 3: Start an emulator

Open Android Studio and select and start an emulator. If you don't already have one set-up you can look at the official docs here.

Step 4: Setting your path variables!

Take note of where react-native was installed in step 2. You will need to edit your environment variables so you can run react-native it from anywhere. To do this we will into your environment variables and edit the "Path" variable.

a) Right click on the start menu icon and select "System" in the list

b) Click on "Advanced System Settings" in the panel on the left

c) Click "Environment Variables" in the dialog that appears

d) In the bottom section scroll to the "Path" system variable, select it and click the "Edit" button.

e) Add the location that react-native was installed to and click "OK":

f) If you haven't already set ANDROID_HOME you will need to set that environment variable as well. Open Android studio and go to the Settings dialog. Then search for "android sdk". At the top of the panel for that option you should be able to copy the "Android SDK Location":

g) In the "Environment Variables" dialog click "New" Under the "System Variables" Section. Make the name: "ANDROID_HOME" and the value the path that you copied from android studio. Then hit "OK"

Go ahead and restart PowerShell as an admin so you can run react-native commands in it.

Step 5: Create your React Native Project

First navigate to the directory where you want to put your new project (user/admin/work in my case). Then run the following command to create your React Native project.

react-native init ProjectName

Step 7: Run the app

Run the app by navigating into the root directory (user/admin/work/ProjectName) and running it from command line:

cd ProjectName
react-native run-android

You may run into dependency issues. When I tried to run the app it complained that I didn't have Build Tools revision 23.0.1. To fix this I had to open the sdk manager in Android Studio and download the build tools from there.

Step 8: BONUS! Make an edit and run

Open index.android.json and make some changes to the text that is rendered. Then save and refresh the app (tap the r key twice). You should see the changes appear on the screen.

Well that's it for this post, Let me know if you run into any issues and Ill try and point you in the right direction or correct the post. Ill post as I get to play with React Native a bit more!