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.
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:
… 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:
With that, I’m all set and ready to start developing for React Native again ☺️