app/
├── _layout.tsx          # Root layout
├── index.tsx            # / route
├── (tabs)/
│   ├── _layout.tsx      # Tab layout
│   ├── home.tsx         # /home tab
│   └── profile.tsx      # /profile tab
└── product/[id].tsx     # /product/:id

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="product/[id]" options={{ title: 'Product' }} />
    </Stack>
  );
}

// app/product/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function ProductScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <Text>Product {id}</Text>;
}

// Navigate
import { router } from 'expo-router';
router.push('/product/123');

app.json / app.config.ts

// app.config.ts (dynamic config)
import { ExpoConfig, ConfigContext } from 'expo/config';

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: 'My App',
  slug: 'my-app',
  version: '1.0.0',
  ios: { bundleIdentifier: 'com.example.myapp' },
  android: { package: 'com.example.myapp' },
  plugins: ['expo-camera', 'expo-location'],
  extra: {
    apiUrl: process.env.API_URL ?? 'https://api.example.com',
  },
});

EAS Build & Submit

# Install EAS CLI
npm install -g eas-cli

# Configure
eas build:configure

# Build
eas build --platform ios --profile production
eas build --platform android --profile production

# Submit to stores
eas submit --platform ios
eas submit --platform android

// eas.json
{
  "build": {
    "development": { "developmentClient": true, "distribution": "internal" },
    "preview": { "distribution": "internal" },
    "production": { "autoIncrement": true }
  }
}

EAS Update (OTA)

eas update --branch production --message "Fix login bug"

import * as Updates from 'expo-updates';

async function checkForUpdates() {
  const update = await Updates.checkForUpdateAsync();
  if (update.isAvailable) {
    await Updates.fetchUpdateAsync();
    await Updates.reloadAsync();
  }
}

Common Expo SDK Modules

// Camera
import { CameraView, useCameraPermissions } from 'expo-camera';

// Location
import * as Location from 'expo-location';
const { status } = await Location.requestForegroundPermissionsAsync();
const location = await Location.getCurrentPositionAsync({});

// Secure Store
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('token', value);
const token = await SecureStore.getItemAsync('token');

// Notifications
import * as Notifications from 'expo-notifications';
const { status } = await Notifications.requestPermissionsAsync();
const token = (await Notifications.getExpoPushTokenAsync()).data;

Anti-Patterns

Anti-Pattern	Fix
Ejecting for simple native needs	Use config plugins or Expo Modules API
Hardcoded API URLs	Use `app.config.ts` with `extra` and env vars
No EAS Update for JS fixes	Set up EAS Update for OTA patches
Using Expo Go for production testing	Use development builds (`npx expo run:ios`)
Ignoring permission UX	Request permissions contextually with explanation

Production Checklist

EAS Build profiles configured (dev, preview, production)
EAS Update configured for OTA
App store metadata and screenshots prepared
Splash screen and app icon configured
Environment variables via app.config.ts
Error tracking (Sentry Expo)
Deep linking scheme configured

expo

Expo

Project Setup

Expo Router (file-based routing)