configuring-expo

Expo Configuration Reference

app.config.js vs app.json

Use app.config.js (recommended):

• Dynamic configuration based on environment
• Conditional logic for different build variants
• Access to environment variables
• Can import from other files

Use app.json:

• Simple static configuration
• No environment-specific needs
• Quick prototyping

Converting app.json to app.config.js

If you have an existing app.json:

// app.config.js
export default ({ config }) => {
  return {
    ...config,
    // Your customizations here
  };
};

Or start fresh:

// app.config.js
export default {
  name: "My App",
  slug: "my-app",
  // ... rest of config
};

Environment-Specific Bundle IDs

The recommended pattern for running dev/preview/production builds side-by-side on the same device:

// app.config.js
const IS_DEV = process.env.APP_VARIANT === 'development';
const IS_PREVIEW = process.env.APP_VARIANT === 'preview';

const getUniqueIdentifier = () => {
  if (IS_DEV) {
    return 'com.yourcompany.yourapp.dev';
  }
  if (IS_PREVIEW) {
    return 'com.yourcompany.yourapp.preview';
  }
  return 'com.yourcompany.yourapp';
};

const getAppName = () => {
  if (IS_DEV) {
    return 'YourApp (Dev)';
  }
  if (IS_PREVIEW) {
    return 'YourApp (Preview)';
  }
  return 'YourApp';
};

export default {
  name: getAppName(),
  slug: 'your-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: getUniqueIdentifier(),
  },
  android: {
    adaptiveIcon: {
      foregroundImage: './assets/adaptive-icon.png',
      backgroundColor: '#ffffff',
    },
    package: getUniqueIdentifier(),
  },
  web: {
    favicon: './assets/favicon.png',
  },
  extra: {
    eas: {
      projectId: 'your-project-id',
    },
  },
};