Easiest way to develop mobile app - Introduction to Expo

8 steps introduction to Expo, Creating your first mobile application with Expo

Hello Folks, I have completed the whole Firebase Authentication series of articles where I have covered authentication using almost all the methods provided by Firebase.

read more here

Today we are shiting to altogether a new series i.e. React-Native. I will be using the Expo to cover up the react-native articles.

https://docs.expo.io/

Overview

1. Getting started with the expo by creating an account

2. Installation of the required packages globally

3. Designing the architecture of the repository and writing code

4. Running and Debugging the application on a physical device.

Getting Started

For installing the expo you can either refer to this link (https://docs.expo.io/get-started/installation/) else I can explain the process below.

First, it’s always good to create an account on the expo.io website. Although you don’t need to, I would recommend creating one. Followed by installing the “expo-cli” npm package globally in your system. expo-cli npm helps to run the expo command in the whole system which in return assists you in using all assistance provided by Expo out of the box. Run the following command to install the package globally.

yarn global add expo-cli

NOTE => Whether you are using Mac or Windows after running the above command reopen your Terminal or Powershell after closing them, otherwise your system will give a “Command Not Found” error.

Testing command globally

After reopening the terminal(for Mac users) & Powershell (windows users) run the following command to check the installation status.

expo whoami

If everything works as expected after installing the package and creating an account in expo.io you can see your email from whom you have logged in.

Creating Project

Expo provides the commands to create the boilerplate for your react-native mobile application. Run the following command to create an expo project.

expo init {name_of _the_project}

After running this command you will be prompted with some basic template options to choose as shown below.

The boilerplate templates list provided by the expo before initiating the project

Choose the required template and click “Enter”. For the sample project, I will go ahead with the “minimal” template. This will create the boilerplate with the project name as {name_of_the_project}. Your boilerplate template will have architecture like the image below.

First Expo application

Pretty simple, isn't it? Expo has accomplished all the necessary steps for you so that you can directly start writing code.

Testing & Debugging

To run the code and test it on a physical device make sure of the following requirements 

1. Expo mobile app installed on your phone. (https://apps.apple.com/us/app/expo-go/id982107779)

2. Your phone and laptop should be connected to the same internet.

Once the above requirements are fulfilled you can move inside the expo folder and run the following command.

expo start

Expo building

The expo start command will create the js bundle of your whole application and upload it on the expo server, then after scanning the expo server QR code through your phone you can download that JS bundle in your expo mobile app to run it on your phone. Expo creates a metro bundler on the localhost portal to show the building process status. In addition, you can share the application link from Metro Bundler using email and by scanning the QR code as shown in the bottom left corner of the image below.

Metro bundler running on localhost after running command expo starts inside my project

After scanning the QR code Expo will build the JS bundle of the react-native application as shown in the image below.

JS bundle building process in the Metro Bundle

Debugging

In case everything doesn’t work accordingly, there might be a few hints to debug the issues-

1. Check your phone's internet and system internet they should connect to the same IP

2. Check the Node package version it should be greater than 8

3. For Mac users, you do need Watchman and Git installed

4. For Windows users, you do need Powershell & Yarn installed

Conclusion

I have tried to make this article short and simple, trying to make you understand the installation process and getting started with Expo, so I didn’t cover any further steps in the context of the architecture and making changes in the code repository. I will cover those points in further articles.

Until next time, Have a good day

Shrey

iHateReading