Programming my life away, one line at a time

Hi, I'm Amira! This blog documents the various things I've learned along my journey as a software engineer. I write about my time at Hack Reactor, some informative programming tips and tricks, and some of the projects I've worked on.

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Testing JS Wrapper

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

car

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Getting Started with Building An App with React Native, Genymotion, and Watchman

Some Friday nights I like to hang out with my friends. Other Friday nights I enjoy going to the movies. This particular Friday night, I wanted to learn how to build a mobile app using react native. And I’ve heard great things.

Anyway, maybe it was the slow internet at my parents’ house in CT (Bay Area high speed internet, oh how you’ve spoiled me) or the many months it’s been since I’ve done any sort of mobile app development, but just getting to the first line of React code was a process for me. I’m putting together this tutorial specifically for those who have gone to the Facebook docs to learn how to start developing an android app with react native on a Mac, but ended up jumping around back and forth in the tutorials, and hitting random errors with watchman or Genymotion, for which googling does not always turn up any answers.

Here are the steps I followed, step by step, based off the React Native documentation here, with the errors I hit and how I fixed them. This tutorial assumes basic knowledge of node/nvm, bash, brew, and Mac OS X.

Requirements
– OS X
homebrew
– git

Basic Setup
1. Install node.js 4.0 or newer
2. brew install watchmaninstall to avoid hitting a node file watching bug
3. brew install flow to use flow

Android Setup
This is the part that took me the longest. Unfortunately (or I guess fortunately) I just bought the new Nexus, but no USB cable that can plug it into my laptop. So, I had to install the Android SDK and an emulator so I could work on my React Native for Android on my laptop.

1. Install the latest JDK if you don’t already have it
2. brew install android-sdk
3. Define the ANDROID_HOME environment variable:
export ANDROID_HOME=/usr/local/opt/android-sdk
Add the above to your ~/.bashrc or your ~/.bash_profile, keeping in mind that if you do add it to your ~/.bashrc make sure you’ve added source ~/.bashrc to your ~/.bash_profile. Once you do this, you’ll need to restart your Terminal before the environment variables will be applied. (What is all this?)
4. Start a new shell and run android. The Android SDK Manager should open.
5. Install the following:
– Android SDK Tools
– Android SDK Platform-tools
– Android SDK Build-tools
– SDK PLatform
– Intel x86 Atom_64 System Image
– Intel x86 Atom System Image
– Android Support Repository
6. Click “Install packages…” and a pop up will show up. On the left list of “Packages” click through each one and check the ‘Accept’ box on the right. Once all have been checked, click “Install.” Go grab a hot chocolate. This will take a while. While that’s installing, feel free to do the next step (initializing your project).
7. Once that is done, go back and check that all the packages have installed. When I did this, not all of them ended up installing so I had to check them again and re-install those.

Initialize Your React Project
1. Run npm install -g react-native-cli
2. In the directory where you want your project, run react-native init MyReactNativeProject

Install Genymotion
I decided to set up Genymotion instead of a stock Google emulator, but I may end up switching anyway since it’s free only for personal use.

1. Download Genymotion here. You’ll have to make an account. Remember your username and password as you’ll need it later.
2. Open Genymotion. If you don’t have VirtualBox it may ask you to install it (I already had it).
3. Click the plus sign “Add” to add a device. (You’ll have to sign in).
genymotion

 

 

 

 

 

 

 

4. Select a device and wait for it to be retrieved and deployed.
5. Finally, back in the screen that lists “Your Virtual Devices” select the device you’ve just installed, and click “Start” in the top left corner. Your device should pop up and look something like this:
Screen Shot 2015-12-20 at 4.52.53 PM

 

 

 

 

 

 

 

 

 

 

Run Your Project
This is where I hit several issues.

1. cd MyReactNativeProject
2. react-native run-android --stacktrace. The stacktrace part is optional, but helpful.
This step should open up another terminal window.

Error 1:
SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
Solution: Make sure your bashrc is configured correctly with the environment variable in Android Setup Step 3, and that you source it in your bash_profile. If that still doesn’t work, another alternative is to go into the android directory, create a file called local.properties and in it add sdk.dir = {Path of your android SDK}.

Error 2:
Screen Shot 2015-12-19 at 12.35.03 AM

 

 

 

 

 

 

 

 

 

I got the above error when I tried step 2 again, and when I reloaded the JS I got a slightly different but equally useless error. However, I checked the newly opened terminal window for any errors and I got something like this:
launchctl: Couldn't stat facebook.watchman.plist: No such file or directory

Solution:
brew uninstall watchman
launchctl unload ~/Library/LaunchAgents/com.github.facebook.watchman.plist
rm ~/Library/LaunchAgents/com.github.facebook.watchman.plist
brew install --HEAD watchman
react-native run-android

Error 3:
Finally I got another error that looked like:
ERROR connect ECONNREFUSED /usr/local/Cellar/watchman/HEAD/var/run/watchman/amira-state/sock
{"code":"ECONNREFUSED","errno":"ECONNREFUSED","syscall":"connect","address":"/usr/local/Cellar/watchman/HEAD/var/run/watchman/amira-state/sock"}
Error: connect ECONNREFUSED /usr/local/Cellar/watchman/HEAD/var/run/watchman/amira-state/sock

Solution:
Add export TMPDIR=/tmp to my .bashrc file.

The above took me a few hours what with all the installation and trying to figure out all of the steps I needed to do, and a decent amount of time googling the errors I kept hitting, which were not easily findable (and sometimes I had to do things in a certain order before it’d work). If you come across this blog post and find other issues, please post them and their solutions and I’ll add it to this list!

Until then, have fun building your app!! Next up for my blog, cool tips/tricksĀ I discover as I build in React Native!