Starting a React Native Project

Today I had to figure out how to set up a new React Native project for a new application at work. It was a much more painful process than I was expecting. I haven’t started working on the app itself yet, but I want to share the process I went through to get things working in the off chance it helps someone else out there.

As a disclaimer I did all this work on Windows 10, but it seems like these steps would be pretty ubiquitous across all platforms. I did use Powershell for all the commands, so I’d recommend doing the same if you’re using a Windows machine.

UPDATE: I forgot some steps! I’ve updated to reflect the additional things I had to do, hopefully in a bit more detail…

Install React Native

I largely followed Facebook’s React Native setup guide, so you’ll probably notice many of my steps are the same.

1. Install Node.js
2. Install React Native CLI

npm install -g react-native-cli

You may have to restart your computer if npm is not being recognized as a command.

Launch the Android SDK Manager

From within Android Studio:

Settings > Appearance & Behavior > Android SDK > Launch Standalone SDK Manager
 

From the Android Studio welcome screen:

Configure > Android SDK > Launch Standalone SDK Manager

What To Install

Make sure the following are installed for “Android 6.0 (API 23)”:

• Google APIs
• Intel x86 Atom System Image
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

Make sure the following are installed for “Tools”:

• Android SDK Build-tools (Rev. 23.0.1)

Configure Environment Variables

Open the “Edit Environment Variables” interface by searching for “Edit environment variables for your account” in the “Search Windows” bar.

Set ANDROID_HOME environment variable

%USERPROFILE%\AppData\Local\Android\Sdk

Set JAVA_HOME environment variable

C:\Program Files\Java\jdkX.X.XX

MAKE SURE YOU PICK A JDK NOT A JRE — this part hosed me for longer than I would like to admit.

Add the Android SDK to your path

C:\Users\<user>\AppData\Local\Android\Sdk
C:\Users\<user>\AppData\Local\Android\Sdk\tools

Depending on the interface that pops up you may be able to add entries separately or you may have to append to the end of the current path value. If you get the interface where you have to append, make sure each value is semicolon(;) delimited.

You may have to restart your computer at this point for these changes to take effect. It might not be entire necessary, but I would recommend doing so (I had to restart for the changes to do anything).

Running Your Project

Assuming you have done everything up to this point correctly and I’ve documented my process correctly thus far…

Start an emulator

Launch the Android Virtual Device Manager

android avd

Make sure you have an emulator configured with the following settings:

• Name: React_Native (or whatever you want to name it)
• Device: Whatever you want
• Target: Android 6.0 — SDK Level 23
• CPU: Intel Atom (x86_64)

Make sure your emulator is running before trying to go any further because React Native requires an active device to build and deploy to.

Navigate to project directory

Make sure your npm dependencies are installed

npm install

Run the app

react-native run-android

Conclusions

It seems like I had some issues with my Java path that wasn’t allowing Gradle to find the necessary libraries to compile the project. My hope is that going forward the project goes as much of my React experience has — straightforward and smooth. If I run into any other weird problems that I have to scour the internet to find an answer for I’ll almost definitely being making another post or updating this with more information.