# Create a managed project
npx create-expo-app@latest my-app
cd my-app
npx expo start

# Create with bare template
npx create-expo-app@latest my-app --template bare-minimum

# Generate native projects from config
npx expo prebuild

# Generate and clean existing native dirs first
npx expo prebuild --clean

# Platform-specific generation
npx expo prebuild --platform ios

app/
├── _layout.tsx              Root layout (wraps all routes)
├── index.tsx                / (home screen)
├── settings.tsx             /settings
├── (auth)/                  Route group (no URL segment)
│   ├── _layout.tsx          Auth layout
│   ├── login.tsx            /login
│   └── register.tsx         /register
├── (tabs)/                  Tab navigator group
│   ├── _layout.tsx          Tab layout
│   ├── home.tsx             /home (tab)
│   ├── search.tsx           /search (tab)
│   └── profile.tsx          /profile (tab)
├── orders/
│   ├── index.tsx            /orders
│   └── [id].tsx             /orders/123 (dynamic route)
├── products/
│   └── [category]/
│       └── [id].tsx         /products/shoes/abc (nested dynamic)
└── modal.tsx                Modal route

// app/_layout.tsx
import { Stack } from 'expo-router';
import { ThemeProvider } from '@/providers/ThemeProvider';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '@/core/api/queryClient';

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options={{ presentation: 'modal', headerTitle: 'Details' }}
          />
        </Stack>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#0066CC' }}>
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: 'Search',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}

// app/orders/[id].tsx
import { useLocalSearchParams, router } from 'expo-router';
import { View, Text, Pressable } from 'react-native';

export default function OrderDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <View>
      <Text>Order: {id}</Text>
      <Pressable onPress={() => router.push('/orders')}>
        <Text>Back to orders</Text>
      </Pressable>
    </View>
  );
}

// Navigate with type safety from elsewhere
import { router } from 'expo-router';

router.push({ pathname: '/orders/[id]', params: { id: 'abc-123' } });

// app.config.ts
export default {
  expo: {
    ios: {
      associatedDomains: ['applinks:example.com'],
    },
    android: {
      intentFilters: [
        {
          action: 'VIEW',
          autoVerify: true,
          data: [{ scheme: 'https', host: 'example.com', pathPrefix: '/orders' }],
        },
      ],
    },
  },
};

import { Image, type ImageSource } from 'expo-image';
import { StyleSheet, View } from 'react-native';

const blurhash = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';

interface ProductImageProps {
  uri: string;
  width: number;
  height: number;
}

export function ProductImage({ uri, width, height }: ProductImageProps) {
  return (
    <Image
      source={{ uri }}
      placeholder={{ blurhash }}
      contentFit="cover"
      transition={200}
      cachePolicy="memory-disk"
      recyclingKey={uri}
      style={{ width, height, borderRadius: 8 }}
    />
  );
}

// Prefetch images for upcoming screens
export async function prefetchProductImages(urls: string[]) {
  await Image.prefetch(urls);
}

// Clear cache when storage is constrained
export async function clearImageCache() {
  await Image.clearDiskCache();
  await Image.clearMemoryCache();
}

# Scaffold a new module
npx create-expo-module@latest my-native-analytics

// ios/MyNativeAnalyticsModule.swift
import ExpoModulesCore

public class MyNativeAnalyticsModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyNativeAnalytics")

    // Sync function — runs on JS thread, returns immediately
    Function("getDeviceId") { () -> String in
      return UIDevice.current.identifierForVendor?.uuidString ?? "unknown"
    }

    // Async function — runs on background thread
    AsyncFunction("trackEvent") { (name: String, properties: [String: Any]) in
      // Forward to your analytics SDK
      AnalyticsSDK.shared.track(event: name, properties: properties)
    }

    // Events — push data from native to JS
    Events("onAnalyticsReady", "onSessionStart")

    // Called when the module is instantiated
    OnCreate {
      AnalyticsSDK.shared.initialize { [weak self] in
        self?.sendEvent("onAnalyticsReady", [:])
      }
    }

    // View component
    View(MyNativeChartView.self) {
      Prop("dataPoints") { (view, points: [Double]) in
        view.updateData(points)
      }

      Events("onPointSelected")
    }
  }
}

