Boaty: Scaffolding a new React Native app
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.
There are two options for scaffolding a React Native app:
- Using Create React Native App
- 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
Running the app
In your terminal, change into the new
You can now run the app in the iOS simulator:
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.ccthen 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:
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.
You can find the reference code for this post in the part-01 tag of the GitHub repo.
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!