Made withStrapiClip

#2 Build a React Native Education App with Expo, Firebase, Strapi, and MySQL Step by Step Tutorial

T

TubeGuruji

Creator on the Strapi channel

Watch on YouTube ↗

30K viewsApr 30, 202311:07 runtime

Learn to build a React Native education app from scratch in this step-by-step tutorial. This guide covers the initial project setup, starting with installing Node.js and the Expo CLI globally. You'll use the `create-expo-app` command to initialize your application, explore the…

Chapters

#strapi#clip#cmscrm

Environment Setup

Node.js: The first prerequisite is to have Node.js installed on your system.
Expo CLI: Install the Expo command-line interface globally to create and manage your projects.
- npm install -g expo-cli
Expo Go App: Install the Expo Go application on your iOS or Android device. This app allows you to run and test your project directly on a physical device without a full native build.

Project Creation

To create a new React Native project with Expo, run the following command in your terminal:
- npx create-expo-app your-app-name
After creation, navigate into the project directory (cd your-app-name) and open it in your code editor (code . for VS Code).

Key Project Files

assets/: A directory to store static assets like images, fonts, and videos.
app.js: The main entry point for your application. This is where your app's code starts.
app.json: A configuration file for your app. You can define its name, version, icon, splash screen, orientation, and other metadata here.
package.json: This file lists all the project dependencies (libraries your app needs) and scripts to run tasks like starting the development server.

Running the Application

Start the server: Run expo start in your project's terminal.
Metro Bundler: This command starts the Metro development server and opens a new tab in your web browser. This page displays a QR code and logging information.
Connect Device: Open the Expo Go app on your phone and scan the QR code from the Metro Bundler page.

Important
If your computer and mobile device are on different networks, you must change the Connection type in the Metro Bundler web interface from LAN to Tunnel. This creates a public URL that allows your device to connect to your development server.

Development Workflow

Live Reloading: Expo provides a fast development experience with live reloading. When you save a change in your code, the app instantly updates on your device, allowing for a rapid feedback loop.

Tip
To increase your coding speed, install the ES7+ React/Redux/React-Native snippets extension for Visual Studio Code. It provides helpful shortcuts for generating boilerplate code for React and React Native components.

Prerequisites and Expo Setup

In this section, we are going to create the React Native application using Expo. So if you don't have Node, just install it in your system. First, go to and install this Node.js. Then if you go to this expo.dev/tools website, you will find this particular command line to install the Expo globally. Go ahead and install this npm install -g expo-cli. I already installed it, so I'm not installing it again. But if you do not have this Expo in your system, then please install that one.

As I told you, this Expo is a very fast and very easy build tool in order to create the React Native application. And once you install this, as I told you, you can run your project with the Expo Go application. First, you have to search for Expo Go on the App Store if you are using iOS or Google Play Store if you are using Android. And go ahead and install this particular application in your mobile devices, so that you can directly test your application directly in the mobile while you are doing the coding and everything.

So I will tell you how to do it. Once you do it, make sure you are ready with everything, and then we will create the application. But make sure you will install this particular Expo CLI in order to create the application.

Creating the React Native Project

Then just type on Google 'Expo create app', and it will open. You can open the first link, and here you'll find the step-by-step guide in order to create the applications. So let's copy this one and go to your folder where you want to create the application.

Open the command prompt, and once you are in the command prompt, just paste this particular link. So it's saying npx create-expo-app. Once you enter it, it will ask you the project name. So here you can write 'proceed yes' and it's asking your application name. So in this case, I will say 'education-app' and enter it. And it will download and install all the dependencies which need to be used to create this React Native application.

So it will take some few minutes. It created, and it's saying your project is ready. Right now, in order to go into your project, just run this one: cd education-app. So you will be in the project directory. And in order to open the VS Code, just type code . It will open VS Code with this project. So for this one, to create the React Native application, we are using Visual Studio Code. Okay, so if you see, our project is open in VS Code. And these are all the files. I will explain this all the file structure and everything, and we will run this application as well.

Exploring the Project Structure

