> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/expo/expo/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Create and run your first Expo app in 5 minutes

Get your first Expo app running in just a few minutes. This guide will walk you through creating a new project and seeing it on your device or simulator.

<Note>
  This quickstart uses **Expo Go**, which means you don't need to install Xcode or Android Studio. For custom native code, see [Development Builds](/development/introduction).
</Note>

## Prerequisites

Before starting, make sure you have:

* **Node.js 18+** installed ([nodejs.org](https://nodejs.org/))
* A code editor (VS Code recommended)
* A mobile device OR iOS Simulator / Android Emulator

<Steps>
  <Step title="Create a new app">
    Open your terminal and run:

    <CodeGroup>
      ```bash npm theme={null}
      npx create-expo-app my-app
      ```

      ```bash yarn theme={null}
      yarn create expo-app my-app
      ```

      ```bash pnpm theme={null}
      pnpm create expo-app my-app
      ```
    </CodeGroup>

    This creates a new Expo project with a working app template. The command will:

    * Create a `my-app` directory
    * Install all required dependencies
    * Set up the project structure with Expo Router

    <Accordion title="What gets created?">
      ```bash theme={null}
      my-app/
      ├── app/
      │   ├── _layout.tsx          # Root layout
      │   ├── index.tsx            # Home screen
      │   └── explore.tsx          # Example screen
      ├── assets/                  # Images, fonts, etc
      ├── components/              # Reusable components
      ├── app.json                # Expo configuration
      ├── package.json            # Dependencies
      └── tsconfig.json           # TypeScript config
      ```
    </Accordion>
  </Step>

  <Step title="Navigate to project">
    Change into your new project directory:

    ```bash theme={null}
    cd my-app
    ```
  </Step>

  <Step title="Start the development server">
    Start the Expo development server:

    <CodeGroup>
      ```bash npm theme={null}
      npx expo start
      ```

      ```bash yarn theme={null}
      yarn start
      ```

      ```bash pnpm theme={null}
      pnpm start
      ```
    </CodeGroup>

    You'll see a QR code in your terminal and output like this:

    ```bash theme={null}
    › Metro waiting on exp://192.168.1.100:8081
    › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

    › Press a │ open Android
    › Press i │ open iOS simulator
    › Press w │ open web

    › Press r │ reload app
    › Press m │ toggle menu
    ```

    <Info>
      The development server uses Metro bundler to compile your JavaScript and serve it to your app.
    </Info>
  </Step>

  <Step title="Open on your device">
    ### On your phone

    1. Install **Expo Go** on your device:
       * [iOS App Store](https://apps.apple.com/app/expo-go/id982107779)
       * [Google Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)

    2. Scan the QR code:
       * **iOS**: Use the Camera app
       * **Android**: Use the Expo Go app

    ### Using a simulator

    **iOS Simulator (Mac only):**

    Press `i` in the terminal. Expo will:

    * Open Xcode Simulator automatically
    * Install Expo Go if needed
    * Launch your app

    **Android Emulator:**

    Press `a` in the terminal. Make sure you have an Android emulator running first.

    **Web Browser:**

    Press `w` to open in your default browser.
  </Step>

  <Step title="Make your first change">
    Open `app/index.tsx` in your editor and modify the welcome text:

    ```tsx app/index.tsx theme={null}
    export default function HomeScreen() {
      return (
        <ThemedView style={styles.container}>
          <SafeAreaView style={styles.safeArea}>
            <ThemedView style={styles.heroSection}>
              <AnimatedIcon />
              <ThemedText type="title" style={styles.title}>
                Hello from Expo! {/* Changed this line */}
              </ThemedText>
            </ThemedView>
            {/* ... rest of the component */}
          </SafeAreaView>
        </ThemedView>
      );
    }
    ```

    Save the file and watch your app update instantly thanks to **Fast Refresh**!
  </Step>
</Steps>

## What Just Happened?

Congratulations! You just:

1. Created a new Expo app with Expo Router for navigation
2. Started a development server with Metro bundler
3. Opened your app on a device or simulator
4. Made a change and saw it update in real-time

## Understanding Your Project

### File-Based Routing

Your app uses **Expo Router** for navigation. Files in the `app/` directory automatically become routes:

```bash theme={null}
app/
  _layout.tsx     # Layout wrapping all screens
  index.tsx       # Home screen (route: /)
  explore.tsx     # Explore screen (route: /explore)
```

Navigate between screens using the `Link` component:

```tsx theme={null}
import { Link } from 'expo-router';

<Link href="/explore">Go to Explore</Link>
```

### Key Files

<Accordion title="app.json - App Configuration">
  Controls your app's settings:

  ```json app.json theme={null}
  {
    "expo": {
      "name": "my-app",
      "slug": "my-app",
      "version": "1.0.0",
      "orientation": "portrait",
      "icon": "./assets/images/icon.png",
      "scheme": "myapp",
      "userInterfaceStyle": "automatic",
      "ios": {
        "bundleIdentifier": "com.yourcompany.myapp"
      },
      "android": {
        "package": "com.yourcompany.myapp"
      }
    }
  }
  ```
</Accordion>

<Accordion title="package.json - Dependencies">
  Lists your app's dependencies and scripts:

  ```json package.json theme={null}
  {
    "name": "my-app",
    "main": "expo-router/entry",
    "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "web": "expo start --web"
    },
    "dependencies": {
      "expo": "~55.0.0",
      "expo-router": "~55.0.0",
      "react": "19.2.0",
      "react-native": "0.83.2"
    }
  }
  ```
</Accordion>

## Development Commands

<CodeGroup>
  ```bash Start development server theme={null}
  npx expo start
  ```

  ```bash Start with clear cache theme={null}
  npx expo start --clear
  ```

  ```bash Launch on Android theme={null}
  npx expo start --android
  ```

  ```bash Launch on iOS theme={null}
  npx expo start --ios
  ```

  ```bash Launch on Web theme={null}
  npx expo start --web
  ```
</CodeGroup>

## Interactive Terminal

When the dev server is running, press:

* `a` - Open on Android emulator
* `i` - Open on iOS simulator
* `w` - Open in web browser
* `r` - Reload the app
* `m` - Toggle developer menu
* `j` - Open React DevTools (web)
* `c` - Show project QR code

## Common Issues

<AccordionGroup>
  <Accordion title="Can't scan QR code">
    Make sure your phone and computer are on the same WiFi network. If using a corporate network, try:

    ```bash theme={null}
    npx expo start --tunnel
    ```

    This uses a public URL that works on any network.
  </Accordion>

  <Accordion title="Port already in use">
    The default port (8081) is taken. Try:

    ```bash theme={null}
    npx expo start --port 8082
    ```
  </Accordion>

  <Accordion title="iOS Simulator won't open">
    Make sure Xcode is installed:

    ```bash theme={null}
    xcode-select --install
    ```

    Then try running the simulator first:

    ```bash theme={null}
    open -a Simulator
    ```
  </Accordion>

  <Accordion title="Metro bundler errors">
    Clear the cache and restart:

    ```bash theme={null}
    npx expo start --clear
    ```
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Learn Core Concepts" icon="book" href="/core-concepts/architecture">
    Understand how Expo works under the hood
  </Card>

  <Card title="Follow the Tutorial" icon="graduation-cap" href="/tutorial/create-project">
    Build a complete app step-by-step
  </Card>

  <Card title="Explore the SDK" icon="puzzle-piece" href="/sdk/overview">
    Browse 100+ native modules for camera, location, notifications, and more
  </Card>

  <Card title="Complete Installation" icon="download" href="/installation">
    Set up for production builds with Xcode and Android Studio
  </Card>
</CardGroup>

<Warning>
  Remember: Expo Go is perfect for learning and prototyping, but for custom native code or third-party native libraries, you'll need to create a [development build](/development/introduction).
</Warning>