Setting Up Development Environment for React Native

Setting Up Development
Environment for React
Native
React-Native with RN Navigation and Paper
Prepared by Ronnie Peh

OVERVIEW & PURPOSE

The purpose of this tutorial is to set up the developmental environment for React-Native. This
setup also includes the use of existing mature UI frameworks, React-Native Navigation and
Paper for development. The tutorial consists of 2 types of setup:

1. Using online Expo

2. Using Docker container

Content

OVERVIEW & PURPOSE 1

Content 1

Software and Hardware Prerequisite 3

Using Online Expo for Development 3

Creating An Expo Account 3
Creating An Expo Project Online Using Snack 4
Testing The Web Simulation 6
Testing the App on iOS and Android Simulator 6
Testing the App on iOS and Android Simulator 7
Adding Dependency Libraries 8

Using Docker for Local Expo Development 10

Windows Subsystem for Linux Installation 10

Step 1 - Enable the Windows Subsystem for Linux 10
Step 2 - Update to WSL 2 10

1 v1.1
Setting Up Development Environment for React Native

Step 3 - Enable Virtual Machine feature 11

Step 4 - Download the Linux kernel update package 11

Download Dockers 11

Install Dockers 11

Install the Remote Development extension pack. 13

Set Up A Container for React Native Development 14

Setting Up the SSH Key for Gitlab 20

Cloning your project 21

Running the Your Apps 21

Debugging React Native App 22

Adding the Paper and React Navigation Library 24

2 v1.1
Setting Up Development Environment for React Native

Software and Hardware Prerequisite

1. Personal Computer with at least 16 GB, 500 GB, Intel at least 10th Gen equivalence
2. Windows 10/11 or macOS >= 10.15 or Linux 64-bit with kernel >= 1.4.
3. Docker
4. Visual Studio Code
5. Expo Go Mobile App [iOS] [Android]

Using Online Expo for Development

This is the most straightforward way to start developing for React Native. For most of our React
Native tutorials, we will use Expo as a baseline simply because Expo makes developing an app
with React Native so much easier.

The easiest way to get started is to use the online Expo development platform. Here, you can
make use of the cloud to develop and test your application using the online simulator for web,
iOS and Android.

Creating An Expo Account

1. Go to https://expo.dev/ and click on Sign Up

2. Proceed with the sign up process.

3 v1.1
Setting Up Development Environment for React Native

3. Once you have finished registration, you should be able to see the following Welcome
screen.

Creating An Expo Project Online Using Snack

Let’s try to develop a React Native mobile application using Snack, the online version of the
Expo Go. This is the easiest way to start developing and testing for React Native.

1. Look for Snacks on the left side of the menu and click on it.

4 v1.1
Setting Up Development Environment for React Native

2. Click on +New Snack to create a quick online React Native snack project.

3. You will see the development environment as shown below. The left panel is the list of
react native files in the project. The middle panel is the code editor. The right panel is the
simulator for the app to run on with your device, iOS, Android or on the Web. We will
come to that in a short while.

a. Click on the default given name at the left hand top corner of the screen and
change it to a more meaningful name.
b. Click on the Save button near the top right hand corner.

Testing The Web Simulation

5 v1.1
Setting Up Development Environment for React Native

4. The right panel actually shows the result of the codes in the code editor. Let’s try to
modify the code in the middle panel to see the changes in the right. Open up the
AssetExample.js files in the components folder as shown below.

5. Modify the image source at line 10 as shown below:

<Image style={styles.logo} source={{

uri: 'https://reactnative.dev/img/tiny_logo.png',
}} />

and you will see that instead of a cube with a sphere, the react native logo is loaded.

Testing the App on iOS and Android Simulator

6. Now click on the iOS tab and click on Tap to Play as shown below:

6 v1.1
Setting Up Development Environment for React Native

You will see that your application actually runs in the simulator.
7. Try the Android Emulator yourself. Note that these simulators are run in a VM powered
by appetize.io.

Testing the App on iOS and Android Simulator

8. Now try running the application on your own mobile device. Although we cannot install
the application like what we usually did from the App Store or Google Play store, we use
the Expo Go mobile app that we have installed earlier to run the app.
9. Click on the My Device tab and follow the instructions on the screen. For iOS users, you
will need to use the default QR code scanner that comes with iOS.

7 v1.1
Setting Up Development Environment for React Native

Adding Dependency Libraries

10. There are many times where we need to add dependency libraries for other frameworks
such as react navigation or other functionalities such as expo-camera. For that, we need
to add dependency libraries.
11. For Expo snack, the dependencies library is automatically detected when you import the
library. Go to the file App.js and add the following line to use the react navigation library.

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

Note that the Expo will detect each of the libraries one by one. You will need to click and
confirm each of them one by one.

8 v1.1
Setting Up Development Environment for React Native

