Chapter 1. Setup and Project Initialisation

Introduction

React Native is a JavaScript framework for building native cross platform mobile apps. Expo is a complementary toolkit for React Native. It offers many additional APIs and is very helpful for app development.

Setup Expo Environment

With Expo CLI, you just need a recent version of Node.js. You can download the latest version of Node JS for nodejs.org. Once Node.js is installed on the system, npm commands would work.

Install the Expo CLI by using the following command.

//Install Expo-cli from command line tools
npm install -g expo-cli

Project Initialisation

You can simply initialise your project with the following command:

//Initalizes your project
expo init TUC

The Expo CLI will ask you to choose a template. In this tutorial, we will select the blank template and write the code from scratch. These templates are useful, for example you can select the "tabs" one, if your app design has bottom tabs and you want to implement it by default in your app.

After project is created, you can navigate to the project directory.

//Navigate to project directory
cd tucT

Start the Expo Server

You can start the expo server with the following command.

expo start   //or npm start

Expo CLI starts Metro Bundler, which is an HTTP server that compiles the JavaScript code of our app using Babel and serves it to the Expo app. It also pops up Expo Dev Tools, a graphical interface for Expo CLI.

Opening the app on phone

Install the Expo app on your device and scan the QR code you see in the terminal or in Expo Dev Tools.
Link the Expo App for Android and iOS.

If you are using a simulator or emulator, you may find the following Expo CLI keyboard shortcuts to be useful:

Pressing i will open in an iOS simulator.
Pressing a will open in an Android emulator or connected device.
Pressing w will open in your browser. Expo supports all major browsers.

React Native App Tutorial