Expo claims to be the fastest way to build an app. In conjunction with React Native’s flexibility and extensibility it creates a great toolkit for mobile app developers.

In the one of the previous articles I have answered the question “Why is React Native worth learning?” and published the list with resources I think are great for React Native beginners. Now it’s time to go further and in my opinion – make our lives easier – and do a deep dive into Expo.

Introduction

What exactly Expo is? It’s a set of tools built for React Native, giving you a nice layer of abstraction over some common, mobile-development tasks and APIs (e.g. camera, push notifications, ARKit, location services, file system), but for me the most important and nice is that you can see your app on your device or try it in the browser within minutes from creating the project!

It also provides some nice and consistent GUI and command line tool for launching the bundler, publishing app, gathering logs from device and more.

What do you need to get started?

  • Linux/macOS/Windows powered computer
  • NodeJS installed with NPM version 4
  • Expo Client installed on your mobile device
  • Expo command line tool

Don’t worry, we’ll get it all covered in a few minutes! πŸ™‚

Prerequisites

Let’s make sure your environment is ready to start coding by installing Node.js runtime and Expo console client.

Install Node.js

I assume you’re already familiar with command line and I’ll cover Node.js installation instructions on macOS. If you’re a Windows user please check this guide. You can refer to the following guide for a Linux installation, but I encourage you to use your Linux distro package manager (e.g. apt for Ubuntu).

I’ll use HomebrewΒ and the whole installation is as simple as:

brew install node

After running the command above you should already have latest Node.js version installed and let’s verify it by running:

node -v

This command should produce the output like:

v9.5.0

Downgrade NPM to version 4

This is very important step. Expo does not work properly with NPM 5 yet.

npm install -g npm@4

In the command above we’re telling NPM to install its latest stable version from the 4.* branch. And verify the command ran successfully:

npm -v

You should see the following version installed:

4.6.1

Install Expo command line tool

As in we already have Node.js and NPM installed we can proceed with installation of the Expo CLI tool and it’s just one following command to execute:

npm install exp --global

Again, after installation let’s make sure that everything is done in a correct way:

exp

And the output should look similar to:

Usage: exp [options] [command]


Options:

 -V, --version output the version number
 -o, --output [format] Output format. pretty (default), raw
 -h, --help output usage information

We’re now ready to progress with the setup.

Create Expo.io account

The last thing to get started is and Expo.io account. It’ll allow us to enjoy the full power of working with Expo, including previewing the app on device and publishing to the stores.

Go to the Expo Sign up site and create an account. Feel free to fill the form or use Github provider.

Create new Expo project

To create a new project go to your command line and execute the following command. Please note that my-app is your new app name:

exp init my-app

On the first exp tool execution you’ll be asked to log in using your credentials that you entered in the previous step.

After successful login your project is ready to be opened in your favourite editor and you can start coding.

Preview your app on the device

To see your new app on your physical device you need to install Expo app from Google Play Store for Android or App Store for iOS.

After installing the app you can run the packager from the command line:

exp start /Users/msojda/Development/_RN/my-app

Please note you have to replace the path to the full path to your application folder. Then you should see a success message and a QR code to scan with the app.

After scanning the code your app should automatically reload, you should see logs in the console and your app on the mobile device screen:

Happy coding! πŸ™‚

In the next article I’ll show advanced usage of Expo APIs and how to take advantage of using Expo over raw React Native project.

What’s your experience with React Native development? Have you tried Expo before? Don’t forget to let me know in comments!