Creating the app and running it on a phone

Create the project:

npx create-expo-app@latest pantry
cd pantry
npx expo start

The default template includes TypeScript, Expo Router and an example tab layout. The terminal shows a QR code and a menu of options.

Running on a device

The quickest way to start is Expo Go, a free app from the App Store and Google Play that can load your project over the local network. Scan the QR code with the camera on iOS or from inside Expo Go on Android. Your phone and computer must be on the same network. If your network blocks device to device traffic, run npx expo start --tunnel.

Expo Go includes a fixed set of native modules. As soon as you need a library with custom native code, or you want your own app icon and name while testing, you switch to a development build. That is a version of your own app with developer tools included. We will create one in a later section. For now, Expo Go is enough.

You can also press i for the iOS Simulator (Mac only) or a for an Android emulator from Android Studio.

Fast refresh and the dev menu

Edit app/(tabs)/index.tsx and save. The app updates almost immediately and keeps component state. Shake the phone, or press m in the terminal, to open the developer menu, where you can reload, open the JavaScript debugger and toggle the performance monitor.

Project layout

app/
  _layout.tsx        root layout
  (tabs)/
    _layout.tsx      tab navigator
    index.tsx        first tab
assets/              images and fonts
app.json             app name, icons, permissions

Every file inside app is a route. Folders in parentheses group routes without adding a URL segment, the same idea as route groups on the web.

Clean start

Run npm run reset-project to move the example code aside and get a blank app folder. Then create app/index.tsx that returns a Text saying "Pantry". Save, and check it on your phone. That is our starting point.