Configure Expo Apps with app.json and app.config.js

This skill configures Expo apps for React Native - app.json/app.config.js setup, SDK features, platform-specific configuration, build settings, and deployment optimization. Core principle: use static app.json for configuration that doesn't change between environments, and dynamic app.config.js when environment variables or conditional logic are needed, never hardcoding sensitive data directly in either. Both iOS and Android should always be configured explicitly, respecting each platform's own permission and capability conventions rather than assuming shared defaults.

Use it when an Expo app needs environment-aware configuration (dev/preview/production app names, bundle IDs, and schemes), native plugin setup, or deep linking - not just a default app.json.

const IS_DEV = process.env.APP_VARIANT === 'development';
const IS_PREVIEW = process.env.APP_VARIANT === 'preview';

export default {
  expo: {
    name: IS_DEV ? 'MyApp (Dev)' : IS_PREVIEW ? 'MyApp (Preview)' : 'MyApp',
    slug: IS_DEV ? 'myapp-dev' : IS_PREVIEW ? 'myapp-preview' : 'myapp',
    extra: { apiUrl: process.env.API_URL, eas: { projectId: process.env.EAS_PROJECT_ID } },
    updates: { url: `https://u.expo.dev/${process.env.EAS_PROJECT_ID}` },
    runtimeVersion: { policy: 'sdkVersion' }
  }
};

EAS build profiles are configured in eas.json (development with developmentClient: true, preview, and production, each carrying its own APP_VARIANT env var). Plugin configuration is shown for expo-camera, expo-location, expo-notifications, and async-storage, each with platform-specific permission-prompt text. Asset configuration covers icon and splash-screen images at platform-specific resolutions, including per-density Android splash variants (mdpi through xxxhdpi) and a tablet-specific iOS splash image. Deep linking setup covers a custom scheme, iOS associatedDomains for universal links, and Android intentFilters with autoVerify for App Links. Security and performance guidance: never commit sensitive env variables, use EAS Secrets for build-time sensitive values, implement certificate pinning in production, and scope assetBundlePatterns plus metro.config.js tree-shaking to control bundle size.

React Native developers configuring an Expo app's environment variants, native plugins, and deep linking who need concrete app.config.js/eas.json patterns, not just the Expo documentation's individual reference pages. Common pitfalls it calls out directly: missing platform-specific bundle identifiers, incorrect asset dimensions causing build failures, forgetting to bump version codes before store submission, skipping runtime-version configuration needed for OTA updates, and missing permission descriptions for features the app actually uses - each worth checking with expo doctor, a local build, and deep-link testing on both platforms before submitting to EAS, alongside verifying asset loading across different screen densities and confirming permission prompts show the exact intended descriptions rather than a generic system default.