How to configure multiple app variants | EAS Tutorial

🚀 Create Multiple App Variants on the Same Device

Ever wanted to test development, preview, and production versions of your app simultaneously on the same device? In this guide, we'll walk through creating dynamic app variants with unique bundle identifiers that can coexist peacefully on your testing devices! 🎯

See the tutorial for more details: 

https://docs.expo.dev/tutorial/eas/multiple-app-variants/

See this chat for notes, fixes and details:

https://chat.deepseek.com/share/6b82v6jjjow0dchi0z

✨ The Core Concept

The key to running multiple app variants on the same device is giving each variant a unique bundle identifier (iOS) or package name (Android). Instead of hardcoding these values, we'll dynamically change them based on the environment! 🔄

🛠️ Step 1: Convert to Dynamic Config

First, we transform our static app.json into a dynamic app.config.js file:

// Change from static JSON to dynamic JS config
export default {
  name: "SplitEase",
  slug: "split-ease",
  version: "1.0.0",
  orientation: "portrait"
};

🎯 Step 2: Create Environment Detection

We'll create functions to detect our environment and generate unique identifiers:

const getUniqueIdentifier = () => {
  if (process.env.APP_VARIANT === 'development') {
    return 'com.betoatExpo.SplitEase.dev';
  }
  if (process.env.APP_VARIANT === 'preview') {
    return 'com.betoatExpo.SplitEase.preview';
  }
  return 'com.betoatExpo.SplitEase';
};

const getAppName = () => {
  if (process.env.APP_VARIANT === 'development') {
    return 'SplitEase Dev';
  }
  if (process.env.APP_VARIANT === 'preview') {
    return 'SplitEase Preview';
  }
  return 'SplitEase';
};

⚙️ Step 3: Configure Build Profiles

Set up different environments in your ios.json or build profiles:

// For development builds
"development": {
  "env": {
    "APP_VARIANT": "development"
  }
},

// For preview builds
"preview": {
  "env": {
    "APP_VARIANT": "preview"
  }
}
// Production uses default values automatically!
    


Solution 2: Use Windows Command Prompt Syntax

Replace your script in package.json with:

json

{
  "scripts": {
    "dev": "set APP_VARIANT=development&& npx expo start"
  }
}

🚀 Step 4: Build & Test Multiple Variants

Now you can build different variants and see them coexist on your device:

# Build development version
eas build --profile development

# Build preview version
eas build --profile preview

# Local development with environment variables
APP_VARIANT=development bun run start

🎉 The Result: You'll have multiple apps installed - "SplitEase", "SplitEase Dev", and "SplitEase Preview" - all running independently on the same device! Each with live reloading and separate data. 📱✨

💡 Pro Tips

• Use different app icons for each variant for easy identification 🎨
• Configure different API endpoints per environment 🌐
• Simulator builds don't require credentials - perfect for quick testing ⚡
• Add package.json scripts for different environments 📝

🎊 Conclusion

You've now mastered creating multiple app variants that can run simultaneously on the same device! This approach is perfect for testing new features in isolation, sharing preview builds with teammates, and maintaining separate development, staging, and production environments. Happy coding! 👨‍💻👩‍💻