Configure multiple app variants

Convert app.json to 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 code editor, rename app.json to app.config.js.
• In app.config.js, add environment variables called IS_DEV andIS_PREVIEW for development and preview build profiles:

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

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

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 varying name values for the app and getUniqueIdentifier() to differentiate android.package and ios.bundleIdentifier for development and preview builds:

export default {
  name: getAppName(),
  %%placeholder-start%%... %%placeholder-end%%
  ios: {
    bundleIdentifier: getUniqueIdentifier(),
    %%placeholder-start%%... %%placeholder-end%%
  },
  android: {
    package: getUniqueIdentifier(),
    %%placeholder-start%%... %%placeholder-end%%
  },
};

Configure eas.json

In eas.json, add the APP_VARIANT environment variable:

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "development"
      }
    },
    "preview": {
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "preview"
      }
    }
    %%placeholder-start%%... %%placeholder-end%%
  }
}

Running eas build --profile development will now set APP_VARIANT to development.

Note: Since we changed the Android Application ID and iOS Bundle Identifier, the EAS CLI will prompt us to generate a new Keystore for Android and a new provisioning profile for iOS. To learn more about what these steps include, see the previous chapter for more information.

Since our ios-simulator build profile extends development, this configuration is automatically applied for iOS Simulators.

Run development server

After builds are complete, follow the same procedure from previous chapters to install them on a device or emulator/simulator.

Since we're identifying our development build with the APP_VARIANT environment variable, we need to pass it to the command when starting the development server. To do this, add a dev script in the "scripts" field of our project's package.json:

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

Run the npm run dev command to start the development server:

This script will evaluate app.config.js locally and load the environment variable for the development profile.

Now, our development build will run on both Android and iOS, displaying the modified app name from app.config.js. For example, the below development build is running on an iOS Simulator. See that the app name is StickerSmash (Dev):