🎉 Creating Your First Project

Creating the Project

Let's create your first React Native app! With Expo, this takes just one command. Open your terminal and navigate to where you want to create your project (e.g., your projects folder).

Step 1: Run the Create Command

# Navigate to your projects directory
cd ~/projects  # or wherever you keep your code

# Create a new Expo project
npx create-expo-app@latest my-first-app

# Move into the project directory
cd my-first-app

The npx create-expo-app@latest command:

• Downloads the latest Expo project template
• Creates a new folder with your project name
• Installs all necessary dependencies
• Sets up TypeScript configuration

# Blank template (default)
npx create-expo-app@latest my-app

# With specific template
npx create-expo-app@latest my-app --template blank-typescript
npx create-expo-app@latest my-app --template tabs  # Tab navigation starter

What You'll See

The CLI will show progress as it creates your project:

✔ Downloaded and extracted project files.
> Installing dependencies...

✔ Installed dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd my-first-app
- npm run android
- npm run ios
- npm run web

Understanding the Project Structure

Let's explore what was created. Open the project in VS Code:

# Open in VS Code
code .

You'll see a folder structure like this:

The default Expo project structure with Expo Router

Key Files Explained

Running Your App

Time for the exciting part — let's see your app running! Start the development server:

# Start the development server
npx expo start

You'll see output like this:

Starting project at /Users/you/projects/my-first-app
Starting Metro Bundler

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀▄▀▄█ ▄█ ▄▄▄▄▄ █
█ █   █ █▀▄ ▀ ▄▄█ █   █ █
█ █▄▄▄█ █ ▄▀▀▀▄ █ █▄▄▄█ █
█▄▄▄▄▄▄▄█ ▀▄▀ ▀▄█▄▄▄▄▄▄▄█
                (QR Code)
                
› Metro waiting on exp://192.168.1.100:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

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

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Option 1: Run on Your Phone (Expo Go)

1. Open Expo Go on your phone
2. Android: Tap "Scan QR code" and scan the terminal QR code
3. iOS: Open your Camera app, point at the QR code, tap the notification
4. Wait for the bundle to load...
5. 🎉 Your app is running!

Option 2: Run on iOS Simulator (Mac Only)

# With server running, press 'i'
# Or run directly:
npx expo start --ios

This will:

1. Open the iOS Simulator (if not already open)
2. Install Expo Go on the simulator
3. Launch your app

Option 3: Run on Android Emulator

# First, start your Android emulator from Android Studio
# Then, with server running, press 'a'
# Or run directly:
npx expo start --android

This will:

1. Detect the running emulator
2. Install Expo Go on the emulator
3. Launch your app

What You Should See

Your first app running — it's not much, but it's yours!

Your First Code Change

Now let's experience the magic of hot reloading. Open app/index.tsx in VS Code:

import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

Make a Change

Let's modify this to make it your own. Change the file to:

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

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>🚀 Hello, React Native!</Text>
      <Text style={styles.subtitle}>My first app is running!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f4f8",
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#1a365d",
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: "#4a5568",
  },
});

Save and Watch

1. Save the file (Ctrl/Cmd + S)
2. Look at your app...
3. ✨ It updated instantly!

sequenceDiagram
    participant You as 👨‍💻 You
    participant Code as 📁 Code
    participant Metro as ⚡ Metro
    participant App as 📱 App
    
    You->>Code: Save file
    Code->>Metro: File changed!
    Metro->>Metro: Bundle changes
    Metro->>App: Send update
    App->>App: Hot reload
    Note over App: UI updates instantly!
    
    Note over You,App: Total time: ~100-500ms
                

Hot reloading keeps your app running while applying code changes

Try More Changes

Experiment! Try these modifications and watch them update live:

// Change the background color
backgroundColor: "#1a365d",  // Dark blue

// Change the text color
color: "#fff",  // White text

// Add more text
<Text style={styles.subtitle}>Built with Expo 🎯</Text>
<Text style={styles.subtitle}>Running on {Platform.OS}</Text>

// (Add this import at the top)
import { Text, View, StyleSheet, Platform } from "react-native";

Understanding app.json

The app.json file is your app's configuration. It controls things like the app name, icon, splash screen, and more. Let's look at it:

{
  "expo": {
    "name": "my-first-app",
    "slug": "my-first-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/images/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router"
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

Key Configuration Options

Platform-Specific Configuration

Notice the ios and android sections? These let you configure platform-specific settings:

{
  "expo": {
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp",
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

Summary

Commands to Remember

🚀 What's Next?

You have a running app! In the next lesson, we'll dive deeper into the development workflow — understanding Metro bundler, debugging tools, and how to be productive in your day-to-day development.