Set up a mobile app with React Native and Expo in 10 minutes

Getting started with mobile development is much easier than you think.

Whether you're just beginning as a developer, or want to expand from web apps into mobile, React Native + Expo is a great place to start for your first mobile app project.

I'm currently building my first mobile app with these tools, and I've written the guide that I wanted when I started.

Today we're going to get our first app up and running in 10 minutes (probably less) and we'll be using:

React Native
The Expo framework
A phone to preview and test our app (optional)
A virtual device to test our app (optional)

You'll need to have Node 12 LTS or above installed, and it will be helpful if you are familiar with running commands from the command line/terminal.

We'll start off with an overview of React Native and Expo and then set up our app.

So, what is React Native?

React Native is a framework for building 'modern hybrid' mobile apps. What does that mean?

Traditionally, creating an app involves writing two versions, one for iOS (written in Swift or Objective-C) and one for Android (written in Kotlin or Java). React Native lets us use a framework (in this case React) to create cross-platform apps just by writing javascript.

We use React Native components to describe the appearance of the UI, and at runtime on the mobile device running the app they are created as 'native views' (these are the specific UI building blocks for iOS or Android).

For example, we write the React Native component <Text> to display text, and this gets converted to the native <TextView> on Android and <UITextView> on iOS. The user experience and UI performs just like a traditional mobile app.

The core components provided by React Native are all focused on UI elements such as text, modals, buttons and lists. There is also a directory of community-created libraries that can be used to incorporate functionality such as integrated payment, camera access and more.

What is Expo?

Expo is a set of tools - a wrapper - built around React Native to help with the development, build and deployment of apps.

Why do we need an extra layer, can't we just start with React Native? Well, it simplifies many areas of the building, testing and publishing process and lets us concentrate on making a great app instead of worrying about configuration.

Some benefits we'll get by using Expo are:

We can develop in whichever code editor we prefer, rather than needing to get familiar with Android Studio or XCode.
We don't need to consider separate specific iOS or Android settings.
We can more easily test our app on physical and virtual devices.

Other benefits include:

Access to ready-made cross-platform components for device interaction such as pedometer, accelerometer, camera and authentication.
The ability to share an app with anyone via a link - this is great for testing.
Text and image updates can be made to an app published on the iOS / Android stores without needing to go through re-approval.

I personally chose to use Expo because I need to develop on a Windows machine and test on a physical iOS device, which is not possible using React Native alone.

Practical setup

So now we know more about what we're using, let's get started:

Setup

There are two things we need to get started with Expo:

The expo command line interface (CLI). We'll use this to access Expo tools to initialize, start and debug our app. Install this via the cmd line / terminal:
```
npm install --global expo-cli
```
The Expo Go app. Download this on your mobile phone from the Apple or Google Play store (it's free). The logo looks like this:

Our code will be served to and run inside the Expo Go app, which allows us to preview and test on a physical device.

Create a project

We're going to be using the Expo 'managed workflow'. This is the simple way to get started and provides the benefits of Expo outlined above.

Let's open the command line/terminal and create a new expo project using:

expo init exampleApp

We'll choose 'basic' when asked which template to use:

This will create a folder with the basic project structure that you may be familiar with if you come from a web development background. This includes node_modules, a package.json file and a convenient example to get us started.

Run the app

So now we've created the project, let's get it running. On the command line, switch to the folder just created using:

cd exampleApp

Next, we start the development server using:

expo start

(or use npm start, if you prefer).

This launches the Expo Development Server and the Metro Bundler, which work together to get compiled javascript served to the Expo Go app (so that we can view the app on our phone).

Assuming everything worked, the metro bundler startup information should display in the cmd line/terminal, followed by a QR code.

The Expo Developer Tools should also launch automatically in a browser window, and look something like this:

If Expo Developer Tools doesn't open automatically, the link can be found from the output on the command line/terminal. Copy and paste the link into a browser window to open the Tools manually, it will look something like:

"Developer tools running on localhost:19002"

Take a look

Now, let's preview our newly created app.

We can choose how the metro bundler communicates with the Expo Go app on our phone. From the sidebar in the Expo Development Tools, choose 'LAN' if your computer and phone are on the same wifi network, otherwise choose 'Tunnel'.

On an iPhone or iPad, use the camera to scan the QR code showing in the Expo Dev tools browser window (or the one showing in the cmd line/terminal - they are the same).

On an Android phone, open the Expo Go app and go to ‘projects > scan QR code’ [disclaimer - I don't have an Android phone so I'm trusting the Expo docs here].

You should see a message in Expo Developer Tools that says 'Building JavaScript bundle', and a percentage indicator will appear on the phone itself.

This may take a few moments to complete, and then you should see your app.

Ta da!

Aside: choosing the 'Tunnel' connection sets up a tunnel process that allows any device outside the LAN access to your running app. If we sent the app link to a friend, they could install Expo Go on their phone and then view our exampleApp for as long we kept the development server running (that's the one we just started using expo start).

In fact, Expo provides a handy option to send someone a link to your app from the sidebar in Developer Tools:

Edit and Debug

Our final task is to make a simple change to our app. Let's open the project in our editor of choice and change the text of app.js. I changed the text to "Hello world", how original:

Expo supports 'hot reloading', which means we can keep the app running in Expo Go on our phone and will immediately see the results of any changes we make to the code.

In practice this works great most of the time, but for more complex edits it is sometimes necessary to close Expo Go and re-scan the QR code to make sure the latest version is being used.

You may notice that I've added a console log statement as part of my edit above. This is to demonstrate how we have access to the console from within Expo Developer Tools. Click the double screen icon at the top right of Developer Tools to split the window and show the console in the right hand pane:

You now have access to console messages in Developer Tools, if you prefer to view them there.

No phone, no problem!

Remember at the beginning I said that a phone would be optional? If you don't have a physical device for testing don't worry, you still have a couple of options.

It's possible to run an emulator that runs a virtual phone on your machine, and then install Expo Go on that for testing.

On a mac, we can emulate either an iOS device (using Xcode) or an Android device (using Android Studio). On Windows we can emulate an Android device but it's not possible to emulate an iOS device.

See iOS simulator instructions and Android emulator instructions for information on how to set up emulated devices.

If none of the above options are available to you, you can use a web tool called Snack. This is a handy web environment for creating, testing and saving React Native + Expo apps. Head to https://snack.expo.dev to view and play with an example app and preview it on an iOS and Android simulator.

You can write and test your own code, but will need to create an Expo account (it's free) to save your 'snack', share a link or get embed code.

Next Steps

Congratulations - we did it!

I hope I delivered on my promise to get you up and running with React Native in 10 minutes. Please let me know if you have any feedback.

If you found this fun and want to carry on, here are some great resources to help you continue on your app-making journey:

If you're interested in React Native, web development and how to keep consistent and motivated when working on side projects, come and chat with me on Twitter.

Attributions

iPhone background vector created by rawpixel.com - www.freepik.com
All other images my own.