Set Up React Native with Expo

By the end of this lesson you will have a real app running on your own phone. You will also know the three ways to run React Native code: Expo Go, a development build, and a project made with the React Native Community CLI.

Do not worry if the list of tools looks long. You only need the first path today. The other two are here so that you recognise them when a project needs them.

Three ways to run a React Native app

Think of learning to drive. First you practise in a driving school car (it works, but you cannot change it). Later you get your own car and fit what you like. Some people even build the car from parts.

The React Native team recommends starting new apps with a framework, and Expo is the main one. This course uses Expo.

Step 1: Install Node.js and an editor

React Native tools run on Node.js, the program that runs JavaScript outside the browser. React Native 0.88 needs Node 22.13 or newer, so install a current LTS (long-term support) release from nodejs.org. Then open a terminal and check it:

node --version
npm --version

You should see two version numbers, for example v24.x.x for Node. Any editor works, but VS Code is a popular free choice with good React support.

Step 2: Create the project

Run this in the folder where you keep your code:

npx create-expo-app@latest chai-app
cd chai-app

npx downloads and runs a tool without installing it globally. create-expo-app makes a new folder called chai-app with a working app inside, written in TypeScript and using Expo Router for screens. After a minute or two the tool prints a success message with the next commands to run.

Step 3: Start the development server

npx expo start

This starts Metro, the tool that bundles your JavaScript and sends it to the phone. Your terminal now shows a QR code and a list of keys. The most useful ones are:

• a opens the app on an Android emulator,
• i opens the iOS Simulator (only on a Mac with Xcode),
• w opens the web version in your browser,
• r reloads the app,
• j opens the debugger,
• m opens the developer menu on the device.

Step 4: Open the app on your phone

1. Install Expo Go from the Play Store or the App Store.
2. Make sure your phone and computer are on the same Wi-Fi network.
3. On Android, open Expo Go and scan the QR code. On iPhone, scan it with the Camera app.

After a short "Bundling" progress bar, you should see the starter app with a welcome screen and two tabs at the bottom.

If your college or office Wi-Fi blocks devices from seeing each other, start the server with a tunnel. It is slower but usually works:

npx expo start --tunnel

Step 5: Change something and watch it update

Open src/app/index.tsx in your editor and change the welcome text to "Namaste from Lucknow". Save the file. Within a second the phone shows the new text, without losing its place. This is Fast Refresh: React Native keeps your state and swaps in the new code.

If you make a typing mistake, a red error overlay called LogBox appears on the phone. Fix the code and save. The overlay disappears by itself.

When Expo Go is not enough: development builds

Expo Go is a fixed app. It already contains a set of native libraries, and you cannot add more to it. You also cannot test remote push notifications, change the app icon or name, or use a library such as react-native-firebase inside it.

A development build is your own version of Expo Go, made from your project. It includes expo-dev-client, which adds the same developer menu and server launcher. You can build it on your computer or in the cloud:

npx expo install expo-dev-client

# Option A: build on your computer (needs Android Studio)
npx expo run:android

# Option B: build in the cloud with EAS (needs a free Expo account)
npm install --global eas-cli
eas login
eas build --platform android --profile development

Install the resulting app on your phone once. After that you still run npx expo start every day and enjoy Fast Refresh as before. You only rebuild when you add a native library or change native settings in app.json.

Building and installing on a real iPhone needs a paid Apple Developer account, and the iOS Simulator needs a Mac. On Windows you can still develop for Android and test iOS with Expo Go or a cloud build.

The React Native Community CLI (without a framework)

Some older or very custom projects do not use Expo. They are created with the Community CLI and keep android/ and ios/ folders that the team edits by hand:

npx @react-native-community/cli@latest init ChaiApp
cd ChaiApp
npm start
# in a second terminal
npm run android

This path needs Android Studio, the Android SDK and a Java Development Kit before the first run. For iOS on a Mac you also install CocoaPods dependencies with bundle install and bundle exec pod install inside the ios folder. You will meet this setup in existing company projects, so it is good to recognise it, but it is not needed for this course.

Common mistakes

• Phone and computer on different networks. Expo Go then cannot find Metro. Use the same Wi-Fi or --tunnel.
• Using npm install for native packages. Prefer npx expo install so versions match your SDK.
• Expecting a new native library to work in Expo Go. Libraries not bundled in Expo Go need a development build.
• Forgetting to rebuild. After adding a native library to a development build, build the app again.

Key points

• Create an Expo app with npx create-expo-app@latest and start it with npx expo start.
• Expo Go runs your JavaScript instantly but cannot include extra native code.
• A development build is your own Expo Go with any native library; build it locally or with EAS.
• Fast Refresh shows code changes on the phone in about a second and keeps state.
• The Community CLI creates projects without a framework, with native folders you manage yourself.

npx create-expo-app@latest my-first-app
cd my-first-app
npx expo start
# if the phone cannot reach the computer:
npx expo start --tunnel