expo-config-setup

Q: How do I install expo-config-setup?

Run npx skills add https://github.com/dengineproblem/agents-monorepo --skill expo-config-setup in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/expo-config-setup/ (personal) or .claude/skills/expo-config-setup/ (project).

by dengineproblemMobile

Эксперт Expo конфигурации. Используй для React Native Expo, app.json и EAS Build.

Installs: 77
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/dengineproblem/agents-monorepo --skill expo-config-setup

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads expo-config-setup automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Expo Config Setup Expert

Expert at configuring Expo projects with app.json, app.config.js, and platform-specific settings for optimal development and production builds.

Core Configuration Principles

Static vs Dynamic Configuration

Use app.json for static configuration that doesn't change between environments
Use app.config.js for dynamic configuration requiring environment variables or conditional logic
Never mix sensitive data directly in configuration files - use environment variables

Platform-Specific Settings

Always configure both iOS and Android platforms explicitly
Use platform-specific overrides for different requirements
Consider platform differences in permissions, capabilities, and UI guidelines

Essential App Configuration Structure

// app.config.js
export default {
  expo: {
    name: process.env.APP_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: process.env.IOS_BUNDLE_ID || "com.company.myapp",
      buildNumber: process.env.IOS_BUILD_NUMBER || "1",
      infoPlist: {
        NSCameraUsageDescription: "This app uses the camera to take photos.",
        NSLocationWhenInUseUsageDescription: "This app uses location to provide location-based features."
      }
    },
    android: {
      adaptiveIcon: {
        foregroundImage: "./assets/adaptive-icon.png",
        backgroundColor: "#FFFFFF"
      },
      package: process.env.ANDROID_PACKAGE || "com.company.myapp",
      versionCode: parseInt(process.env.ANDROID_VERSION_CODE) || 1,
      permissions: [
        "android.permission.CAMERA",
        "android.permission.ACCESS_FINE_LOCATION"
      ]
    },
    web: {
      favicon: "./assets/favicon.png",
      bundler: "metro"
    }
  }
};

Environment-Specific Configuration

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

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

const getBundleId = () => {
  if (IS_DEV) return 'com.company.myapp.dev';
  if (IS_PREVIEW) return 'com.company.myapp.preview';
  return 'com.company.myapp';
};

export default {
  expo: {
    name: getAppName(),
    slug: IS_DEV ? 'myapp-dev' : IS_PREVIEW ? 'myapp-preview' : 'myapp',
    scheme: IS_DEV ? 'myapp-dev' : IS_PREVIEW ? 'myapp-preview' : 'myapp',
    version: process.env.APP_VERSION || '1.0.0',
    ios: {
      bundleIdentifier: getBundleId(),
    },
    android: {
      package: getBundleId(),
    },
    extra: {
      apiUrl: process.env.API_URL,
      environment: process.env.APP_VARIANT || 'production',
      eas: {
        projectId: process.env.EAS_PROJECT_ID
      }
    },
    updates: {
      url: `https://u.expo.dev/${process.env.EAS_PROJECT_ID}`
    },
    runtimeVersion: {
      policy: 'sdkVersion'
    }
  }
};

EAS Build Configuration

// eas.json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "env": {
        "APP_VARIANT": "development"
      }
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "resourceClass": "m-medium"
      },
      "android": {
        "buildType": "apk"
      },
      "env": {
        "APP_VARIANT": "preview"
      }
    },
    "production": {
      "ios": {
        "resourceClass": "m-medium"
      },
      "env": {
        "APP_VARIANT": "production"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your@email.com",
        "ascAppId": "1234567890",
        "appleTeamId": "ABCD1234"
      },
      "android": {
        "serviceAccountKeyPath": "./google-services.json",
        "track": "internal"
      }
    }
  }
}

Plugin Configuration Best Practices

// Advanced plugin configuration
export default {
  expo: {
    plugins: [
      "expo-font",
      "expo-router",
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
          "recordAudioAndroid": true
        }
      ],
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location.",
          "locationAlwaysPermission": "Allow $(PRODUCT_NAME) to use your location.",
          "locationWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
        }
      ],
      [
        "expo-notifications",
        {
          "icon": "./assets/notification-icon.png",
          "color": "#ffffff",
          "sounds": ["./assets/notification-sound.wav"],
          "mode": "production"
        }
      ],
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "13.4",
            "useFrameworks": "static"
          },
          "android": {
            "compileSdkVersion": 34,
            "targetSdkVersion": 34,
            "buildToolsVersion": "34.0.0",
            "minSdkVersion": 23,
            "kotlinVersion": "1.9.0"
          }
        }
      ],
      [
        "expo-image-picker",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos",
          "cameraPermission": "Allow $(PRODUCT_NAME) to take pictures"
        }
      ]
    ]
  }
};

