Faculty

of Science and Engineering

Department of Computing

COMP3130 Mobile Application Development

Workshop Week 1
Setting up your React Native environment


These activities are to be done on your laptop.

By the end of this workshop, you should be able to
1. Set-up React Native CLI environment based on your Development OS and Target OS
a. Installation of a package manager
b. Node server
c. JDK
d. Android Studio
e. X-code and CocoaPods for MacOS
2. Set-up Expo CLI
3. Install Expo on your phone (from App store/Google Play)
4. Set-up Visual Studio Code and install extensions
5. Create your first expo project and learning to execute them in
a. Expo Client on your phone
b. Web browser
c. Android Emulator
d. iOS Simulator
6. Publishing your expo project
7. Set up your Figma educational account for Wireframing and Mockups

COMP3130 Week-1 Workshop 1

Follow the instructions below and set up your react native environment

Step 1: React-native CLI Installation
Click here for more information. When you access the link you will see a screen like the image
below. Click on React Native CLI QuickStart and choose your OS. Please note you can have both
Android Studio and X-Code on a Mac OS (please install both), whereas you could only use
Android Studio on a Windows OS. The installation instructions are different, please ensure all
the steps are completed. Also read the notes below to help you understand what each of the
components are used for.

If you follow the instructions, by the end of it you will have these installed on your system
1. A package manager (Chocolatey for Windows, Homebrew for MacOS) using which you
will install many other packages and tools that are required
2. Node server (Node.js as it is usually referred to) for executing the applications
3. JDK since applications would require this to run
4. Watchman on MacOS for better performance
5. Android development environment (Installation of Android Studio (standard
installation), Installation of Android SDK (10) and configuring the environment
variables)
6. iOS development environment (only for Mac OS users- please install XCode and
CocoaPods which is a library manager for XCode Projects. Please note that XCode
requires your Mac OS to be of v10.15.4 or later)
7. Please do not install react-native cli as this has to be done for each of the projects locally.

COMP3130 Week-1 Workshop 2

Step 2: Expo CLI Installation
You will now have to install the Expo CLI. In the same link, click on Expo CLI QuickStart

For Expo, please check the version of node that you are running using your terminal and the
node -v command

You have to have a version of at least 12. To upgrade, you need to use the command
npm update and that should update your node to the latest version.

Step 3: Install Expo Client on your phone. This would help to run the app on your phone.

Step 4: Install a Code Editor of your choice such as Atom or VS Code. Click here to download VS
Code. VS Code is more powerful and this is something that we will be using in this unit.
Once you install VS Code, add extensions in there

On the left panel, click on the extensions tab and search for the following extensions and install
them
1. React Native Tools from Microsoft
2. React-Native/React/Redux snippets for es6/es7 from EQuimper
3. Material Icon Theme from Philipp Kief
4. Prettier from Prettier

There are some visuals on the next page to help you understand the extensions tab

COMP3130 Week-1 Workshop 3



After Installation of those,
1. Click on Code-> Preferences-> Settings, Search for FormatOnSave and ensure the
checkbox is selected
2. Click on View-> Command Palette-> Type Shell Command->Select Install 'code'
command in PATH and once that is selected, you will have your keyboard shortcut to
access the codes of a project through Terminal


You’ve your environment ready now and you will be creating your expo application next.

COMP3130 Week-1 Workshop 4


Creating your First Expo Project:

On your laptop, create a folder named COMP3130 and use this to store all your react native
projects.

Using your terminal cd into the folder

Once you are in the folder, type expo init MyFirstProject

This will prompt you to choose a template. We will be using the Managed workflow (blank
option) which helps to create your expo project. The instructions on how to run the project will
also appear.

Let’s do this a bit different through VS Code Editor. To run your project,

1. Cd into the project directory


2. Type code . to open the codes of your project through VS Code.


3. The project folder will now open in VS Code and you will see all the subfolders and files

COMP3130 Week-1 Workshop 5



Click on App.js to the see the code of the screen that will be executed when we run the
app

4. On VS Code Editor, click on View-> Terminal and this should open up a terminal on VS
Code Editor

5. On your terminal type the command npm start and this will open a browser where you
can see the instructions to view the app

COMP3130 Week-1 Workshop 6

 Npm start command starts the server and opens the Metro Bundler which is responsible
