expo

When to Use

• Using any expo-* package
• Configuring app.json or app.config.js
• Building with EAS Build
• Managing permissions
• Working with Expo Router

Critical Patterns

App Configuration

// app.config.js (dynamic config - preferred)
export default ({ config }) => ({
  ...config,
  name: 'Iris',
  slug: 'iris',
  version: '1.0.0',
  orientation: 'portrait',
  icon: './assets/icon.png',
  splash: {
    image: './assets/splash.png',
    resizeMode: 'contain',
    backgroundColor: '#ffffff',
  },
  ios: {
    bundleIdentifier: 'com.yourcompany.iris',
    supportsTablet: false,
  },
  android: {
    package: 'com.yourcompany.iris',
    adaptiveIcon: {
      foregroundImage: './assets/adaptive-icon.png',
      backgroundColor: '#ffffff',
    },
  },
  plugins: [
    // Plugins configured here
  ],
});

Permissions with Config Plugins

// app.config.js
plugins: [
  [
    'expo-camera',
    {
      cameraPermission: 'Iris needs camera to describe your surroundings',
      microphonePermission: 'Iris needs microphone for voice commands',
    },
  ],
  [
    'expo-speech',
    {
      speechRecognitionPermission: 'Iris needs speech recognition for voice commands',
    },
  ],
],

Common Expo Modules

Camera

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

// Request permission
const [permission, requestPermission] = Camera.useCameraPermissions();

if (!permission?.granted) {
  await requestPermission();
}

// Use camera
<CameraView 
  style={{ flex: 1 }} 
  facing="back"
  ref={cameraRef}
/>

// Take photo
const photo = await cameraRef.current.takePictureAsync({
  quality: 0.8,
  base64: true,
});

Speech (TTS)

import * as Speech from 'expo-speech';

// Speak
Speech.speak('Hello world', {
  language: 'es-ES',
  rate: 0.85,
  pitch: 1.1,
  onDone: () => console.log('Done speaking'),
});

// Stop
Speech.stop();

// Check if speaking
const isSpeaking = await Speech.isSpeakingAsync();

Haptics

import * as Haptics from 'expo-haptics';

// Light tap
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

// Medium tap
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

// Success/Error/Warning
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

Keep Awake

import { useKeepAwake } from 'expo-keep-awake';

function App() {
  useKeepAwake(); // Prevents screen from sleeping
  return <View />;
}

Brightness

import * as Brightness from 'expo-brightness';

// Get current brightness
const brightness = await Brightness.getBrightnessAsync();

// Set brightness (0-1)
await Brightness.setBrightnessAsync(0.2);

// Restore system brightness
await Brightness.useSystemBrightnessAsync();

EAS Build

Setup

# Install EAS CLI
npm install -g eas-cli

# Login
eas login

# Configure project
eas build:configure

eas.json

{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  }
}

Build Commands

# Development build
eas build --profile development --platform ios
eas build --profile development --platform android

# Preview (internal testing)
eas build --profile preview --platform all

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

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

Development Commands

# Start dev server
npx expo start

# Clear cache
npx expo start --clear

# Run on specific platform
npx expo run:ios
npx expo run:android

# Install compatible package
npx expo install expo-camera

# Check for issues
npx expo-doctor

# Prebuild (generate native projects)
npx expo prebuild

# Upgrade Expo SDK
npx expo install expo@latest
npx expo install --fix

Environment Variables

// app.config.js
export default {
  extra: {
    apiUrl: process.env.API_URL,
    eas: {
      projectId: 'your-project-id',
    },
  },
};

// Access in app
import Constants from 'expo-constants';
const apiUrl = Constants.expoConfig.extra.apiUrl;

Anti-patterns