Docs
BlogChangelogStar us on GitHub
HomeGuidesEASReferenceLearn
ArchiveExpo SnackDiscord and forumsNewsletter

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Configure multiple app variants

Edit page

Learn how to configure dynamic app config to install multiple app variants on a single device.

In this chapter, we'll configure our project to run multiple build types (development, preview, production) on a single device simultaneously. This setup will allow us to test various stages of our app development without the need to uninstall and reinstall different versions.

Watch: How to configure multiple app variants
Watch: How to configure multiple app variants

Configure development, preview, and production app variants with unique bundle identifiers to run them side by side on one device.

Each variant requires a unique Android Application ID and iOS Bundle Identifier to enable simultaneous installations on one device. Here's how the IDs are set up in our app.json file:

app.json
{
  "ios": {
    "bundleIdentifier": "com.yourname.stickersmash"
    %%placeholder-start%%... %%placeholder-end%%
  },
  "android": {
    "package": "com.yourname.stickersmash"
    %%placeholder-start%%... %%placeholder-end%%
  }
}

1

Add app.config.js for dynamic configuration

app.json contains app-related configuration in a JSON file. It's static and isn't ideal if we want to use dynamic values for certain properties. We're going to add different Android Application IDs and iOS Bundle Identifiers for all build profiles based on environment variables.

  • In the root of your project, create a new file called app.config.js.
  • In app.config.js, export a default function that takes config as its argument. We'll then destructure the config to copy all existing properties from app.json.
app.config.js
export default ({ config }) => ({
  ...config,
});

2

Update dynamic values based on environment

To identify the build type, let's add two environment variables called IS_DEV andIS_PREVIEW for development and preview build profiles in app.config.js:

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

Then, add two functions that dynamically change the app name, Android Application ID and iOS Bundle Identifier:

app.config.js
const getUniqueIdentifier = () => {
  if (IS_DEV) {
    return 'com.yourname.stickersmash.dev';
  }

  if (IS_PREVIEW) {
    return 'com.yourname.stickersmash.preview';
  }

  return 'com.yourname.stickersmash';
};

const getAppName = () => {
  if (IS_DEV) {
    return 'StickerSmash (Dev)';
  }

  if (IS_PREVIEW) {
    return 'StickerSmash (Preview)';
  }

  return 'StickerSmash: Emoji Stickers';
};

We'll use getAppName() to assign dynamic name values for the app and getUniqueIdentifier() to differentiate android.package and ios.bundleIdentifier for development and preview builds:

app.config.js
export default ({ config }) => ({
  ...config,
  name: getAppName(),
  ios: {
    ...config.ios,
    bundleIdentifier: getUniqueIdentifier(),
  },
  android: {
    ...config.android,
    package: getUniqueIdentifier(),
  },
})