How to set up React Native project using Expo CLI

Hi guys!!! Welcome back for my article series on React Native for Beginners. In the previous article named Expo CLI vs React Native CLI, we talked about which approach should we use to create the React Native project. Let us talk about how to set up React Native project in this article.

First of all, we need to install some software. Here I will explain how to set up React Native project using Expo CLI. Also you can refer https://expo.io/learn page for more instructions.

https://expo.io/learn

For the first step you need to download and install the latest version of Node.js on your computer.

Node.js

https:/nodejs.org/en/

Download the latest version of Node.js from the above site and install it on your computer. You can install it in the normal installing process.

After installing node.js run the following command on the terminal or command-line tool to install expo CLI globally.

npm install expo-cli --global

If it installed successfully it will finish with the message successful.

Now we are ready to build our first React Native application. Let’s start. First direct into the location in the command line where you want to save your project. Then run the ‘expo init my-new-project’ in your command line. Here ‘my-new-project’ is the project name which I choose. You can use whatever you wish to use as your project name. After running that command you will ask which template to use build your app.

expo init my-new-project

Choose which template to use

Select a blank template and enter. Then if you ask the name of your app visible on the home screen. Enter there the name which you want.

Then this will go ahead and create our React Native project. It will install the all required dependencies of the project like react, react-native, and give us React Native project which we can use to build a native app.

successfully created the project

Then navigate into the project folder using the command line.

cd my-new-project

Now we built our project. Let’s run our project. For that run ‘expo start’ command in the command line. After that new tab should open in your browser. This is the expo development tool. It allows the management part of your app.

expo start

expo start

expo development tool

Now we can test our app on a mobile device. If you are using a virtual device o your computer, for run application on an android emulator press ‘a’ in the command line or run application on iOS simulator press ‘I’ in the command line after running the expo start command.

Also you can do it using the expo development tool which is open in the browser tab.

But here I don’t use a virtual device. I use a physical device to test our app. So I let’s look into how we can test our native application using a physical device. First download and install the expo client from the app store using your mobile device.

Expo Client

Then open the expo client application. Here you don’t need to sign up.

no need to sign here

Now you should be able to scan QR code from the expo development tool and then the app will open in your mobile device.

Testing application on physical device

Okay, now we created our first project and run it in our mobile device.

Thank you for reading. I hope you learned something. In my next article, let’s look at the files in our React Native project. Hope to see you with the next article in the near future.

Happy coding…!!!