Expo

Project Setup

npx create-expo-app@latest my-app --template tabs cd my-app && npx expo start

Expo Router (file-based routing)

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