Asset and Icon Configuration

// Comprehensive asset configuration
export default {
  expo: {
    icon: "./assets/images/icon.png", // 1024x1024
    splash: {
      image: "./assets/images/splash.png", // 1284x2778 for iPhone 13 Pro Max
      resizeMode: "contain",
      backgroundColor: "#ffffff"
    },
    ios: {
      icon: "./assets/images/icon-ios.png", // iOS-specific icon if needed
      splash: {
        image: "./assets/images/splash-ios.png",
        resizeMode: "cover",
        backgroundColor: "#ffffff",
        tabletImage: "./assets/images/splash-tablet.png"
      }
    },
    android: {
      icon: "./assets/images/icon-android.png",
      adaptiveIcon: {
        foregroundImage: "./assets/images/adaptive-icon.png", // 1024x1024
        backgroundImage: "./assets/images/adaptive-icon-background.png",
        backgroundColor: "#FFFFFF"
      },
      splash: {
        image: "./assets/images/splash-android.png",
        resizeMode: "cover",
        backgroundColor: "#ffffff",
        mdpi: "./assets/images/splash-mdpi.png",    // 320x480
        hdpi: "./assets/images/splash-hdpi.png",    // 480x800
        xhdpi: "./assets/images/splash-xhdpi.png",  // 720x1280
        xxhdpi: "./assets/images/splash-xxhdpi.png", // 960x1600
        xxxhdpi: "./assets/images/splash-xxxhdpi.png" // 1280x1920
      }
    }
  }
};

Deep Linking and Scheme Configuration

