Expo Configuration Skill

This skill covers Expo SDK configuration for React Native projects.

When to Use

Use this skill when:

• Setting up a new Expo project
• Configuring app.json/app.config.js
• Adding native modules
• Configuring build settings

Core Principle

MANAGED WORKFLOW - Use Expo's managed workflow for best developer experience.

Project Initialization

# Create new Expo project
npx create-expo-app@latest my-app

# With specific template
npx create-expo-app@latest my-app --template tabs

App Configuration

app.json

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.company.myapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.company.myapp"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/favicon.png"
    },
    "plugins": [],
    "experiments": {
      "typedRoutes": true
    }
  }
}

app.config.js (Dynamic Configuration)

export default ({ config }) => {
  return {
    ...config,
    name: process.env.APP_NAME || 'My App',
    version: process.env.APP_VERSION || '1.0.0',
    extra: {
      apiUrl: process.env.API_URL,
      enableAnalytics: process.env.ENABLE_ANALYTICS === 'true',
    },
  };
};

Environment Variables

.env Files

# .env
EXPO_PUBLIC_API_URL=https://api.example.com
EXPO_PUBLIC_ANALYTICS_KEY=abc123

Using Environment Variables

// Must be prefixed with EXPO_PUBLIC_
const apiUrl = process.env.EXPO_PUBLIC_API_URL;

// Or use expo-constants for extra config
import Constants from 'expo-constants';
const { apiUrl } = Constants.expoConfig?.extra ?? {};

Common Plugins

Install Plugins

# Expo Router
npx expo install expo-router

# Secure Store
npx expo install expo-secure-store

# Image Picker
npx expo install expo-image-picker

# Camera
npx expo install expo-camera

# Location
npx expo install expo-location

# Notifications
npx expo install expo-notifications

# Haptics
npx expo install expo-haptics

Configure Plugins

{
  "expo": {
    "plugins": [
      "expo-router",
      "expo-secure-store",
      [
        "expo-image-picker",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos."
        }
      ],
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access camera."
        }
      ],
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
        }
      ]
    ]
  }
}

New Architecture

Enable New Architecture

{
  "expo": {
    "newArchEnabled": true
  }
}

EAS Configuration

eas.json

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

EAS Update Configuration

{
  "expo": {
    "updates": {
      "url": "https://u.expo.dev/your-project-id"
    },
    "runtimeVersion": {
      "policy": "appVersion"
    }
  }
}

Development Commands

# Start development server
npx expo start

# Start with specific platform
npx expo start --ios
npx expo start --android

# Clear cache
npx expo start --clear

# Prebuild native projects
npx expo prebuild

# Run native build
npx expo run:ios
npx expo run:android

TypeScript Configuration

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

expo-env.d.ts

/// <reference types="expo/types" />

// Add custom type declarations here
declare module '*.png' {
  const value: number;
  export default value;
}

Metro Configuration

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// Add custom configuration
config.resolver.sourceExts.push('cjs');

module.exports = config;

Splash Screen

Configure Splash

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#3B82F6"
    }
  }
}

Programmatic Control

import * as SplashScreen from 'expo-splash-screen';

// Prevent auto-hide
SplashScreen.preventAutoHideAsync();

// Hide when ready
await SplashScreen.hideAsync();

App Icons

Configure Icons

{
  "expo": {
    "icon": "./assets/icon.png",
    "ios": {
      "icon": "./assets/ios-icon.png"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

Notes

• Use EXPO_PUBLIC_ prefix for client-side env vars
• Enable typed routes for type-safe navigation
• Configure EAS for production builds
• Use app.config.js for dynamic configuration
• Add plugins for native functionality