Let’s see how to properly install and set up the React Native development environment on Mac.

You can use Expo CLI or React Native CLI to develop apps on mac. You can see detailed descriptions on the official website.

Let’s install Homebrew, Node.js, and Watchman first.

Homebrew

Homebrew – is a Mac package manager for installing and managing packages.

Open a terminal and run this command to check if Homebrew is installed on your system:

brew --version

You will see its version if Homebrew is already installed:

Homebrew 2.2.13 
Homebrew/homebrew-core (git revision 976650; last commit 2020-04-13)

If the version is not displayed, you may install it by command:

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

After installing, execute the command below to check Homebrew is installed well.

brew --version

If the installation was successful – you will see its version:
P.S. The installed version on your computer may differ from mine.

Homebrew 2.2.13
Homebrew/homebrew-core (git revision 976650; last commit 2020-04-13)

Node.js

React Native – is JavaScript, so we need to install Node.js for its runtime.
Node.js: https://nodejs.org/

To install Node.js, run this Homebrew command:

brew install node

After the installation is complete you should run this command to make sure Node.js is installed correctly:
P.S. Version may vary.

node -v
> v13.11.0

Along with installing Node.js, npm (Node Package Manager) is also installed. Run this command to check the npm version:

 npm -v
> 6.13.7

Watchman

Watchman – is a library from Facebook that watches certain folders or files and if they change it can initiate some actions. In React Native, Watchman keeps track of source files and if they are added or changed, it rebuilds them.
Watchman: https://facebook.github.io/watchman/

Run this command, for the Watchman install:

brew install watchman

Check the Watchman version after installation:

watchman -v 
> 4.9.0

Now we need to install React Native CLI

React Native CLI

Run this npm command below to install the React Native CLI globally:

npm install -g react-native-cli

After installation, execute the command below to check that React Native CLI is installed well.

react-native --version
> 4.6.3

Xcode

We need Xcode for IOS development.

Click the link below to download and install Xcode from App Store
Xcode: https://apps.apple.com/us/app/xcode/id497799835

After Xcode is installed successfully, you should install command line tools. Open Xcode and click “Settings” and go to the “Locations” tab. Next, you must select the latest version in the drop-down list “Command Line Tools” shown below.

CocоaPods

CocoaPods – dependency manager for developing IOS projects.
CocoaPods: https://cocoapods.org

sudo gem install cocoapods

Check the version after installation completed:

pod --version
> 1.7.5

Android Studio and JDK

Рow to install Android Studio and JDK on Mac os you will find in this post.

Create a project

Run this command to initialize a React Native project:

react-native init TestApp

Open your project folder in the terminal:

cd TestApp

Now let’s run the application in the IOS simulator:

npm run ios

or

react-native run-ios

Then you will see another terminal window after starting the app.

If you have installed everything correctly, the emulator will open and the project will start.

Let’s check it on the android simulator:

npm run android

or

react-native run-android

If after launching your application, you will see an error about an incorrectly configured Android environment, as in this screenshot:

You should run this command:

source ~/.bash_profile 

And restart the project again:

npm run android

If the error still appears, check the Android environment settings again like in this post.

Happy coding 😎