// Complete deep linking setup
export default {
  expo: {
    scheme: "myapp",
    web: {
      bundler: "metro"
    },
    ios: {
      bundleIdentifier: "com.company.myapp",
      associatedDomains: [
        "applinks:myapp.com",
        "applinks:www.myapp.com"
      ]
    },
    android: {
      package: "com.company.myapp",
      intentFilters: [
        {
          action: "VIEW",
          autoVerify: true,
          data: [
            {
              scheme: "https",
              host: "myapp.com",
              pathPrefix: "/app"
            },
            {
              scheme: "https",
              host: "www.myapp.com",
              pathPrefix: "/app"
            }
          ],
          category: ["BROWSABLE", "DEFAULT"]
        },
        {
          action: "VIEW",
          data: [
            {
              scheme: "myapp"
            }
          ],
          category: ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
};

OTA Updates Configuration

// Over-the-air updates setup
export default {
  expo: {
    updates: {
      enabled: true,
      checkAutomatically: "ON_LOAD",
      fallbackToCacheTimeout: 30000,
      url: `https://u.expo.dev/${process.env.EAS_PROJECT_ID}`
    },
    runtimeVersion: {
      policy: "appVersion" // or "sdkVersion", "nativeVersion", "fingerprint"
    },
    // For custom update logic
    extra: {
      updateChannel: process.env.APP_VARIANT || 'production'
    }
  }
};

Update Logic in App

// App.js or updates hook
import * as Updates from 'expo-updates';

async function checkForUpdates() {
  if (__DEV__) return;

  try {
    const update = await Updates.checkForUpdateAsync();
    if (update.isAvailable) {
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync();
    }
  } catch (error) {
    console.error('Error checking for updates:', error);
  }
}

Notifications Configuration

// Push notifications setup
export default {
  expo: {
    notification: {
      icon: "./assets/notification-icon.png", // 96x96, white on transparent
      color: "#3498db",
      androidMode: "default",
      androidCollapsedTitle: "#{unread_notifications} new notifications"
    },
    ios: {
      infoPlist: {
        UIBackgroundModes: ["remote-notification"]
      }
    },
    android: {
      googleServicesFile: "./google-services.json",
      useNextNotificationsApi: true
    },
    plugins: [
      [
        "expo-notifications",
        {
          icon: "./assets/notification-icon.png",
          color: "#3498db",
          sounds: ["./assets/sounds/notification.wav"],
          mode: "production"
        }
      ]
    ]
  }
};

Security Best Practices

// Secure configuration patterns
export default ({ config }) => {
  // Validate required env vars
  const requiredEnvVars = ['API_URL', 'EAS_PROJECT_ID'];
  for (const envVar of requiredEnvVars) {
    if (!process.env[envVar]) {
      console.warn(`Warning: ${envVar} is not set`);
    }
  }

  return {
    ...config,
    expo: {
      ...config.expo,
      // Never expose sensitive keys in extra
      extra: {
        apiUrl: process.env.API_URL,
        // Use EAS Secrets for sensitive values
        // NOT: apiKey: process.env.API_KEY
      },
      // Certificate pinning for production
      ios: {
        ...config.expo?.ios,
        infoPlist: {
          NSAppTransportSecurity: {
            NSAllowsArbitraryLoads: false,
            NSExceptionDomains: {
              "myapp.com": {
                NSExceptionRequiresForwardSecrecy: true,
                NSIncludesSubdomains: true
              }
            }
          }
        }
      }
    }
  };
};

Common Configuration Pitfalls

Missing Bundle Identifiers:
  problem: Build fails with "missing bundleIdentifier"
  solution: Always set ios.bundleIdentifier and android.package

Incorrect Asset Dimensions:
  problem: Icons/splash screens look blurry or cropped
  solution: Follow exact size requirements (icon: 1024x1024)

Version Code Issues:
  problem: Store rejects upload due to version code
  solution: Increment android.versionCode for each upload

Missing Permissions:
  problem: Feature crashes on first use
  solution: Declare all required permissions with descriptions

OTA Update Failures:
  problem: Updates not applying
  solution: Check runtimeVersion policy matches native builds

Validation and Testing

# Validate configuration
npx expo doctor

# Check for common issues
npx expo-cli diagnostics

# Test deep links
# iOS
xcrun simctl openurl booted "myapp://path"
# Android
adb shell am start -a android.intent.action.VIEW -d "myapp://path"

# Preview configuration
npx expo config --type public
npx expo config --type introspect

Лучшие практики

Environment separation — разные конфиги для dev/preview/prod
Dynamic config — app.config.js для переменных окружения
EAS Secrets — храните sensitive данные в EAS Secrets
Version management — автоматизируйте версии через CI/CD
Plugin audit — регулярно обновляйте и проверяйте плагины
Test deep links — тестируйте на обеих платформах

FAQ

What does the expo-config-setup skill do?

Эксперт Expo конфигурации. Используй для React Native Expo, app.json и EAS Build.

How do I install expo-config-setup?

Run npx skills add https://github.com/dengineproblem/agents-monorepo --skill expo-config-setup in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/expo-config-setup/ (personal) or .claude/skills/expo-config-setup/ (project).

Which AI agents can use expo-config-setup?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is expo-config-setup safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains expo-config-setup?

It is published by dengineproblem in dengineproblem/agents-monorepo. It has 77 recorded installs.

Popular mobile skills

View category →

design-mobile-apps

designed-by-ai/skills

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

Mobile1.1M installs

ios-design

uizze.sh

Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

Mobile416.5K installs

vercel-react-native-skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

OfficialMobile256.7K installs

animate-expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

Mobile140.1K installs

xcode-project-setup

firebase/agent-skills

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

OfficialMobile131.2K installs

firebase-remote-config-basics

firebase/agent-skills

Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.

OfficialMobile121.7K installs

expo-config-setup

Install

Install

Describe the task

Review the result

SKILL.md

Expo Config Setup Expert

Core Configuration Principles

Static vs Dynamic Configuration

Platform-Specific Settings

Essential App Configuration Structure

Environment-Specific Configuration

EAS Build Configuration

Plugin Configuration Best Practices

Asset and Icon Configuration

Deep Linking and Scheme Configuration

OTA Updates Configuration

Update Logic in App

Notifications Configuration

Security Best Practices

Common Configuration Pitfalls

Validation and Testing

Лучшие практики

FAQ

More from dengineproblem/agents-monorepo

social-media-marketing

frontend-design

video-marketing

k6-load-test

b2b-saas-marketing

seo-expert

Popular mobile skills

design-mobile-apps

ios-design

vercel-react-native-skills

animate-expo

xcode-project-setup

firebase-remote-config-basics