Create a React Native Web, Android, and IOS project with Expo CLI

Create a React Native Web, Android, and IOS project with Expo CLI

Hello fellow programmer padawans As you can understand from the title I will tell you how to create a web, Android, and IOS project with React Native and Expo. First, we need the Expo CLI package. What’s Expo CLI? Expo CLI is the npm package that creates a project that we can test on our

Hello fellow programmer padawans

As you can understand from the title I will tell you how to create a web, Android, and IOS project with React Native and Expo. First, we need the Expo CLI package.

What’s Expo CLI?

Expo CLI is the npm package that creates a project that we can test on our devices. We won’t need to write codes on Xcode or Android Studio. We only need Visual Studio Code and we can write codes for 3 different environments.

First things first, we need NodeJs installed on our computer if you don’t have it you can download it here: https://nodejs.org/en/.

Install Expo and Create Project

To install the Expo CLI you need to open Node.js Command Prompt and run this code

npm install -g expo-cli

To create the project run this code below

expo init ProjectName

Template Selection

As soon as you make the code creation command run, you will see the selection menu as shown below. We need to select a template depending on our needs. I prefer to select a TABS template, it’s a TypeScript and a very good sample to learn and to see the structure of the project.

Administrator: Node.js command prompt - expo init Test 
: \Source>expo init Test 
There is a new version of expo-cli available (3.27.18). 
You are currently using expo-cli 3.27.7 
Install expo-cli globally using the package manager of your choice; 
for example: 
npm install -g expo-cli- to get the latest version 
Choose a template: 
(Use arrow keys) 
managed workflow 
blank 
blank (Typescript) 
tabs (Typescript) 
Bare workflow 
minimal 
minimal (Typescript) 
a minimal app as clean as an empty canvas 
same as blank but with Typescript configuration 
several example screens and tabs using react-navigation and Typescript 
bare and minimal, just the essentials to get you started 
same as minimal but with Typescript configuration
Administrator: Node.js command prompt 
C: \Source>expo init Test 
There is a new version of expo-cli available (3.27.18). 
You are currently using expo-cli 3.27.7 
Install expo-cli globally using the package manager of your choice; 
for example: 
npm install -g expo-cli- to get the latest version 
Choose a template: 
expo -template-tabs 
Downloaded and extracted project files . 
E Using npm to install packages. 
Installed JavaScript dependencies . 
E Your project is ready! 
To run your project, navigate to the directory and run one of the following npm commands . 
cd Test 
npm start # you can open iOS, Android, or web from here, or run them directly with the commands below. 
npm run android 
npm run ios # requires an iOS device or macOS for access to an iOS simulator 
npm run web 
C: \Source>

Start your project and see your app on your device

After the project creation is over we need to go inside the project folder from Nodejs Command Prompt to start your project.

expo start

Then we can see a website and a barcode on the command prompt, that barcode is the magic. I will show you…

: \Source>cd Test 
: \Source\Test>expo start 
There is a new version of expo-cli available (3.27.18). 
You are currently using expo-cli 3.27.7 
Install expo-cli globally using the package manager of your choice; 
for example: 
npm install -g expo-cli- to get the latest version 
Starting project at C: \Source\Test 
Expo DevT001s is running at http://10ca1host:19882 
pening DevT001s in the browser. . 
(press shift-d to disable) 
Starting metro Bundler. 
To run the app with live reloadine, choose one of: 
• Scan the QR code above with the Expo app (Android) or the Camera app (iOS) 
• Press a for Android emulator, or w to run on web. 
to send a link to your phone with email. 
Press e 
to sign in and enable more options. 
Press s
(I) Test on Expo Developer Tools X 
CD O localhost:19002 
FGRAMReactNative WILOAD COSTAR MVC SOURCE 
O 
Machine LEaming 
Habitica - Gami%' Y... 
Califomia Motorcyc... 
Payments 
Drone Cert 
Metro Bundler 
PROCESS (1) 
Run on Android device/emulator 
Run on iOS simulator 
Run in web browser 
Send link With email... 
Publish or republish project... 
PRODUCTION MODE 
CONNECTION 
zseee 
LOGGED IN AS 
METRO BUNDLER 
INFO 
Starting Metro Bundler.

After you see all these screens you now are ready to test your app on your device. Download the Expo app from the Apple App Store or Google Play and create an account.

Open your Camera and read the barcode. It will then ask you to open in the Expo app, do it and Voila! Your app is working on your phone or tablet.

First, open the project folder with Visual Studio Code so you can checkout the folder and file structure. Then you can find the Screens folder and make some changes on the TabScreenOne.tsx or TabScreenTwo.tsx files and you will see your app is changing on your device as well.

Verizon 
EXPO QR CODE 
Open in Expo 
PRODUCTION MODE 
CONNECTION 
exp: //192.168. 
Tunnel 
e. 32 : 19eee 
Local 
1 
PORTRAIT 
- Opening project... 
Go back 
This is taking much longer than it should. You 
might want to check your internet 
connectivity. 
10:59 PM 
Tab One Title 
Tab One 
Open up the code for this screen: 
/ screens /TabOneScreen . js 
Verizon 
10:59 PM 
Tab Two Title 
Tab Two 
Open up the code for this screen: 
/ screens /TabTwoScreen , js 
Change any of the text, save the file, and 
your app will automatically update. 
Tap here if your app doesn't automatically update after 
Change any of the text, save the file, and 
your app will automatically update. 
Tap here if your app doesn't automatically update after 
making changes 
SLO-MO 
VIDEO 
PHOTO 
PANO 
Building JavaScript bundle... 
23.47% 
TabOne 
making changes 
TabTwo

That’s all for now! I will write about components on React Native on my next post.

Thanks for reading

May the force be with you. 

mezo
ADMINISTRATOR
PROFILE

Posts Carousel

Leave a Comment

Your email address will not be published. Required fields are marked with *

Latest Posts

Top Authors

  • mezo
    ADMINISTRATOR

Most Commented

Featured Videos

Visitors