Mobile Step 1: Project Setup

Set up the React Native (Expo) project for the chat app.

What You'll Learn

  • Creating an Expo project
  • Running the app on your device
  • Understanding the project structure

Step 1: Install Expo CLI

npm install -g expo-cli

Or the newer approach:

npx create-expo-app@latest

Step 2: Create the Project

If starting fresh:

cd aiproject
npx create-expo-app@latest mobile --template blank-typescript
cd mobile

If using the provided code, the mobile/ folder already has the project files. Just install dependencies:

cd aiproject/mobile
npm install

Step 3: Install Required Dependencies

npx expo install react-native-safe-area-context

Step 4: Start the Expo Dev Server

npx expo start

You should see a QR code in the terminal.

Step 5: Run the App

Method How
Physical device Install Expo Go app on iOS/Android, scan QR code
Android emulator Press a in the terminal (Android Studio required)
iOS simulator Press i in the terminal (macOS only, Xcode required)
Web browser Press w

What You See

A blank white screen with nothing on it. In the next steps, you'll build the chat interface.

Understanding the Project

mobile/
├── App.tsx          # Main app component (you'll edit this)
├── package.json     # Dependencies
├── tsconfig.json    # TypeScript config
├── app.json         # Expo config (app name, icons, etc.)
└── node_modules/    # Installed packages

In React Native, App.tsx is the entry point — everything starts here.

Verification

  • Expo dev server is running
  • QR code is displayed
  • You can see the blank app on your phone/emulator
  • Changes to App.tsx auto-reload (hot reloading)
← Solutions