So now we will run the application. Okay, so before that, let's walk through all the files and project folders that we have in our project. So if you see, this is the assets folder, and it includes all our images, videos, or any other files which we need in the application. So we keep everything in the assets folder. Basically, it includes the images or videos, MP3, something like that.

Then node_modules, you can ignore that one for now. In the app.js, this is the starting point for our application. Right now, if you see, this is the View. So View is nothing but whatever is showing on the screen. And if you know in web development, we have the div tag, so it's something kind of similar. So View tag is in order to—the view name itself denotes to show on the screen, that's why it's View. And in the Text tag, we show this particular text. Okay, and just ignore this one for now.

Then we have this app.json which includes the configuration of the application. So it includes the name of the application, the version number of the application, then the orientation. Right now, obviously, we're working for the portrait mode. And the icon of the application as well. If you have a splash screen for the application, that also is included in the app.json. So if you want to change it, you can change it from here. Then for the Android and iOS, we can set the configuration, the package name, and everything. So everything we will see in detail when we are going to publish the application, then we will touch this particular app.json file.

babel.config.js—right now, I'll just ignore this one. And then it comes to package.json. So in package.json, it includes all the dependencies which we need for the application. So when we created this application, a couple of few dependencies are already installed. If you see, the Expo status bar, React, and React Native are already installed. And also, these are the scripts in order to run the application in various environments.

Running the App on a Mobile Device

Okay, now let's try to run the application. So first of all, let's go to the terminal and in the terminal, click on New Terminal. And in order to run the application, just type expo start.

On the right hand side, this is my mobile screen which I mirrored on the desktop so that you can be able to see what I'm doing. Okay, so let's go to this local 192. So if you see, once we run expo start, we will get this QR code. Okay? And also, this is the local URL which you can open in order to run the application.

Now, on the left hand side, you will see you can run this application directly on the Android device simulator. For that, you need to install Android Studio, and from there you can start your emulator. Same for the iOS. If you have an iOS device and if you have an iOS emulator in your PC, then you can run it. Then you can publish your application from here. So locally on the internet, you can publish it. But all of this, we will discuss later in this course.

Right now, what we have to do in order to run this application on your mobile device is, here in the Connection type, you have to select the Tunnel. So once you connect the connection type as a Tunnel, then you have to go to our Android device. So here, you have to install this Expo Go app from the Play Store. So right now, I'm using the Android device. Okay? So if you have an iOS device, you can install the Expo app from the App Store as well. And then just open this App Store. And once you open it, it will ask you to log in or create the account, so just do it. And the same account you have to log in on your application as well, if needed.

Once you run the application and once you open the Expo Go app, you will see these two options where your app name and everything will be there. And this is the URL in order to open the application. So let's just click on the second URL. And if you see here, when you select the Tunnel type, you will get this Expo and some URL. So that URL will only open in the Expo application. So just click on that one, and it will take a few seconds in order to download the application in your mobile and then build the application. So if you see in the bottom, a few minutes later, so our app is now loaded completely, and this build is completed.

Live Reloading & Recommended VS Code Extension

And if you see on the screen, we are able to see the text 'Open up app.js to start working on the app.' So this text is written in app.js if you see here, this text: 'Open up app.js to start working on your app.' So this particular text is written in between this Text tag, and the Text tag which is imported from this React Native, if you see right here.

Now if you remove this one and replace with something else, like 'Subscribe to TubeGuruji channel,' and if I save it, instantly it will reflect in your application. Remember, I am running this application on my mobile device, I just mirrored it to my PC. So this is the mobile view only. So if you see, instantly it gets changed, no delay or anything. And this is how it works.

Second thing, before the end of this particular section, I just want to tell you, in VS Code there is one extension called ES7+ React. So let me increase the size. If you see right, this extension, you have to install this extension in VS Code. This extension will help you to write the code much faster. So whenever you create one new component, you need your default template. So this extension will help you to create that default template very quickly. So I will tell you in the next section how to use that one.

What's Next in the Series

And also from the next section, we will start building our application and we will connect the Firebase with our application so that we can use the Google sign-in. So watch this full particular course, and if you did not subscribe to my channel, subscribe to my channel. Thank you.