// android/src/main/java/expo/modules/mynativeanalytics/MyNativeAnalyticsModule.kt
package expo.modules.mynativeanalytics

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition
import android.provider.Settings

class MyNativeAnalyticsModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyNativeAnalytics")

    Function("getDeviceId") {
      Settings.Secure.getString(
        appContext.reactContext?.contentResolver,
        Settings.Secure.ANDROID_ID
      ) ?: "unknown"
    }

    AsyncFunction("trackEvent") { name: String, properties: Map<String, Any> ->
      AnalyticsSDK.instance.track(name, properties)
    }

    Events("onAnalyticsReady", "onSessionStart")

    OnCreate {
      AnalyticsSDK.instance.initialize {
        sendEvent("onAnalyticsReady", emptyMap<String, Any>())
      }
    }
  }
}

// src/modules/analytics.ts
import { requireNativeModule } from 'expo-modules-core';
import { EventEmitter, type Subscription } from 'expo-modules-core';

const NativeAnalytics = requireNativeModule('MyNativeAnalytics');
const emitter = new EventEmitter(NativeAnalytics);

export function getDeviceId(): string {
  return NativeAnalytics.getDeviceId();
}

export async function trackEvent(
  name: string,
  properties: Record<string, unknown> = {},
): Promise<void> {
  await NativeAnalytics.trackEvent(name, properties);
}

export function onAnalyticsReady(callback: () => void): Subscription {
  return emitter.addListener('onAnalyticsReady', callback);
}

// eas.json
{
  "cli": {
    "version": ">= 12.0.0",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api-dev.example.com"
      }
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "resourceClass": "m-medium"
      },
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api-staging.example.com"
      },
      "channel": "preview"
    },
    "production": {
      "autoIncrement": true,
      "ios": {
        "resourceClass": "m-medium"
      },
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.example.com"
      },
      "channel": "production"
    }
  },
  "submit": {
    "production": {
      "ios": {
        "ascAppId": "1234567890",
        "appleTeamId": "ABCDEF1234"
      },
      "android": {
        "serviceAccountKeyPath": "./google-service-account.json",
        "track": "internal"
      }
    }
  }
}

# Development build (includes dev tools)
npx eas-cli build --profile development --platform ios

# Preview build (for internal testers)
npx eas-cli build --profile preview --platform all

# Production build
npx eas-cli build --profile production --platform all

# Local build (uses your machine instead of EAS cloud)
npx eas-cli build --profile development --platform ios --local

#!/bin/bash
# eas-build-pre-install.sh
# Install system dependencies not included in the default image
apt-get install -y libvips-dev

# Submit the latest build to App Store Connect
npx eas-cli submit --platform ios --latest

# Submit to Google Play internal track
npx eas-cli submit --platform android --latest

# Submit a specific build
npx eas-cli submit --platform ios --id <build-id>

App startup
  ├── Check for updates (background)
  ├── Download new bundle if available
  └── Apply on next launch (or immediately with fallback)

# Publish an update to the production branch
npx eas-cli update --branch production --message "Fix checkout validation"

# Publish to a preview branch
npx eas-cli update --branch preview --message "New onboarding flow"

# Publish with automatic branch detection from git
npx eas-cli update --auto

// app.config.ts
export default {
  expo: {
    runtimeVersion: {
      policy: 'fingerprint',  // auto-generated from native dependencies
    },
    updates: {
      url: 'https://u.expo.dev/<project-id>',
      fallbackToCacheTimeout: 3000,
    },
  },
};

# Roll back by publishing the previous branch state
npx eas-cli update --branch production --message "Rollback: revert checkout fix"

# Or point the channel to a different branch entirely
npx eas-cli channel:edit production --branch rollback-branch

// store.config.json
{
  "configVersion": 0,
  "apple": {
    "info": {
      "en-US": {
        "title": "My App",
        "subtitle": "Tagline here",
        "description": "Full description...",
        "keywords": ["keyword1", "keyword2"],
        "privacyPolicyUrl": "https://example.com/privacy"
      }
    },
    "categories": ["UTILITIES"],
    "age_rating": {
      "CARTOON_FANTASY_VIOLENCE": "NONE"
    }
  },
  "android": {
    "title": { "en-US": "My App" },
    "short_description": { "en-US": "Short description" },
    "full_description": { "en-US": "Full description..." }
  }
}

