React Native is a framework for building native iOS and Android apps using JavaScript. It builds upon the foundations laid by React, allowing you to build an app in a declarative way - using JSX, you inform React Native of your intentions (I’d like a button here, please) and the framework takes care of generating the (native) code to actually display a button to the screen.

I’ve been working happily with React Native for over a year now, and I am very happy with the results. There have been a lot of learnings along the way, which I’m going to attempt to distill into a few blog posts.

Over this mini-series, I’m going to build a simple app, Boaty. We’ll be learning how to set up your environment before building and deploying the app for testing. You can follow along or see the finished code here.

Note: the goal of this series is to document some of the additional concerns surrounding the building and deployment of a React Native app, such as app scaffolding, app icon/launch screen creation, and deployment to the App Store. It isn’t intended as a walkthough of writing React or React Native code - this is assumed knowledge. If you need to brush up on this, I’d recommend checking out the official tutorial or the notes from my own React Native training course. The series also assumes TypeScript knowledge - refer to the TypeScript documentation or the notes from my own TypeScript training course to get a good grounding here.

Without further ado, let’s dive in.

Scaffolding

There are two options for scaffolding a React Native app:

1. Using Create React Native App
2. Using the React Native CLI

The differences between the two are discussed in length here. For the purposes of this app, I’m going to advocate the second method - using the React Native CLI. This has the downsides of needing to install Xcode and Android Studio, but (IMO) the flexibility that this approach provides outweighs the cost of setting up the tooling.

Note: to build an iOS app you need Xcode, which is only available on a Mac. If you are a Windows user, you can still follow through with this guide, but will only be able to create an Android version of the app.

Installing the tools

Follow the instructions on the official setup guide to install the necessary tools (make sure to click the Building Projects with Native Code tab).

Creating the app

Open up a terminal window and run the following command:

react-native init Boaty

This will scaffold a new React Native app in a new folder Boaty.

Running the app

In your terminal, change into the new Boaty folder.

cd Boaty

You can now run the app in the iOS simulator:

react-native run-ios

Note: as of React Native 0.57.2, if you are using Xcode 10 there is a known issue that prevents the app from compiling correctly. If you see an error Build input file cannot be found: '<some-dir>/node_modules/react-native/third-party/double-conversion-1.1.6/src/strtod.cc then run the following command (this will fetch and configure the necessary third party dependencies for the project to run correctly under Xcode 10):

curl -L https://git.io/fix-rn-xcode10 | bash

Alternatively, if you have an Android device, plug it in to your computer, and enable USB Debugging. Then you can run the app on your Android device with:

react-native run-android

Tip: if you receive an error relating to ‘device not found’, check your USB cable. Some cables support charging only - you need a cable that allows data transfer as well as charging. If in doubt, use a different cable.

Reference code

You can find the reference code for this post in the part-01 tag of the GitHub repo.

Next Steps

You should now have a working React Native app, running on the iOS simulator or Android device. In part 2, we’ll learn how to set up your editing environment to improve the development experience.

---

If you’d like to learn more about building an app with TypeScript and/or React Native, I run in-person or remote workshops which walk through the fundamentals of building apps with these cutting-edge tools. If you are interested in learning more, let me know and I’d be happy to chat further!