I spent too long this weekend getting a “hello world” react native application up and running just the way I wanted it. I just wanted to detail my experience and my gotchas.

Goal: Get a “hello world” react native v0.49 app running on android on Kitkat API 19 using the Genymotion 2.11.0′s android emulator on OSX 10.12.

What I did: The installation of react native is pretty straightforward- you need ruby 2.4, nodejs, watchman and in my case, I wanted to use yarn over npm.

I didn’t want to use android studio so I opted to install things via the android sdkmanager (which you get from the sdk tools package you can download here). What isn’t detailed in the articles I found is what android studio is actually downloading for you when you install an sdk. For use with Genymotion (personal version downloadable here) I found I needed the sdk platform, build-tools, platform-tools and optionally the sources. The installation of these via the sdkmanager looks like:

sdkmanager “build-tools;19.1.0“ “platform-tools“ “ platforms;android-19“ “sources;android-19“

You can either let the sdkmanager use its default location to install to, your you can specify your own. I’m pretty sure it’s a better pattern to pick the installation location so that you can run multiple versions of android SDKs, but for to get it up and running, I just went with the defaults.

With the sdk + tools installed, next it was Genymotion. I installed it and then configured it- under settings > ADB, select “use custom android SDK tools” and selected the top level folder that contains all of the packages I installed. The tools Genymotion needs are aapt and adb, so the folder you choose needs to contain these files in its subdirectories. If Genymotion can’t find everything it needs it’ll tell you, otherwise you’re good to go.

After selecting an appropriate VM in Genymotion and having it start successfully I was trying to do

yarn start

and launch my android connection but was getting an error like:

“could not install *smartsocket* listener: Address already in use”

After bouncing around between articles and reading about adb there are apparently a bunch of reasons this can happen. From the article linked above:

When you start an adb client, the client first checks whether there is an adb server process already running. If there isn’t, it starts the server process. and from starting adb in nodaemon mode I found that yarn start was starting adb server, but Genymotion was also starting an adb server itself- but to do this it terminates the running server that yarn started somehow. For whatever reason when you try to rerun the android connection from the react native application to bind to the android VM’s adbd process, it tries to start the adb server but throws the above error because the default port for the adb is used by Genymotion. Why don’t they coordinate? Why is this happening?

What I found is that it seems to have something with where the adb executable in invoked from and how. Because installing the sdk from sdkmanager doesnt manipulate your PATH, I noticed the processes had varying paths to the adb executable in ps. I figured I’d try making a symlink to adb in /usr/local/bin and gave it try- that fixed it! There must be something in the executable or a PID file or something somewhere that facilitates this restarting coordination and it took the symlink to bring everything in line.

After that everything worked great!