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
