Expo Project Setup Guide

Prerequisites

Before getting started, ensure the following are installed on your system:

• Node.js (Latest LTS Version Recommended)
• npm or yarn
• Git
• VS Code or any preferred IDE

---

1. Create a New Expo Project

Create a new Expo project using:

npx create-expo-app@latest

Expo provides multiple templates that can be used based on project requirements.

To create a project using Expo SDK 56:

npx create-expo-app@latest --template default@sdk-56

---

2. Navigate to the Project Directory

cd <project-name>

---

3. Start the Expo Development Server

Start the development server:

npx expo start

This will launch the Expo development server and generate a QR code for testing on physical devices.

---

Available Expo Shortcuts

After running:

npx expo start

You can use the following shortcuts directly from the terminal:

a  → Open Android Emulator / Connected Android Device
i  → Open iOS Simulator (macOS Only)
w  → Open Web Browser

r  → Reload Application
m  → Open Developer Menu
j  → Open Debugger
o  → Open Project in Editor
?  → Show All Available Commands

---

4. Running the Application

Android Device

1. Install Expo Go from the Google Play Store.
2. Ensure the installed Expo Go version supports Expo SDK 56.
3. Connect your mobile device and development machine to the same network.
4. Scan the QR code displayed in the terminal or browser.

---

iOS Device

1. Install Expo Go from the Apple App Store.
2. Ensure the installed Expo Go version supports Expo SDK 56.
3. Open Expo Go and scan the QR code generated by Expo.

---

Web

Run:

npx expo start --web

Or simply press:

w

from the Expo terminal.

---

5. Installing Expo Go

Download Expo Go from:

https://expo.dev/go

Important:

• Always install a version of Expo Go that supports your project's SDK version.
• For this project, ensure Expo Go supports Expo SDK 56.
• Physical devices are recommended for testing camera, notifications, sensors, location services, and other native features.

---

6. Expo Router (File-Based Routing)

Expo Router provides a file-based routing system similar to Next.js.

Automatic Setup (Recommended)

When creating a project using:

npx create-expo-app@latest --template default@sdk-56

Expo Router is generally pre-configured and ready to use.

---

Manual Installation

If routing is not already configured, install the required dependencies:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

For complete manual installation instructions, visit:

https://docs.expo.dev/router/installation/

---

7. Basic Expo Router Structure

Example project structure:

app/
│
├── _layout.tsx
├── index.tsx
│
├── home/
│   └── index.tsx
│
└── profile/
    └── index.tsx

Example routes:

/           → app/index.tsx
/home       → app/home/index.tsx
/profile    → app/profile/index.tsx

---

8. Recommended Project Structure

project-root/
│
├── app/
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── screens/
│   ├── services/
│   ├── hooks/
│   ├── utils/
│   ├── constants/
│   ├── theme/
│   ├── config/
│   └── store/
│
├── public/
├── package.json
├── app.json
├── tsconfig.json
└── README.md

---

9. Useful Commands

Create Expo Project

npx create-expo-app@latest

Create Expo SDK 56 Project

npx create-expo-app@latest --template default@sdk-56

Start Development Server

npx expo start

Run on Web

npx expo start --web

Install Expo Router Dependencies

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Install Dependencies

npm install

Reset Metro Cache

npx expo start --clear

Remove Codebase provided by EXPO

npm run reset-project

---

References

Expo Documentation

https://docs.expo.dev/

Expo Go

https://expo.dev/go

Expo Router Documentation

https://docs.expo.dev/router/introduction/

---