Running on a phone, an emulator and the web

The app code is bundled and served by the Metro development server. A phone, an emulator or a browser connects to it and shows the app, and after you save a file the screen updates by itself.

The development server

Run this in the project folder:

npx expo start

The terminal shows a QR code, the address http://localhost:8081 and a list of hotkeys. Keep the server running while you write code; stop it with Ctrl+C.

On a phone with Expo Go

1. Connect the computer and the phone to the same Wi-Fi network.
2. On Android, open Expo Go and tap "Scan QR code".
3. On an iPhone, point the regular camera at the QR code and tap the link that appears.

In a few seconds the phone shows the screen with the text from app/index.tsx. If the phone cannot connect (for example, on an office network), start the server through a tunnel:

npx expo start --tunnel

In an emulator or simulator

An emulator is a program that imitates a phone on your computer.

Press the key in the terminal window where npx expo start is running. Expo installs Expo Go into the emulator and opens the project. The iOS Simulator runs only on macOS; on Windows and Linux use a real phone for the iPhone.

In a browser

The w key opens the app at http://localhost:8081. React Native for Web turns View and Text into HTML elements, so the web version is handy for quickly checking the layout. But the camera, vibration and some modules are not available in a browser, so always do the final check on a phone.

Updating the screen

Change the text in app/index.tsx and save the file:

// app/index.tsx
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>My tasks</Text>
    </View>
  );
}

A second later the phone shows "My tasks" without a restart. This is Fast Refresh. Values of useState are usually preserved.

Useful keys

Common mistake

The phone and the computer are on different networks, for example the phone uses mobile data and the computer uses Wi-Fi. Expo Go then loads forever or says it cannot connect. Switch the phone to the same Wi-Fi network or use npx expo start --tunnel.