# Push metadata to stores
npx eas-cli metadata:push

# Pull current metadata from stores into local config
npx eas-cli metadata:pull

// app.config.ts
import type { ExpoConfig, ConfigContext } from 'expo/config';

export default ({ config }: ConfigContext): ExpoConfig => {
  const isProduction = process.env.APP_VARIANT === 'production';

  return {
    ...config,
    name: isProduction ? 'My App' : 'My App (Dev)',
    slug: 'my-app',
    version: '1.5.0',
    orientation: 'portrait',
    icon: './assets/icon.png',
    scheme: 'myapp',
    splash: {
      image: './assets/splash.png',
      resizeMode: 'contain',
      backgroundColor: '#ffffff',
    },
    ios: {
      supportsTablet: true,
      bundleIdentifier: isProduction
        ? 'com.example.myapp'
        : 'com.example.myapp.dev',
      infoPlist: {
        NSCameraUsageDescription: 'Camera access is needed for document scanning.',
      },
    },
    android: {
      adaptiveIcon: {
        foregroundImage: './assets/adaptive-icon.png',
        backgroundColor: '#ffffff',
      },
      package: isProduction
        ? 'com.example.myapp'
        : 'com.example.myapp.dev',
    },
    plugins: [
      'expo-router',
      [
        'expo-camera',
        { cameraPermission: 'Allow camera access for scanning.' },
      ],
      [
        'expo-build-properties',
        {
          ios: { deploymentTarget: '15.0' },
          android: { minSdkVersion: 24, compileSdkVersion: 34 },
        },
      ],
    ],
    extra: {
      eas: { projectId: 'your-project-id' },
    },
  };
};

{
  "plugins": [
    ["expo-camera", { "cameraPermission": "We need camera for barcode scanning" }],
    ["expo-location", { "locationAlwaysAndWhenInUsePermission": "We track delivery routes" }],
    ["expo-notifications", { "icon": "./assets/notification-icon.png" }]
  ]
}

// plugins/withCustomSplash.ts
import { withInfoPlist, withAndroidManifest, type ConfigPlugin } from 'expo/config-plugins';

const withCustomSplash: ConfigPlugin<{ statusBarColor?: string }> = (
  config,
  { statusBarColor = '#ffffff' } = {},
) => {
  // Modify iOS Info.plist
  config = withInfoPlist(config, (modConfig) => {
    modConfig.modResults.UIStatusBarStyle = 'UIStatusBarStyleDarkContent';
    return modConfig;
  });

  // Modify Android AndroidManifest.xml
  config = withAndroidManifest(config, (modConfig) => {
    const mainApplication = modConfig.modResults.manifest.application?.[0];
    if (mainApplication) {
      mainApplication.$['android:theme'] = '@style/AppTheme';
    }
    return modConfig;
  });

  return config;
};

export default withCustomSplash;

// app.config.ts
plugins: [
  ['./plugins/withCustomSplash', { statusBarColor: '#0066CC' }],
],

# .env.development
EXPO_PUBLIC_API_URL=https://api-dev.example.com
EXPO_PUBLIC_FEATURE_FLAGS_ENABLED=true

# .env.production
EXPO_PUBLIC_API_URL=https://api.example.com
EXPO_PUBLIC_FEATURE_FLAGS_ENABLED=false

// Access in code — available at build time, baked into the bundle
const apiUrl = process.env.EXPO_PUBLIC_API_URL;

# Upgrade Expo SDK and all related packages
npx expo install expo@latest --fix

# Check for dependency issues after upgrade
npx expo-doctor

# Clean regeneration — removes old ios/ and android/
npx expo prebuild --clean

# Verify the build still works
npx eas-cli build --profile development --platform all --local

# CI step: upgrade, prebuild, build, run tests
npx expo install expo@latest --fix
npx expo-doctor
npx expo prebuild --clean
npx eas-cli build --profile development --platform ios --local --non-interactive

# .gitignore for CNG projects
ios/
android/

# Build a development client for real-device testing
npx eas-cli build --profile development --platform ios

# Install on device and connect
npx expo start --dev-client

npx expo-doctor