link What is this?

This is a book about cross-platform mobile app development. The apps we develop are written with React Native.

link What is React Native?

React Native allows developers to build native mobile apps using Javascript and React (source).

link Why do we use React Native?

React Native lets us build apps faster. We can utlize Javascript as source code for both platforms (iOS, Android and web).

link Who made React Native?

Facebook made React Native's open source in March 2015 (source).

link Where can I get started?

Before starting this project, I would recommend these tutorials on the basics of Javascript, React and React Native.

Ready? Let's get started.

link Course Workflow

During this course, we highlight the quality-driven workflow of mobile developers. Each app we build is tested to meet our project requirements.

We use a special workflow to accomplish this that enabled dual programming of the client server. Click here for an overview of the course workflow.

link Initial Setup - macOS

Download Homebrew, the missing package manager for macOS (or Linux):

/usr/bin/ruby -e "$(curl -fsSL"

Download this Brewfile to automatically install the following tools:

cd ~
curl -LO

Run the brewfile to install the tools:

brew bundle

Finally, download Xcode.

link Initial Setup - Windows 10


  • Node
  • Npm or Yarn package managers installed on your machine

link Getting Started

Download and install the latest version of Android Studio

Next install Expo-Cli globally by running:

npm install -g expo-cli


yarn add -g expo-cli

Once both have finished installing we need to get our simulators ready to work with expo.

Setting Up Our Simulators

Launch Android Studio and go through the initial setup steps.

Once you're done with all of the initial setup, create a new project in Android Studio.

Builder Book

Next we need to head into the AVD Manager to install our devices and Android Operating System.

Builder Book

Now we need to install a virtual device.
Select the create virtual device button.

Builder Book

We now have to choose a device to run our application on, I'm going to use a Pixel 3 XL here, but feel free to use any other device.

Builder Book

Now it's time to install the OS of our choosing on our device. I'm going to use Android Pie but you can use any of your choosing above version Oreo.

Builder Book

Download the os version. Once complete we can close the prompt and our simulator will almost be ready to go.

link Linking our simulator to work on our system

From Android Studio, select File, then Settings... Under the Appearance & Behavior category, then under the System Settings category, select the Android SDK page.

Select the SDK Platforms tab, if it’s not selected by default. Select the Show Package Details checkbox. Under Android API 28, check the boxes for Intel x86 Atom System Image and Intel x86 Atom_64 System Image.

Builder Book

Select the SDK Tools tab. Check the boxes next to Android SDK Platform-Tools and Intel x86 Emulator Accelerator (HAXM installer). Click OK, then click OK again.

Builder Book

Accept all License Agreements and Recommended settings. If prompted for administrative access, login with an authorized account. Click Finish, then click Finish again.

Now we're ready to go!

From Android Studio, select Tools then AVD Manager. To the right of your installed device, press the green Play arrow to launch the Android emulator.

Builder Book

Once the device boots up, we can close just the Android Studio window. We can now run our Android Device from the Expo Client!

-- Thanks to Andre Pato (@anpato) for adding these instructions.

link Initial Setup - continued...

link Configure VS Code

Open VS Code and familiarize yourself with the code editor's interface.

  1. Open the Command Palette (⇧⌘P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.

  2. Select the first dropdown menu option: Install 'code' command in PATH.

  3. Open the Extensions Panel (⇧⌘X) and search for "eslint".

  4. Select "ESLint by Dirk Baeumer" - click "Install"

For more information about ESLint, visit the extension's homepage.

link Configure Git

We want to set a default name an email address that Git will use to identify our commits.

git config --global "YOUR NAME HERE"
git config --global YOUR_EMAIL@DOMAIN.COM

We will also tell Git to use VS Code as our default editor:

git config --global core.editor "code --wait"

link Configure Bash Profile

We would like to install global npm packages. To do so, be sure to edit your bash_profile:

touch ~/.npm-global
touch ~/.bash_profile
code ~/.bash_profile

The third command (code ~/.bash_profile) should open your bash_profile in VS Code. If it does not, be sure to re-try the step labelled "Configure VS Code" and restart terminal.

Paste the following into your bash_profile at the very bottom of the file:

export PATH=~/.npm-global/bin:$PATH

Then reload your bash_profile config file:

source ~/.bash_profile

link Configure ZSH Profile

Open your ~/.zshrc file, and insert the following at the very bottom:

if [ -f ~/.bash_profile ]; then 
    . ~/.bash_profile;

Then reload your zsh config file:

source ~/.zshrc

link Configure Postgres

Try running the PostgreSQL command line client:


You may get an error psql: FATAL: database "YOUR-USERNAME" does not exist.

To fix this run:

createdb `whoami`

To exit the postgres interface run:


link Setup Complete! Continue to Chapter One.