Article summary
Recently, I was onboarded to a React Native project on a new developer laptop. I realized that the initial setup to launch the app had a few tricks and small gotchas that weren’t obvious at first. Here’s a simple breakdown that will hopefully help if you need it!
Setting Up Developer Tools
Before configuring platform-specific tools, here are some general notes. You’ll want to install Node.js and also have some way to manage Node versions for the future. I prefer nvm and installed this using Homebrew.
When it comes to running your app, you’ll want a tool like React Native CLI (react-native) installed onto your project through npm or yarn. The React Native CLI tooling can also be simplified using alternatives like Expo, which handles the native configuration(s) or you. For full instructions on what environment variables / keys are needed, here, refer to the official documentation so that your local machine has the correct access.
Setup: iOS
You’ll need to download XCode. Then, you’ll want to navigate to Settings > Components and download the iOS simulator if it’s not already.
Note: Most likely Cocoapods will get installed automatically, too. This is a required step.
Note: Based on your app dependencies, for both iOS and Android you may not want to download the latest simulator. For XCode, previous releases can be found here>.
Setup: Android
You’ll need to download Android Studio. Then, navigate to Settings > Languages & Frameworks > Android SDK > SDK Tools and download the latest Android SDK Command-line Tools. Usually, this doesn’t come pre-installed.
Android setup also requires Java. You can install a compatible JDK using Homebrew, then configure your environment variables in your shell config file (e.g., .zshrc):
export JAVA_HOME=/Library/Java/JavaVirtualMachines/.jdk/Contents/Home
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator export
PATH=$PATH:$ANDROID_HOME/platform-tools
After updating these shell variables, reload and you should be good.
Note: Android Studio initially boots each one its emulators with annoying keyboard settings. To fix these – boot up the emulator. Go to the device Settings app. Then, go to System > Keyboard > On-screen keyboard > GBoard. On this page, go to Physical Keyboard and enable Show on-screen keyboard. Go back to the GBoard page and disable Write in text fields.
Note: By default, Android Studio has some limiting device emulation options. You can download custom skins for devices from Samsung from their respective websites.
Running Your App
Now that all the setup work is done, we can try running the app. Depending on whether you used React Native or Expo in the beginning to configure your project, this part will vary.
For React Native CLI projects, for example, you start the app with react-native run-ios or react-native run-android.
For Expo-based projects, you’ll start the app with expo start. Afterwards, you can launch iOS or Android directly or scan a QR code to run the app on a physical device using Expo Go.
If you have a setup that already leverages Expo tooling already you could also run each simulator individually from using expo run:ios or expo run: android.