12. So at the end of the day, where did Expo store all the dependency settings? The settings
are stored in the file called package.json. Open up the package.json file and you will see
the newly added libraries.

You can also modify the version of the libraries that you want to use.
13. So we have completed setting up a fast and easy way to start developing mobile

9 v1.1
Setting Up Development Environment for React Native

applications using Expo Snack. This method is used usually under following
circumstances:
a. Sharing a running version of your application
b. Your PC cannot run expo locally
c. Collaboration

Note that the debugging process is very inefficient when developing in Snack.

Using Docker for Local Expo Development

1. We can use Docker to contain our React Native development so that the development
environment is isolated and will not affect or be affected by other development. The
following step is to ensure the successfulness of docker installation, you can skip this
section if Docker is successfully running on your computer.

Windows Subsystem for Linux Installation

Windows Subsystem for Linux has two different versions to choose between during the
installation process. WSL 2 has better overall performance and we recommend using it. If your
system does not support WSL 2, or you have a specific situation that requires cross-system file
storage, then you may want to stick with WSL 1.

[Reference]

Step 1 - Enable the Windows Subsystem for Linux

1. You must first enable the "Windows Subsystem for Linux" optional feature before
installing any Linux distributions on Windows.
2. Open PowerShell as Administrator and run:
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all
/norestart

Step 2 - Update to WSL 2

3. To update to WSL 2, you must be running Windows 10.

4. Requirements
a. For x64 systems: Version 1903 or higher, with Build 18362 or higher.
b. For ARM64 systems: Version 2004 or higher, with Build 19041 or higher.
c. Builds lower than 18362 do not support WSL 2. Use the Windows Update
Assistant to update your version of Windows.

Step 3 - Enable Virtual Machine feature

5. Before installing WSL 2, you must enable the Virtual Machine Platform optional feature.
6. Open PowerShell as Administrator and run:

10 v1.1
Setting Up Development Environment for React Native

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

7. Restart your machine to complete the WSL install and update to WSL 2.

Step 4 - Download the Linux kernel update package

8. Download the latest package:

WSL2 Linux kernel update package for x64 machines
9. Run the update package downloaded in the previous step. (Double-click to run - you will
be prompted for elevated permissions, select ‘yes’ to approve this installation.)

Download Dockers

10. Download Docker Desktop or a later release.

Install Dockers

11. Ensure you have completed the steps described in the Prerequisites section before
installing the Docker Desktop release.
12. Follow the usual installation instructions to install Docker Desktop. If you are running a
supported system, Docker Desktop prompts you to enable WSL 2 during installation.
Read the information displayed on the screen and enable WSL 2 to continue.
13. Start Docker Desktop from the Windows Start menu. You must see the green dot and
besides it says “Docker running”
14. From the Docker menu, select Settings > General.

11 v1.1
Setting Up Development Environment for React Native

15. Select the Use WSL 2 based engine check box.

If you have installed Docker Desktop on a system that supports WSL 2, this option will
be enabled by default.
16. Click Apply & Restart.
17. When Docker Desktop restarts, go to Settings > Resources > WSL Integration.
WSL Integration will be enabled on your default WSL distribution.

12 v1.1
Setting Up Development Environment for React Native

18. Click Apply & Restart.

Install the Remote Development extension pack.

19. Use the marketplace in VSCode to install the extension pack.

20. Click Continue to acknowledge

13 v1.1
Setting Up Development Environment for React Native

21. A dialog box will prompt you to open vscode. Click Open Visual Studio Code.

Set Up A Container for React Native Development

