How to set up MacOS for React Native development and maximum productivity
Tags: tutorial, reactnative, productivity, mobile
Published: 2023-05-02 23:24:58

After formatting my Mac, I set it up for my personal use and development workflow. I enjoy using various apps to enhance my productivity, so this time I decided to create a tutorial and share it with everyone.

## Table of contents
- [Dependencies](#dependencies)
- [Terminal](#terminal)
- [React Native environment](#react-native-environment)
  * [iOS](#ios)
  * [Android](#android)
  * [Flipper](#flipper)
  * [Expo](#expo)
- [Other apps](#other-apps)

Before starting I install three essential apps that help me with everything else:
- Brave (browser) - Tks to my coworker Fig for the recommendation!
- Notion (notes)
- Raycast (launcher)

**Raycast** is my favorite one, as it has features that help me a lot with productivity and organization. I particularly enjoy the Window Manager, Quicklinks and Clipboard History built-in functionalities, and there are many extensions you can install on it. Here are some of the ones I use:
- [CPF/CNPJ Generator](https://www.raycast.com/gstvds/cpf-cnpj-generator) (Brazilian documents)
- [Google Search](https://www.raycast.com/mblode/google-search)
- [Image Modification](https://www.raycast.com/HelloImSteven/sips)
- [Color Picker](https://www.raycast.com/thomas/color-picker)
- [Visual Studio Code - Project Manager](https://www.raycast.com/MarkusLanger/vscode-project-manager)

## Dependencies
After that, I start setting up the development environment installing some dependencies:
- Node.js

For install Node.js, I like to use the **n** node version manager.
To install **n** run:
```zsh
curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n
bash n lts
npm install -g n
```
To verify if the installation succeeds run:
```zsh
node -v
npm -v
n --version
```
- Homebrew

To install Homebrew run:
```zsh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
- Git and GitHub CLI

To install Git run:
```zsh
brew install git
```
To install the GitHub CLI run:
```zsh
brew install gh
```
- Watchman

To install Watchman run:
```zsh
brew install watchman
```
- Yarn

To install Yarn run:
```zsh
npm install --global yarn
```

## Terminal
After this, I like to configure my terminal. 

For a long time, I used the [Hyper](https://hyper.is/) terminal, but this time, I decided to give a chance for [Warp](https://www.warp.dev/). So far, I've really liked it. If you want to try it too, download it from their website, and install it like any other app. 

One "disadvantage” of Warp is that you still can't use the [Fig.io](http://fig.io/) command line helper with it. However, Warp already has many of Fig.io features built-in.

In my terminal, I like to use the **Hack Nerd Font** and **Starship** custom prompt. If you want to use them too, download the font on this website:

[Nerd Fonts Downloads](https://www.nerdfonts.com/font-downloads)

Extract the files, select all .ttf files and open.

In Warp, go to Settings → Appearance → Text and select the Hack Nerd Font on the Terminal font input.

To install Starship, follow this simple guide in their documentation:
[Starship Installation Guide](https://starship.rs/guide/#%F0%9F%9A%80-installation)
> **_NOTE:_**  The default Warp shell is the Zsh. So, in Step 2 to configure Starship, choose the Zsh option.

Warp comes with some default themes, which you can choose by opening the command palette with **Command + P** and searching for **'Open Theme Picker'**. However, I prefer to use the same theme that I use in my VSCode, which is the [Catppuccin Mocha](https://github.com/catppuccin/warp).

The final result is as follows:
![Warp terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjdduwx1pwvaya97c0ur.png)

## React Native environment
Now it's time to configure the React Native environment. While I'll describe the main steps here, it's important to refer to the [React Native documentation](https://reactnative.dev/docs/environment-setup) to ensure that no additional configurations or different steps are required.

### iOS
- Update Ruby

MacOS 13.2 is shipped with Ruby 2.6.10, which is **not** what is required by this version of React Native (2.7.6). 

The easiest approach I found is to update Ruby using the **RVM Ruby version manager**:
```zsh
curl -sSL https://raw.githubusercontent.com/rvm/rvm/master/binscripts/rvm-installer | bash -s stable
rvm install ruby@latest
```
Set the ruby default, replacing the X.X.X with the installed version:
```zsh
rvm use ruby-X.X.X --default
```
- Install CocoaPods
```zsh
sudo gem install cocoapods
```
- Install Xcode

Download on the App Store.

### Android
- Install the JDK 11 (LTS)

Download the .dmg file, and follow the installer steps.
[Mac Apple Silicon JDK 11 Download](https://www.azul.com/downloads/?version=java-11-lts&os=macos&architecture=arm-64-bit&package=jdk#zulu)
[Mac Intel JDK 11 Download](https://www.azul.com/downloads/?version=java-11-lts&os=macos&architecture=x86-64-bit&package=jdk#zulu)

Verify if the installation succeeds:
```zsh
java -version
```
Create a folder to install the Android SDK. I like to create on ~/Android and named it as Sdk:
```zsh
mkdir ~/Android/Sdk
```
Add the following lines to your ~/.zshrc file:
```
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
export ANDROID_HOME=~/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
```
> **_NOTE:_**  Make sure of the variables JAVA_HOME (path where you installed the JDK) and ANDROID_HOME (path of the folder you created to install the Android SDK).

- Download Android Studio

Download and execute the .dmg file:
[Android Studio Download](https://developer.android.com/studio)

After installing Android Studio, the first time you open it you will need to make some configurations.

If the first screen asks if you want to import settings, choose **"Do not import"** and click **OK**.

After that, it should ask for the type of installation. Choose the **Custom** option.

Then, it should ask you to select the **JDK path**, make sure to choose the path you used in the **JAVA_HOME** variable previously.

After selecting the JDK path, Android Studio should ask for the theme.

After that, it should ask what you want to install and the path to install the Android SDK. Check all options and in the path, **select the folder you created earlier** (in my case it was /Users/ambegossi/Android/Sdk).
![Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfryg5tjw01kqt33uoxx.png)

If everything is correct, just click on **Next** and then on **Finish** on the next screen.

### Flipper
Flipper is a platform for debugging React Native apps. It's nice to visualize, inspect, and control your apps from a desktop interface. 

Download the .dmg file on the [official website](https://fbflipper.com) and install it like any other app.

### Expo
At the time of this publication, the Expo Go app from Expo is not yet supported by the new Apple chips. So I had to install Rosetta 2 so my apps wouldn't crash as soon as I opened them in the simulator.

To install Rosetta 2 run:
```
softwareupdate --install-rosetta --agree-to-license
```

## Other apps
There are some other apps that I use and always install after formatting my computer. They are:
- VSCode
- AltTab (Windows alt-tab on macOS)
- Spark Mail
- Cron Calendar

These last two, I thank my coworker Vini for the recommendation.

If this post helped you, please show your support by liking and comment below if you have any suggestions 😉