My First Week with React Native

Local Environment with Expo — Explore and Set Up

7 min readJun 27, 2022

In the last week, I took the responsibility for the development and maintenance of an existing mobile application using React Native in the company I’m working for.

For me, as a web developer who never dealt with React Native stuff, I started learning and digging a little bit into the tools needed to launch a good development environment.

As we start to think about running React Native, the first thing we have to do is to make decisions about our local environment setup.

Prerequisites

1. Node.js LTS

If you already have Node 16 LTS or greater installed, you can skip this section.

Theoretically, you don’t need Node.js to use React on the client side, but eventually it would be very difficult to build a project without it since you need it to use almost all React libraries, which are Node.js packages.

So, head up to Node.js Download Page, download the LTS version for your platform and install it on your system.

After installation, make sure Node is set correctly by checking its version in your terminal: node -v, it should print the version you just downloaded. Also, you could check that npm (Node Package Manager) is installed by typing: npm -v.

2. Watchman

React Native uses Watchman to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change and push the updates to our device without the need to manually refresh it.

To install Watchman on  macOS using Homebrew:

brew update
brew install watchman

Or install it on ⊞ Windows using Chocolatey:

choco install watchman

3. Expo

Expo is a free and open source set of tools created around React Native to facilitate, accelerate the project setup and provide a more robust and convenient development workflow with flexibility.

It handles some tedious configuration steps when deploying the application. Expo also has an SDK to handle all kind of native stuff like, camera, accelerometer, location, etc..

Expo CLI vs React Native CLI

When you start to initiate a new React Native project, you have two options to install and build the application:

Expo CLI: If you are new to mobile development (just like me), the easiest way to get started is with Expo, you only need the recent version of Node.js and a phone or emulator which we will talk about next. Run the following commands to install Expo CLI globally:

If you are using npm:

npm install -g expo-cli

Or using Yarn:

yarn global add expo-cli

To make sure Expo CLI is installed, run: expo --version so you know what version you are currently on.

React Native CLI: a built-in feature that helps you manage the project locally. You may use React Native CLI, but it requires Xcode or Android Studio to get started, which you should expect to spend about an hour installing and configuring them. You can check out the installation instructions here.

For the purpose of this article, I’ll stick with Expo option.

Create a New Project

Once Node and Expo CLI are installed, you are ready to create a new React Native project. Just navigate to your development directory and run:

expo init rn-first-project # --npm or --yarn

You can specify which package manager you want to use to install dependencies by appending either --npm or --yarn.

After that, Expo CLI will prompt you to choose a template for the project:

blank: empty project if you are a JavaScript guy.
blank (TypeScript).
tabs (TypeScript): minimal tabs with some screens application and basic navigation mechanism with React Navigation. I’ll go for this option.

Once you choose your preferred template, Expo will start downloading the template and install JavaScript dependencies.

Running the Project

When Expo finishes setting up the project, you can navigate to your directory and start the project:

cd rn-first-project
npm start # Or expo start

You can see on your terminal a QR code with a couple of options to run the project. For now, open http://localhost:19002 and check out the Metro Bundler interface (Developer tools), but what is Metro bundler used for?

Metro Bundler

Metro is a development platform for React Native, acts as a JavaScript bundler. It manages assets, caches builds and performs hot module reloading.

So, whenever you make a simple change, you don’t have to wait forever to reload. It emphasizes speed and aims fast startups and quick bundling. Actually, it takes all of our source code and get it ready to be ran on a mobile device.

Code Execution — Physical Device vs Si/Emulator

At some point in time, we need to test the code we write. As a web developer this is a very simple process, write some code, execute it in the browser and that’s it!

But here, we can either execute the code on our physical device (personal mobile phone) or alternatively, we can test the code on a fake device which we typically call a simulator or an emulator. You can say this fake device is a phone running on your laptop or your desktop.

The easiest way is to use your physical device which may take about 5 minutes to get everything working correctly while using fake device takes more time and setup.

Physical Device — Expo Go

In order to run the code on the physical device, Expo Go allows you to open up apps that are being served through Expo CLI, you can download it from  App Store or 🤖 Google Play Store.

Open the application and scan the QR code from Metro bundler interface on the bottom left hand side or from the terminal you started the project from and Voilà! Your app is up and running!

You have another option to run the application on your mobile by entering Metro URL listed in the terminal which is usually: exp://<your_IP_address>:19000.

If something went wrong, make sure your connection is set to LAN or Tunnel and make sure your mobile device and your laptop are connected to the same Wi-Fi network.

iOS Simulator — macOS Only

If you wish to use Xcode simulators instead of a physical device, open the app store and download Xcode. This is a huge file at around 7–12 GB, depending on the OS, so it can take a LONG time to download and install. Please note that it might seem like it’s stuck and not installing, but be patient and wait till the end, it is probably not.
Launch Xcode, agree to the terms and conditions, wait if it started installing more tools and eventually, the “Welcome to Xcode” screen will pop up.
In the top menu bar, click “Xcode”, “Preferences” then “Locations”.
Make sure “Command Line Tools” are installed and selected.
In the menu bar, click “Xcode”, “Open Developer Tool”, then click “Simulator”.
When iPhone simulator starts, go to Metro Bundler interface and hit “Run on iOS simulator”, or go to your terminal and type “i”.
This should download and launch Expo app in the simulator and run the application right after.
Now, you can hit Ctrl-Cmd-Z to show the developer menu.

iOS Simulator Limitations

Although the iOS Simulator is great for rapid development, it comes with a few limitations. The following hardware are not available:

Audio Input.
Barometer.
Camera.
Motion Support (accelerometer and gyroscope).

Android Emulator

Download and install Android studio from: https://developer.android.com/studio.
If you have Mac M1, make sure to choose “Mac with Apple Chip”, or go with “Mac with Intel Chip”.
Make sure to download “Android SDK Build Tools”.
Open “Virtual Device Manager”, you should see at least one virtual device already installed with Android Studio, hit run to launch the emulator device. If not, click “Create Device”, choose the desired device and download it after choosing the latest recommended API.
When Android emulator starts, go to Metro Bundler interface and hit “Run on Android device/emulator”, or go to your terminal and type “a”.
This should download and launch Expo app in the emulator and run the application right after.
Now, you can hit Cmd-M to open the developer menu.

Try to open your code editor or IDE, open screens/TabOneScreen.tsxfor example, make any change and you should see a change automatically appear on your mobile device. So, anytime we make a change to any JavaScript file, the application should automatically reload for us.

Web Browser

When your codebase grows, you won’t be able to successfully check the execution in the Web browser, you’ll mostly encounter incompatible code and dependencies, so in terms of scalability, you can discard this option.

Conclusion

With Expo, it seems obvious that development lifecycle will run much easier with high indices regarding DX and more ready-to-use SDK tools and native modules with different platforms easy setup.

In the next article, I’ll be covering the different ways of debugging React Native project. So, stay tuned!

Hope you found this article informative, please hit clap button 👏 if you liked it, and post a comment below if you have further questions or feedback!

GitHub URL: https://github.com/Abdulrahmanh95/rn-first-project