22. Once the above is installed, Open up your Visual Studio Code and Open up a newly
created folder.
23. Open a new PowerShell Terminal (Ctrl + Shift + `) and create the following 3 files.
ni .devcontainer.json
ni docker-compose.yml
ni Dockerfile

The purpose of creating these 3 files is to customize our development environment. The
Dockerfile contains information on which base image to use for the container and other
essential libraries for development.

24. Open up the Dockerfile and fill it with the following code.

# [Choice] Node.js version: 16, 14

# or others from https://hub.docker.com/_/node
FROM node:16

# remove old yarn

RUN rm -rf /opt/yarn-v* /usr/local/bin/yarn /usr/local/bin/yarnpkg

# init for VS Code

14 v1.1
Setting Up Development Environment for React Native

RUN mkdir -p /root/workspace /root/.vscode-server

# Install eslint typescript expo ngrok

RUN npm install -g eslint typescript expo-cli @expo/ngrok@^4.1.0

CMD /bin/sh -c "while sleep 86000; do :; done"

We will be using node version 16 as our base image and set initialisation for VS Code.
After which, we install 4 libraries. Can you try to find out the purpose of each library?

25. Next, open up the docker-compose.yml file and fill in the following code.

services:
expo-dev:
image: io.ghcr.navneetkarnani.vscode-expo-starter
build:
dockerfile: ./Dockerfile
volumes:
- code:/root/workspace
# https://code.visualstudio.com/docs/remote/containers-advanced#_avoiding-
extension-reinstalls-on-container-rebuild
- vs-server:/root/.vscode-server
volumes:
vs-server: {}
code: {}

The docker-compose contains the instruction to spawn a new container from the
Dockerfile with additional information such as directories mapping between the host and
container.

26. Finally, open up the .devcontainer.json file and fill in the following code.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.191.0/containers/docker-
existing-docker-compose
// If you want to run as a non-root user in the container, see .devcontainer/docker-
compose.yml.

15 v1.1
Setting Up Development Environment for React Native

{
"name": "expo-dev",

// Update the 'dockerComposeFile' list if you have more compose files or use different
names.
// The .devcontainer/docker-compose.yml file contains any overrides you need/want to
make.
"dockerComposeFile": [
"docker-compose.yml"
],

// The 'service' property is the name of the service for the container that VS Code should
// use. Update this value and .devcontainer/docker-compose.yml to the real service
name.
"service": "expo-dev",

// The optional 'workspaceFolder' property is the path VS Code should open by default
when
// connected. This is typically a file mount in .devcontainer/docker-compose.yml
"workspaceFolder": "/root/workspace",

// Set *default* container specific settings.json values on container create.

"settings": {
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.lintTask.enable": true
},

// Add the IDs of extensions you want installed when the container is created.
"extensions": [
// expo and react native extensions
"bycedric.vscode-expo",
"msjsdiag.vscode-react-native",
"eg2.vscode-npm-script",
// ESLint
"dbaeumer.vscode-eslint",
// git extensions that are highly recommended
"eamodio.gitlens",
"mhutchie.git-graph",

16 v1.1
Setting Up Development Environment for React Native

// nice file icons from vscode icons team

"vscode-icons-team.vscode-icons"
],

// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [ 19000, 19001, 19002 ],

// Uncomment the next line if you want start specific services in your Docker Compose
config.
// "runServices": [],

// Uncomment the next line if you want to keep your containers running after VS Code
shuts down.
// "shutdownAction": "none",

// Uncomment the next line to run commands after the container is created - for example
installing curl.
// "postCreateCommand": "apt-get update && apt-get install -y curl",

// Uncomment to connect as a non-root user if you've added one. See

https://aka.ms/vscode-remote/containers/non-root.
// "remoteUser": "node"
}

This file contains information when VS Code opens up the container and attaches itself.

27. Goto Terminal and run the following command to build the image and run the container:

docker compose up -d

You will see something similar to the following:

PS C:\Workspace\RN> docker compose up -d
[+] Running 0/0
- Network rn_default Creating 0.1s
[+] Running 0/1
- Network rn_default Creating 0.2s
[+] Running 0/1
- Network rn_default Creating 0.3s
[+] Running 0/1
- Network rn_default Creating 0.4s
[+] Running 0/1
- Network rn_default Creating 0.5s
[+] Running 0/1
- Network rn_default Creating 0.6s
[+] Running 0/1
- Network rn_default Creating 0.7s

17 v1.1
Setting Up Development Environment for React Native

[+] Running 0/1

- Network rn_default Creating 0.8s
[+] Running 3/1
- Network rn_default Created 0.8s
- Volume "rn_code" Created 0.0s
- Volume "rn_vs-server" Created 0.0s
- Container rn-expo-dev-1 Creating 0.0s
[+] Running 3/4
- Network rn_default Created 0.8s
- Volume "rn_code" Created 0.0s
- Volume "rn_vs-server" Created 0.0s
- Container rn-expo-dev-1 Creating 0.1s
[+] Running 4/4
- Network rn_default Created 0.8s
- Volume "rn_code" Created 0.0s
- Volume "rn_vs-server" Created 0.0s
- Container rn-expo-dev-1 Created 0.1s
Attaching to rn-expo-dev-1

Open up your Docker Desktop to ensure that the container is running.

28. Close your VS Code, goto Docker Desktop, hover your cursor until you see a button that
says Open in Visual Studio Code.

18 v1.1
Setting Up Development Environment for React Native

This will open up a VS Code and you will be prompted if you want this folder to be
opened in the container. Click Ok to open in the new container.

29. VS Code will relaunch and open an empty folder for your React Native development.
Congratulations! You have successfully set up a basic environment for React Native.
30. In the event that this method does not work and Docker Desktop gave an error during
the launch, please proceed with the following steps:
a. From Visual Studio Code (make sure that you have Remote Development
Extension installed), goto Remote Explorer .
b. Look for the container and Click Open Folder in Container

Setting Up the SSH Key for Gitlab

This section is to set up the SSH for using Gitlab or Github for our source control.

19 v1.1
Setting Up Development Environment for React Native

31. Use the following command to generate Follow the steps in this practical to set up the
SSH key for the Gitlab. Remember to also set the global user name and email for Git
32. Once you have the key setup, goto File ➤Open File. Select the id file as shown below:

33. Continue to register this key to gitlab and so a final test to ensure that your connection to
gitlab is established using the following:

$ root~\ssh -T [email protected]
Welcome to GitLab, @developer.soc.sp!
$ root~\

If the ssh command is not found in the container, use the following steps to install the open ssh
client.

$ root~\apt-get update
$ root~\apt-get upgrade
$ root~\apt-get install openssh-client

Cloning your project

34. Create a new project (I will called it rnaproject) in GitLab with empty folder
35. Now you can clone your project and continue your development as if it is in the normal
environment.
36. Use the expo command to write contents into the folder.
$ root~\expo init rnaproject

Select Blank template.

Running the Your Apps

37. Change directory to your application folder and run the application using expo start –
tunnel.

20 v1.1
Setting Up Development Environment for React Native

~/workspace# cd rnproject/
~/workspace/rnproject# expo start --tunnel
Starting project at /root/workspace/rnproject
Developer tools running on http://localhost:19002
Starting Metro Bundler
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android
device.
Tunnel connected.
Tunnel ready.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀▀▄▄█▄█▄▀▄▀▄█ ▄▄▄▄▄ █
█ █ █ ███▄█ █▄▄▀▄███ █ █ █
█ █▄▄▄█ ██▄▀▄▀█ █ ▄▀▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█ █ ▀▄▀ █▄█ ▀▄█▄▄▄▄▄▄▄█
█ ▄▀ █▄█▀ ▄▄▀▀ ▀█ ▀ ▄█▄█▀██▀▄█
█▄▄▄▄ ▄▄▀█▀ ▀█ ▄▄▀▀▀▀█▄▀ ██▄▀█
█▄ ▀▄▄▄▄▀ ▄█▄▄▀█ ███▄█ ▀▀▄█ █
█▀ ▀█▀ ▄ ▄▄ ▄█▀ ▄█ ▄▄ ▄▄█ █ █
█▀█▄▄ ▄▄█ ▄▀▀ ▄█▀▀▀█ ██▀▀▀▀ ▄█
█ ▀ ▀▀▄ ▄▀▄ █▄ █ ▀█▀█▀█▀▀▄█
█▄▄▄▄▄▄▄▄▀██▀▀█ █ ▀▀ ▄▄▄ █▄█▄█
█ ▄▄▄▄▄ ██ ▀ ▄ ▀█ █▄█ ▄███
█ █ █ █ ▀▀▀▀█ ▀▀ ▄ ▄ ▄█▀█▀█
█ █▄▄▄█ █▀▄█▀ ▄ ▄█▄ █▄ █ ▄ ▄ █
█▄▄▄▄▄▄▄█▄▄▄██▄▄▄███▄▄█▄███████

› Metro waiting on exp://yv-s9q.anonymous.rnproject.exp.direct:80

› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

You can now scan and use either your mobile device or web to run your program.

Debugging React Native App

38. Now let’s configure the debugger in VSCode. First, install the extension “React Native
Tools” from the extensions tab in VSCode.

39. Now let’s add a debugger configuration for React Native. Click the menu titled “Run” in
the main application menu bar and then select the option “Add Configuration.”

21 v1.1
Setting Up Development Environment for React Native

This will create a folder called .vscode and a file called launch.json.

40. Open the launch.json and edit as follows:

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}/rnproject",
"type": "reactnative",
"request": "attach",
"port": 19000,
"sourceMaps": true
}
]
}

41. Set a breakpoint, and restart your application. Connect your mobile device. Now give
your mobile device a shake and the context menu will appear. Select Debug Remote JS.
This will enable the debugging process.

22 v1.1
Setting Up Development Environment for React Native

Adding the Paper and React Navigation Library

42. Follow the instructions in Paper and React Navigation Library to install the package.

npm install react-native-paper

npm install @react-navigation/native
npm install react-native-reanimated
npm install @react-navigation/stack
npm install @react-navigation/drawer
npm install @react-native-community/masked-view
npm install react-native-gesture-handler

43. However, in order for the 2 packages to work with Web Pack which runs the Expo, open
up the babel.config file and add the following:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
env: {
production: {
plugins: ['react-native-paper/babel','react-native-reanimated/plugin'],

23 v1.1
Setting Up Development Environment for React Native

},
},
};
};

The purpose of the babel.config is to add the plugins that are needed to run the paper
and react navigation in the web pack.

Congratulations, you have successfully set up the environment for developing React
Native Apps using Paper and React Navigation.

~ End of Instructions ~

24 v1.1