In this tutorial, we will learn to develop a react native app with Expo toolkit.
- Chapter 1. Setup and Project Initialisation
- Chapter 2. Structure and Views
- Chapter 3. React Component & Navigation
- Chapter 4. Working with APIs
- Chapter 5. React Styling and Design
- Chapter 6. Redux
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-cliProject Initialisation
//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 tucTStart the Expo Server
You can start the expo server with the following command.
expo start //or npm startExpo 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.
