Expo simplifies React Native development with a managed toolchain, dev server, and over-the-air updates.

Prerequisites

Install Node.js (LTS) and a code editor. For simulators:

  • iOS: macOS + Xcode
  • Android: Android Studio + emulator

Create a New Project 

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

Choose a template when prompted: blank, tabs, or TypeScript variants.

Project Structure 

  MyApp/
├── app/                  # File-based routing (Expo Router)
│   ├── _layout.tsx       # Root layout
│   └── index.tsx         # Home screen
├── assets/               # Images and fonts
├── app.json              # Expo configuration
├── package.json
└── tsconfig.json

Classic structure (without Expo Router) uses App.js at the root.

Run on a Device

  1. Install Expo Go on your phone (iOS / Android)
  2. Run npx expo start
  3. Scan the QR code with your camera (iOS) or Expo Go (Android)

Run on Simulators 

  npx expo start --ios       # iOS Simulator (macOS only)
npx expo start --android   # Android Emulator
npx expo start --web       # Browser preview

Press i, a, or w in the terminal after expo start.

app.json Configuration 

  {
    "expo": {
        "name": "My App",
        "slug": "my-app",
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/icon.png",
        "splash": {
            "image": "./assets/splash.png",
            "resizeMode": "contain",
            "backgroundColor": "#ffffff"
        },
        "ios": { "bundleIdentifier": "com.example.myapp" },
        "android": { "package": "com.example.myapp" }
    }
}

First Code Change

Edit app/index.tsx:

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

export default function Home() {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Welcome to JS Code Camp!</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    text: { fontSize: 20 },
});

Save and the app hot-reloads instantly.

Useful Commands 

  npx expo install <package>   # Install Expo-compatible packages
npx expo doctor              # Check for common issues
npx expo prebuild            # Generate native ios/ and android/ folders

Debugging

  • Shake device or press Cmd+D (iOS) / Cmd+M (Android) for dev menu
  • Press j in terminal to open Chrome DevTools
  • Use console.log — output appears in the terminal

Next: learn the core React Native components.