App configuration

When configuring your app, you'll need to define settings in different places depending on which provider will use them (e.g., Expo, EAS).

Let's start with the core settings for your app. These settings are crucial as they're used by Expo and EAS to build your app, determine its store presence, prepare updates, and more.

This configuration includes essential details like the official name, description, scheme, store IDs, splash screen configuration, and more.

You'll define these settings in apps/mobile/app.config.ts. Make sure to follow the Expo config schema when setting this up.

Here is an example of what the config file looks like:

apps/mobile/app.config.ts

import { ExpoConfig } from "expo/config";
 
export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: APP_NAME,
  slug: SLUG,
  scheme: SLUG,
  version: "0.1.0",
  orientation: "portrait",
  icon: "./assets/images/icon.png",
  userInterfaceStyle: "automatic",
  assetBundlePatterns: ["**/*"],
  sdkVersion: "51.0.0",
  platforms: ["ios", "android"],
  updates: {
    fallbackToCacheTimeout: 0,
  },
  ios: {
    bundleIdentifier: "your.bundle.identifier",
    supportsTablet: false,
    splash: SPLASH,
  },
  android: {
    package: "your.bundle.identifier",
    splash: SPLASH,
  },
  extra: {
    eas: {
      projectId: "your-project-id",
    },
  },
  experiments: {
    tsconfigPaths: true,
    typedRoutes: true,
  },
  plugins: ["expo-router"],
});

Make sure to replace the values with your own and take your time to set everything correctly.

Internal configuration

The same as for the web app, and extension, we're defining the internal app config, which stores some overall variables for your application (that can't be read from Expo config).

The recommendation is to not update this directly - instead, please define the environment variables and override the default behavior. The configuration is strongly typed so you can use it safely accross your codebase - it'll be validated at build time.

apps/mobile/src/config/app.ts

import { env } from "~/lib/env";
 
export const appConfig = {
  theme: {
    mode: env.EXPO_PUBLIC_THEME_MODE,
    color: env.EXPO_PUBLIC_THEME_COLOR,
  },
} as const;

For example, to set the extension default theme color, you'd update the following variable:

.env.local

EXPO_PUBLIC_THEME_COLOR="yellow"

Do NOT use process.env!

Do NOT use process.env to get the values of the variables. Variables accessed this way are not validated at build time, and thus the wrong variable can be used in production.

EAS configuration

To properly build and publish your app, you need to define settings for the EAS build service.

This is done in apps/mobile/eas.json and it must follow the EAS config scheme.

Here is an example of what the config file looks like:

apps/mobile/eas.json

{
  "cli": {
    "version": ">= 4.1.2"
  },
  "build": {
    "base": {
      "node": "20.15.0",
      "pnpm": "9.6.0",
      "ios": {
        "resourceClass": "m-medium"
      },
      "env": {
        "EXPO_PUBLIC_AUTH_PASSWORD": "true",
        "EXPO_PUBLIC_AUTH_MAGIC_LINK": "false",
        "EXPO_PUBLIC_THEME_MODE": "system",
        "EXPO_PUBLIC_THEME_COLOR": "orange"
      }
    },
    ...
    "preview": {
      "extends": "base",
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "env": {
        "APP_ENV": "test",
        "EXPO_PUBLIC_SITE_URL": "",
        "EXPO_PUBLIC_SUPABASE_URL": "",
        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "",
      }
    },
    "production": {
      "extends": "base",
      "env": {
        "APP_ENV": "production",
        "EXPO_PUBLIC_SITE_URL": "",
        "EXPO_PUBLIC_SUPABASE_URL": "",
        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "",
      }
    }
    ...
  },
}

Make sure to fill all the environment variables with the correct values for your project and correct environment, otherwise your app won't build and you won't be able to publish it.

Configure EAS Build with eas.json

docs.expo.dev

App configuration