MacOS Environment Setup for React Native (From Scratch)

If you’ve ever started a coding tutorial only to realize that it assumes you already have a working environment ready to go, you know what a huge source of frustration this can be when you’re just starting out. How can you start learning to code when it’s so difficult to even get an app running on your machine? You will probably spend hours scouring the internet trying to put the pieces together, then end up getting lost down a YouTube rabbit hole. So to save you the trouble, here it is — environment setup from the very beginning:

Step 1: Install IDE’s

You will need three IDE’s for React Native development: Xcode, Android Studio, and Visual Studio Code. You can use VS Code to write the code for your app, while Xcode and Android Studio will allow you to spin up device emulators to run and test your app. Xcode can be found in the App Store, and you can install the other two from your favorite browser. Follow the prompts to install them with the default installation settings. While those are downloading, let’s continue on to the next step.

Step 2: Install Node.js

While the easiest way to get started is to install Node.js using the installer from their website, there are some major disadvantages you will run into later. The installer locks you in to a specific version of Node, so if you ever want to update or switch to a different version, you will have to reinstall it. I like to use a node version manager called n that allows seamless switching between node versions, which will come in handy when jumping between multiple projects.

I recommend using Homebrew to install n since it will simplify the process a bit.

If you don’t already have Hombrew installed on your machine, visit the Homebrew site and copy the curl command from the installation section. Paste this in your terminal and run it:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Now that you have Homebrew installed, you can use it to install the node version manager. Run brew install n in the terminal.

Once you have installed n you can use it to install the latest version of Node.js and npm by running n latest .

Verify that Node.js and npm were installed successfully using the node -v and npm -v commands:

Try out the node version manager by running the n command in your terminal. You should be able to use arrow keys to select the node version you want to use. For now, you will see only one option since you just installed the latest version.

If you see something that looks like this, you’ve gotten everything right up to this point:

Step 3: Set Up Visual Studio Code

Open VS Code to set up your environment by choosing a theme and installing extensions. There is a huge marketplace for VS Code extensions, so feel free to look around for others, but here is a list of helpful extensions that should get you started:

• Prettier
• Rainbow Brackets
• JavaScript (ES6) code snippets
• Auto Rename Tag
• Auto Close Tag
• Better Comments
• ES7+ React/Redux/React-Native snippets
• ESLint
• Path Intellisense

Next, add the code command to the path. This will allow you to open projects in the IDE from the terminal. For example, if you have a terminal open in your project directory, you can type code . to open the project.

In VS Code, press Cmd + Shift + P to open the command pallete, then type “shell” and hit enter to execute “Shell Command: Install ‘code’ command in PATH”. You will be prompted to allow Administrator privileges. Click OK to continue.

Step 4: Using iOS Simulators in Xcode

Now you’re all set up to create React Native projects, but you need to set up device simulators before you can actually run apps on your machine. First, you need to make Xcode accessible to the command line. Open Xcode and go to Xcode -> Preferences -> Locations. Click on the Command Line Tools dropdown and select the version of Xcode you installed.

To see which device simulator will open by default, click Xcode -> Open Developer Tool -> Simulator.

If you would like to change the default simulator, click on the current simulator and go to File -> Open Simulator -> iOS XX.X and choose a device.

Step 5: Using Android Emulators in Android Studio

After installing Android Studio with all the default options from the installation wizard, you need to make the Android device emulators are configured correctly and accessible via the command line. In the Android Studio menu bar, go to Android Studio -> Preferences ->Appearance & Behavior -> System Settings -> Android SDK. Click the SDK tools tab and make sure the boxes next to Android SDK Build-Tools, Android Emulator, and Android SDK Platform-Tools are checked. If not, check the boxes and click Apply.

In the SDK Platforms tab, you can also choose which versions of the Android operating system you plan to install on your emulators. For now, you can choose the latest version.

Next, create an environment variable for the Android SDK by running these commands in your terminal:

[ -d "$HOME/Library/Android/sdk" ] && ANDROID_SDK=$HOME/Library/Android/sdk || ANDROID_SDK=$HOME/Android/Sdk
echo "export ANDROID_SDK=$ANDROID_SDK" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`

You also need to add platform-tools to the path:

echo "export PATH=$HOME/Library/Android/sdk/platform-tools:\$PATH" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`

Reload the path environment variables by either opening a new terminal or running this line of code in your terminal:

source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`

Now run the adb command to verify that everything is set up correctly. You should see a screen that looks like this:

The next step is to set up device emulators in Android Studio. On the welcome screen, click More Actions -> Virtual Device Manager.

On my machine, a Google Pixel 3a was already installed by default. If you want to test on other devices, you can click Create Device and use the wizard to set up more emulators. When you’re finished, click the play button to launch the emulator.

Step 6: Create your first app using Expo

The easiest way to get started with React Native is using Expo. First you’ll need to install expo-cli . This is an interface for accessing all the Expo tools that will be needed for every React Native project, so add the -g flag to install it globally:

npm install -g expo-cli

When the installation finishes, it’s time to create your first app!

expo init my-react-native-project

Hit Enter to accept the default options, then wait for it to finish setting up your project. In the terminal, navigate to your project root, then open it in VS Code using the following commands:

cd my-react-native-project
code .

If you’ve done everything correctly, this will launch VS Code and open your React Native project. In your project terminal, type expo start to start the expo server.

After the expo server starts, you can press i to open your app on the iOS simulator, and a to open it on the Android device. Congratulations, you’re all set up and ready to start coding!