Ultimate Guide to Setup Rn Development Environment (MacOS)

When we try to setup our new device for a particular development, we often need to open so many browser tabs to install different tools. No need to worry in this case, I am holding your back. We will go through every steps to make our mac development ready.

Step 1: Homebrew

Homebrew is said to be the missing package manager for mac. We will install most of the applications we need using Homebrew. Now we are going to install Homebrew, copy this command and paste it to your terminal.

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

It will take some time, please be patient.

Step 2: Xcode

Xcode is an all in one suite for mac development. We will need Xcode to build iOS application. Install xcode from App Store and run after installation.

Step 3: Cocoapods

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over 93 thousand libraries and is used in over 3 million apps. CocoaPods can help you scale your projects elegantly. We need cocoapods to install iOS depedencies for react native. To install cocoapods run:

brew install cocoapods

Step 4: Java

We are going to install OpenJDk called Azul Zulu. The Zulu OpenJDK distribution offers JDKs for both Intel and M1 Macs. This will make sure your builds are faster on M1 Macs compared to using an Intel-based JDK. To install run:

brew tap homebrew/cask-versions
brew install --cask zulu11

Now Zulu 11 is installed and we need to populate our path variable with the jdk path we are going to use. Run open -e ~/.zprofile ( if .zprofile is not available run touch ~/.zprofile first ) and paste these lines:

#ZULU Java Home (ARM64)
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

Now we need to source the zprofile by running source ~/.zprofile.

Step 5: Android Studio

Android Studio is the official Integrated Development Environment (IDE) for Android app development. To install head over to the download page and download the app. After downloading Android Studio open the .dmg file and move Android Studioapplication to Application folder. And now you can open Android Studio from the Launchpad. Open Android studio and choose Customize installation. Make sure you select the zulu11 jdk path when the option come. Note that you can change the jdk path later also. And now open zprofile again by running open -e ~/.zprofile and paste these lines:

# android variables
export ANDROID_HOME=$HOME/Library/Android/sdk
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

Now source the zprofile by running source ~/.zprofile

Step 6: NodeJS & Watchman

NodeJS, the javascript runtime library. We are going to manage nodejs installation using nvm. Also we are going to install Watchman, a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance. To install:

# android variables
brew install nvm
brew install watchman

After installing nvm, create .nvm directory by running mkdir -p ~/.nvm. Now run open -e ~/.zprofile and paste these lines:

#nvm
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

Now source the zprofile by running source ~/.zprofile. We need to install nodejs and we are going to install the lts version (v16.x.x) of nodejs. To install run:

nvm install --lts Gallium
nvm alias default $(node --version)

We are going to use yarn as a package manager. To install yarn run:

npm i -g yarn

Step 7: Visual studio code

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. We will use Visual Studio Code as our default code editor. To install run:

brew install --cask visual-studio-code

Now vscode is installed. We will need some extensions such as prettier, eslint. We can always install to our preferences. For now we are going to install these two only.

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint

Step 8: Git ~ ssh

Now we are going to setup ssh key for GitHub so that we don’t need to authenticate every time (for private repos). First we will create a ssh key and then we will add the public key to our GitHub profile. To create a ssh key run:

ssh-keygen -t ed25519 -C "your email here"

It will prompt to give a path (default path: /Users/your-user-name/.ssh/id_ed25519) and a passphrase. For now we can keep the path as default and an empty passphrase (Though it is not recomended 😉). Now we need to copy the public key. to get the public key run:

cat ~/.ssh/id_ed25519.pub

Copy the output and head over to GitHub profile setting (Click here). Give a title to the key and paste the copied contents.

Step 9: Terminal (Optional)

Default Terminal is boring 🤫. We are going to make our terminal fun. I prefer warp as a default terminal and use it as a daily driver. To learn more about warp head over to warp.dev. To install:

brew install --cask warp

Finally we are done!! Happy hacking..!!! 😊