Tom Ordonez

Data Science, Machine Learning, Growing Teams

Install React Native on Mac


Follow this simple tutorial to install React Native on Mac.

Install React Native on Mac

Install Node

Download the Node installer from here.

When I published this tutorial 12/17/17. The current Node version was 8.9.3 LTS.

This package will install:

  • Node.js v8.9.3 to /usr/local/bin/node
  • npm v5.5.1 to /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH

$ echo $PATH

/usr/local/bin

Check node version

$ node -v
v8.9.3

$ npm -v
5.5.1

Fixing npm permissions

Fixing npm permissions as seen here.

$ npm config get prefix
/usr/local

$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

Install create-react-native-app

Go to the official react native docs here.

"Create React Native App does not currently work with npm v5. We strongly recommend using npm v3, v4, or a recent version of Yarn".

Install Yarn:

Follow the official Yarn doc here

$ brew install yarn --without-node

==> Downloading https://yarnpkg.com/downloads/1.3.2/yarn-v1.3.2.tar.gz
==> Downloading from https://github.com/yarnpkg/yarn/releases/download/v1.3.2/yarn-v1.3.2.tar.gz
/usr/local/Cellar/yarn/1.3.2: 14 files, 3.9MB, built in 8 seconds

Install create-react-native-app using Yarn

$ yarn global add create-react-native-app

yarn global v1.3.2
[1/4] πŸ”  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] πŸ”—  Linking dependencies...
[4/4] πŸ“ƒ  Building fresh packages...
success Installed "[email protected]" with binaries:
  - create-react-native-app

Create a react native app

$ create-react-native-app AwesomeProject

Creating a new React Native app in /Users/../AwesomeProject.

Output

Using package manager as yarnpkg with yarn interface.

Installing packages. This might take a couple minutes.

Installing react-native-scripts...

yarn add v1.3.2

info No lockfile found.

[1/4] πŸ” Resolving packages...

warning react-native-scripts > xdl > auth0-js > xtend > [email protected]:

[2/4] 🚚 Fetching packages...

[3/4] πŸ”— Linking dependencies...

warning "react-native-scripts > xdl > [email protected]" has unmet peer dependency "[email protected]^0.14.0 || ^15.0.0-0 || ^16.0.0-0".

[4/4] πŸ“ƒ Building fresh packages...

success Saved lockfile.

success Saved 379 new dependencies.

β”œβ”€ @expo/[email protected]

β”œβ”€ @expo/[email protected]

β”œβ”€ @expo/[email protected]

β”œβ”€ @expo/[email protected]

β”œβ”€ @expo/[email protected]

β”œβ”€ @segment/[email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

β”œβ”€ [email protected]

└─ [email protected]

✨ Done in 30.28s.

Installing dependencies using yarn...

yarn install v1.3.2

[1/4] πŸ” Resolving packages...

warning react-native > [email protected]: connect 2.x series is deprecated

[2/4] 🚚 Fetching packages...

[3/4] πŸ”— Linking dependencies...

warning "jest-expo > [email protected]" has unmet peer dependency "[email protected]^6.0.0 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0".

[4/4] πŸ“ƒ Building fresh packages...

success Saved lockfile.

✨ Done in 73.83s.

Success! Created AwesomeProject at /Users/.../AwesomeProject

Inside that directory, you can run several commands:

yarn start

Starts the development server so you can open your app in the Expo

app on your phone.

yarn run ios

(Mac only, requires Xcode)

Starts the development server and loads your app in an iOS simulator.

yarn run android

(Requires Android build tools)

Starts the development server and loads your app on a connected Android

device or emulator.

yarn test

Starts the test runner.

yarn run eject

Removes this tool and copies build dependencies, configuration files

and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd AwesomeProject

yarn start

Happy hacking!

Start the app

$ cd AwesomeProject

$ yarn start
yarn run v1.3.2

Output Error Unable to start server

$ react-native-scripts start

23:15:49: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This page had 2 solutions:

  1. Run the sudo sysctl commands or
  2. Install Watchman.

Here is more info about Watchman:

Watchman is a file watching service open sourced by Facebook.

"Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change."

The solution with the most thumbs up is this one:

$ sudo sysctl -w kern.maxfiles=5242880
kern.maxfiles: 12288 -> 5242880

$ sudo sysctl -w kern.maxfilesperproc=524288
kern.maxfilesperproc: 10240 -> 524288

Here is more info about this command:

sysctl is used to get or set kernel state.

Here is more info about "tuning kernel limits":

It says that "The kern.maxfiles sysctl(8) variable can be raised or lowered based upon system requirements. This variable indicates the maximum number of file descriptors on the system"

Here is some more info about this:

"By default, the maximum number of files that Mac OS X can open is set to 12,288 and the maximum number of files a given process can open is 10,240."

It also says that if you reboot, that it will go back to the original values. Although there is a workaround as seen on that post.

Start development server

$ yarn start

It will show this output:

yarn run v1.3.2
$ react-native-scripts start
12:11:00: Starting packager...
Packager started!

To view your app with live reloading, point the Expo app to this QR code.
You'll find the QR scanner on the Projects tab of the app.

GIANT QR CODE HERE
...

Or enter this address in the Expo app's search bar:

exp://10.0.0.10:19000

Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

β€Ί Press a to open Android device or emulator, or i to open iOS emulator.
β€Ί Press q to display QR code.
β€Ί Press r to restart packager, or R to restart packager and clear cache.
β€Ί Press d to toggle development mode. (current mode: development)

Install the Expo client app

As seen in the Expo doc here:

Download the app on your phone. Then scan the QR code on your terminal.

Back in the Terminal now says:

12:17:51: Finished building JavaScript bundle in 69956ms
12:17:58: Running app on Tom O in development mode

To stop use Ctrl+C.

12:36:05: Stopping packager...
12:36:06: Packager stopped.

Next steps

I will follow with another tutorial to build an app. But for now you have a setup, which is often where most people drop out.

Got a React Native question? Please comment below