Getting Started with React Native

Why I Chose React Native

I've dabbled in web development for a while, and therefore React Native was a natural choice for me. Here's some key factors that drew me to React Native over other mobile development frameworks:

I can build for both iOS and Android with one codebase
I can reuse components across different parts of my app
There's a large and growing community
Hot reloading is awesome - The app will automatically update when you save.

Setting Up My First React Native Project

Here's some steps on how I set up my development environment using Expo and VS Code.

Step 1: Installing Expo CLI

First, I installed the Expo CLI globally with this command:

npm install -g expo-cli

I use Expo CLI because it makes managing React Native projects so much easier.

Step 2: Creating My Project

npx create-expo-app@latest

After running the command above, it will ask to name the app:

What is your app named? my-app

Then navigate to the project folder:

cd my-app

Step 3: Setting Up VS Code

Open VS Code and navigate to the project folder.

Step 4: Starting the Dev Server

npx expo start

This will give you a QR code in the terminal that you can scan with your phone.

Step 5: Running on My Phone

Install Expo Go on your phone
Scan the QR code (camera on iOS, Expo Go app on Android)
Watch your app load up!

Troubleshooting Expo QR Code Network Error

Issues I Ran Into (And How I Fixed Them)

The main issue I ran into was getting the QR code to work on my phone and actually load the app. Here are some things to check:

Make sure your phone and computer are on the same WiFi
If the app freezes, shake your phone to see the dev menu and look for the error
The Expo docs are always a great resource

After running npx expo start and trying to open the app on my iphone, I kept getting the following error "Unknown error: The network connection was lost." This error caused me about 18.2345 headaches trying to figure out what was wrong.

I tried all of the basic troubleshooting steps mentioned below, but nothing worked. I also saw the suggestions about npx expo start --tunnel but opted not to go this route due to it being slower. I will explain what worked for me, but first lets start with the basic troubleshooting steps.

Step 1: Make sure you have done/confirmed the following basic troubleshooting steps:

Make sure your phone and computer are on the same WiFi network
Clear the Expo Go app cache on your phone
```
npx expo start -c
```
Update Expo CLI to the latest version:
```
npm install -g expo-cli
```

These steps should resolve most QR code connection issues when working with Expo.

Step 2: If you are still having issues and currently have a headache, try the following:

Turn off your computer's firewall temporarily. I say temporarily because you'll need to turn it back on after you are done testing your app.
On Mac, go to Settings > Network > Firewall > Turn Off Firewall.
On Windows, go to Control Panel > System and Security > Windows Defender Firewall > Turn Off Windows Defender Firewall.