Guide to setting up the React Native development environment.

react-native-setup.md

React Native Setup Guide

This guide walks through how to set up your machine to develop a React Native app.

The tl;dr is:

• Install node.js
• Install yarn
• Install React Native Debugger
• Install the Expo mobile app on your device
• Install Create React Native App
• Use Create React Native App to scaffold and start a new app
• Open Expo and scan the QR code to reveal your new app.

Install node.js

The first thing to do is to ensure that you have node.js installed. At the time of writing, node 8 is the latest stable release, and is recommended.

If you don't have node installed, head over to the download page to download and install a copy.

Install yarn

React Native supports both npm4 and yarn. Node 8, however, ships with npm5 - this is currently unsupported. To get around this, we'll use yarn, which is generally faster and more reliable than any version of npm.

To install yarn, go to the download page and find the installation instructions for your OS.

Install React Native Debugger

The next tool we need to install is React Native Debugger. This allows you to connect to your running app to debug and inspect it.

To install, go to the releases page and download the correct version for your OS.

Install the Expo mobile app

The Expo mobile app allows you to connect to and view your app on your mobile device, whilst it is being developed on your local machine. To install it, go to the App Store or Google Play Store on your device, and search for 'Expo'. If you are reading this on your mobile device, use these links to install the iPhone and Android apps respectively.

Install Create React Native App

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code.

Install it with npm:

npm install -g create-react-native-app

All being well, you should now have installed everything you need to get started.

Scaffold and run an app

On your local machine, open a terminal window.

Run:

create-react-native-app my-sample-app

Create React Native App should busy itself by creating your app's development workspace, and installing all dependencies with yarn.

Once it is done, run:

cd my-sample-app
yarn start

You should see a QR code generated.

Next, open the React Native Debugger. By default, it is listening on the wrong port - fix this with the following:

• Select the 'Debugger' menu, and choose 'New Window'
• Ensure the port is set to 19001 and press 'Confirm'

The React Native Debugger should now be listening on the correct port.

Finally, open the Expo app on your mobile device, and scan the QR code.

The newly scaffolded app should open on your device, and should be connected to the React Native Debugger.

Troubleshooting

Expo app can't connect to development server

• Ensure your computer and device are on the same network.
• If you are on Windows, and have VirtualBox or VMWare installed, yarn start might not work properly. Follow these instructions to solve.