for compiling the JS codes.

Option 1: Running the app on your phone
From the browser window, you can scan the QR code and open it on your Expo Client on your
phone and this would look something like the image below

Option 2: Running the app on a web browser:
Click on Run on a web browser option to view the executed app on your browser (which opens
in a new tab)

Option 3: Running the app on an Android Emulator:
Open Android Studio. Click on Configure->SDK Manager

COMP3130 Week-1 Workshop 7

If you have just installed Android Studio, you will have the most updated version of Android R
or Q which is good. If you want to install a prior version, you will need to select it and click on
okay so that the SDK manager can download it for you.

If you are a MacOS user, please ensure you follow the following steps

You might have to double check your Bash Profile file for the path of Android SDK and Android
platform tools. To do this, open a new terminal window and type the command code
~/.bash_profile
This will open the bash_profile file in VS Code

In your Android Studio, again open your SDK Manager (Configure-> SDK Manager) and copy the
path from SDK Manager

COMP3130 Week-1 Workshop 8


To add the path of your Android SDK, to your VS Code editor, add this in this syntax:
export ANDROID_SDK=/your/path/here

I did this on my VS Code Editor based on my SDK path
export ANDROID_SDK=/Users/chaz/Library/Android/sdk

Back to your VS Code editor, add this in this syntax:

export PATH=/your/path/here/platform-tools:$PATH

I did this on my VS Code Editor based on my SDK path
export PATH=/Users/chaz/Library/Android/sdk/platform-tools:$PATH

Save your bash_profile file.

If you are using z shell, you will also have to make these changes. Using a terminal open the
following file using VS Code code ~/.zshrc
Add the two lines you added in your bash profile to this file as well and save it.

Kill your terminal and run the command adb. If you see a message “Command not found”, there
has been an error and redo the steps above and try again. Else, you should see messages like the
image below

More info here, if you are interested

The next step is to configure our Emulator. Click on Configure-> AVD Manager
This is your Android Virtual Device Manager that allows you to create your Emulator

Click on Create a Virtual Device and add an Emulator that has a play store installed. I have
added a Pixel 4 with Android Q as my OS on the Emulator. Click on Download and this should
take a while to install

COMP3130 Week-1 Workshop 9



Once you click okay, it will create an emulator for you to use. Please ensure this is open
before you run the app. You can access the emulator by opening Android Studio-
>Configure-> AVD Manager and Launching the Device

When you click the Play button, it launches the Emulator. To run the app, you can either
run command a on the terminal in VS Code or you can run it from the browser by
clicking on Android Emulator. When you do this, you can see the log on the VS Code. It
downloads Expo and then runs the app

COMP3130 Week-1 Workshop 10




Option 4: Running the app on iOS Simulator:
1. Open XCode (the first time you open it, some components will be installed)
2. Click on XCode-> Preferences

3. Click on Locations-> Command line tools and select XCode from the dropdown menu

COMP3130 Week-1 Workshop 11



4. Close the window. Click on XCode->Open Developer Tool and select Simulator and
this will open up a simulator.

5. Once the Simulator is open, you can change to a simulator of your choice by click on
File-> Open Simulator-> iOS and choosing a simulator of your choice. Please ensure
you have only one Simulator open at the time of execution of the app

6. To run the app, go to the terminal section on VS Code, type the command i to open
the app in the simulator. If you want to see the list of options, you can use ? to make
terminal list all the options

You will see a pop up to open the app on expo, click on Open and that will open the app on Expo.

COMP3130 Week-1 Workshop 12



Publishing the project
1. Create an account on expo.io
https://expo.io/signup

You can publish your projects under the handle you create

2. Click on Publish or republish project on your Metro Bundler page (Local host one)/
through the terminal. Leave the optional text boxes empty and click on Publish Project.
The first time, the project is published, it takes a while for the files to be uploaded.

3. It might ask you to login through your terminal (Enter your email address and
password) and your project will get published and a link will be displayed.

COMP3130 Week-1 Workshop 13



A pop-up that confirms the link that you can share. More on this subject in later weeks

Setting up the Figma Account
1. Click on https://figma.com/education
2. Click on Get Verified and register your account using your student email
3. You will be using this to create your wireframes and mockups

COMP3130 Week-1 Workshop 14