majiayu000 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.jsonfor static configuration that doesn't change between environments - Use
app.config.jsfor 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 — тестируйте на обеих платформах