Quick Start: Telling Your New React Native Install About your Existing Android Tools

Recently, I had the dubious privilege of getting to set up my developer machine from scratch. Don’t get me wrong; a new developer environment is a chance for a fresh start! New toys, new experiences, clean out the clutter! But, I am also a creature of habit and spend much fo the first month with a new machine stumbling over little gotchas and missteps regarding setup that I inevitably spend a half-hour googling only to wander upon a very familiar looking page of documentation, Stack Overflow post, or setup guide that details instruction I missed earlier. This is one such occasion.

Motivation

After successfully configuring my new developer environment to dev for Xamarin.Forms, I turned my attention to setting up for React Native development in preparation for some blog posts I was planning. After successfully testing my sample on iOS, I tried to run my app on an Android simulator only to receive the following error from my Metro Bundler:

Couldn't start project on Android: No Android connected device found, and no emulators could be started automatically.
Please connect a device or create an emulator (https://docs.expo.io/workflow/android-studio-emulator).
Then follow the instructions here to enable USB debugging:
https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

This was upsetting of course because 1) I wanted to test on Android, and 2) I had a simulator (which I was quite fond of) happily humming away that I had previously set up for testing in Xamarin. Following the listed links led to some quick terminal commands that (ultimately) failed to resolve my situation. Instead, I aggregated a few different Google searches and found the following method for getting my React Native environment happily building for macOS Catalina.

finding the right $path

First, note that Catalina switched the default shell from bash to zsh. So, instead of configuring my .bash_profile as done previously, I needed to edit and open new file, .zprofile, from the terminal, like so:

cd touch && touch .zprofile && open .zprofile

From there, I needed to nab the SDK location from my Visual Studio instance. In theory, this thought process follows if you install the Android SDK via Android Studio or other IDE; simply locate the path from the preferences menu, like so:

The Preferences menu in Visual Studio for Mac

With that, we can copy the important values into the new .zprofile file:

ANDROID_HOME=/Users/jmeyer/Library/Developer/Xamarin/android-sdk-macosx

export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Save & close that file. To verify everything is as expected now, we can execute echo $PATH in a new terminal window, we should get something like the following:

/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/jmeyer/Library/Developer/Xamarin/android-sdk-macosx/emulator:/Users/jmeyer/Library/Developer/Xamarin/android-sdk-macosx/tools:/Users/jmeyer/Library/Developer/Xamarin/android-sdk-macosx/tools/bin:/Users/jmeyer/Library/Developer/Xamarin/android-sdk-macosx/platform-tools

… which now contains all of the likely paths to our Android tools and SDK. Huzzah! After restarting our developer terminal (or in my case, Visual Studio Code), we can re-run npm start with the updated $PATH and successfully launch our simulator: