Setting Up

Node, npx create-expo-app, and either Expo Go on your own phone or a simulator, with what each operating system can and cannot do.

Syntaxnpx create-expo-app@latest myapp && cd myapp && npx expo start

You need Node (Expo SDK 57 wants 22.13 or newer), a package manager and an editor. Nothing else is required to get your first screen onto a phone.

The project and the dev server

npx create-expo-app@latest myapp creates the project. Inside it, npx expo start runs Metro, the bundler, and prints a QR code. On Android, install Expo Go from Google Play and scan the code from inside Expo Go. On iOS, scan it with the Camera app; for a physical iPhone, Expo CLI and Expo Go must be signed into the same Expo account. The phone and the computer have to be on the same network.

Simulators and emulators

The iOS Simulator needs macOS, Xcode, its command line tools and at least one iOS runtime installed; then press i in the terminal. The Android emulator needs Android Studio with JDK 17, Android SDK Platform 36, the build tools and the emulator component; create a device, start it, then press a. Windows and Linux can do Android only. Building for iOS requires macOS or a cloud build.

Expo Go or your own build

Expo Go ships a fixed set of native modules. As soon as you add a library with native code of its own, you need a development build: npx expo run:android compiles one locally, and EAS builds one for iOS without a Mac.

Example

Example · tsx
import { StyleSheet, Text, View } from "react-native";

// Paste this over the first screen file of a fresh project to confirm the
// dev server, the bundler and the device are all talking to each other.
export default function Index() {
  return (
    <View style={styles.screen}>
      <Text style={styles.heading}>Setup works</Text>
      <Text style={styles.hint}>
        Change this line, save the file, and the device updates in about a
        second without losing its place.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 24,
    gap: 8,
  },
  heading: { fontSize: 22, fontWeight: "600" },
  hint: { fontSize: 14, textAlign: "center", color: "#55606a" },
});

When to use it

  • Get a first screen onto your own phone with nothing installed but Node.
  • Set up an Android emulator on Windows or Linux, where iOS development is not possible locally.
  • Work on a network that blocks the default LAN connection between laptop and phone.

More examples

Create, start, and the keys you will use all day

These keys replace most of the clicking people do in their first week. The two worth memorising on day one are r to reload when a change does not appear and m to reach the dev menu without shaking the phone.

Example · bash
node --version              # 22.13 or newer for Expo SDK 57
npx create-expo-app@latest fieldnotes
cd fieldnotes
npx expo start              # prints a QR code and the dev server URL

# While the server runs, in that same terminal:
#   a          open on a connected Android device or emulator
#   i          open an iOS Simulator (macOS only)
#   w          open in a web browser
#   r          reload the app
#   j          open React Native DevTools
#   m          open the dev menu on the device
#   s          switch between Expo Go and a development build
#   ?          list every shortcut

Simulator and emulator, once each

Do this when you need a second platform, a clean device, or the iOS keyboard and safe areas. It is not needed for the first lessons. If adb devices prints nothing for a physical phone, USB debugging is off in its developer options.

Example · bash
# macOS, for the iOS Simulator
xcode-select --install
# then open Xcode once, accept the licence, and install an iOS runtime
# from its settings; after that, press i in the Expo CLI

# Android, on any operating system
# install Android Studio, then from its SDK Manager add:
#   JDK 17, Android SDK Platform 36, Android SDK Build-Tools, Android Emulator
# create a virtual device in Device Manager and start it
adb devices                 # the emulator or phone should appear here
# then press a in the Expo CLI

When Expo Go is not enough

A development build is installed once and then used exactly like Expo Go: npx expo start, scan, develop. You rebuild it only when the native side changes, meaning a new native dependency or an app config change, not on every save.

Example · bash
npx expo start --tunnel     # phone and laptop cannot see each other

# A development build: your own app, with the dev tools inside it.
# Needed as soon as a dependency ships native code.
npx expo run:android        # compiles locally, needs Android Studio
npx expo run:ios            # compiles locally, needs Xcode on macOS
npx eas-cli build --profile development --platform ios   # or build in the cloud

Related

rn expo vs barern first apprn project structurern dev workflowrn eas build

Discussion

  • Be the first to comment on this lesson.