Skip to Content
DocumentationGetting StartedCustomize Your App

Customize Your App

This section details how to manage Expo configuration, environment variables, and app assets like the splash screen and icon.

⚙️ Expo Configuration (app.config.ts)

For advanced control over your build settings, the project uses the configuration file app.config.ts.

  • Environment Variables: If you have configurations that depend on environment variables (like API URLs, Sentry DSNs, or API keys), you must read them from your .env file (using the method described in the Environment Variables guide) and import them into app.config.ts.
  • More Details: You can read more about Expo’s powerful configuration system here .
app.config.ts
/* eslint-disable max-lines-per-function */
import type { ConfigContext, ExpoConfig } from '@expo/config';
 
export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: 'boilerplate',
  slug: 'boilerplate',
  version: '1.0.0',
  orientation: 'portrait',
  icon: './assets/images/icon.png',
  scheme: 'com.boilerplate',
  userInterfaceStyle: 'automatic',
  newArchEnabled: true,
  splash: {
    image: './assets/images/splash-icon.png',
    resizeMode: 'contain',
    backgroundColor: '#ffffff',
  },
  ios: {
    supportsTablet: true,
    usesAppleSignIn: true,
    bundleIdentifier: 'com.yourcompany.yourapp',
    infoPlist: {
      ExpoLocalization_forcesRTL: false,
      CFBundleURLTypes: [
        {
          CFBundleURLSchemes: [
            'com.googleusercontent.apps.YOUR_GOOGLE_CLIENT_ID',
          ],
        },
      ],
    },
    appleTeamId: 'YOUR_APPLE_TEAM_ID',
    icon: {
      dark: './assets/icons/ios-dark.png',
      light: './assets/icons/ios-light.png',
      tinted: './assets/icons/ios-tinted.png',
    },
  },
  android: {
    adaptiveIcon: {
      foregroundImage: './assets/icons/adaptive-icon.png',
      monochromeImage: './assets/icons/adaptive-icon.png',
      backgroundColor: '#ffffff',
    },
    package: 'com.yourcompany.yourapp',
    permissions: [
      'android.permission.CAMERA',
      'android.permission.RECORD_AUDIO',
    ],
  },
  web: {
    bundler: 'metro',
    output: 'static',
    favicon: './assets/images/favicon.png',
  },
  plugins: [
    'expo-router',
    [
      'expo-splash-screen',
      {
        image: './assets/icons/splash-icon-dark.png',
        imageWidth: 200,
        resizeMode: 'contain',
        backgroundColor: '#ffffff',
        dark: {
          image: './assets/icons/splash-icon-light.png',
          backgroundColor: '#000000',
        },
      },
    ],
    'expo-apple-authentication',
    [
      '@react-native-google-signin/google-signin',
      {
        iosUrlScheme: 'com.googleusercontent.apps.YOUR_GOOGLE_CLIENT_ID',
      },
    ],
    'expo-localization',
    [
      'expo-build-properties',
      {
        android: {
          compileSdkVersion: 35,
          targetSdkVersion: 35,
          buildToolsVersion: '35.0.0',
          extraMavenRepos: [
            '../../node_modules/@notifee/react-native/android/libs',
          ],
        },
        ios: {
          deploymentTarget: '15.1',
        },
      },
    ],
    [
      'onesignal-expo-plugin',
      {
        mode: 'development',
      },
    ],
    [
      'expo-font',
      {
        fonts: [
          './assets/fonts/Syne-Bold.ttf',
          './assets/fonts/Syne-Regular.ttf',
          './assets/fonts/Syne-ExtraBold.ttf',
          './assets/fonts/Syne-SemiBold.ttf',
          './assets/fonts/Syne-Medium.ttf',
        ],
      },
    ],
    [
      '@sentry/react-native/expo',
      {
        organization: 'YOUR_SENTRY_ORGANIZATION',
        project: 'YOUR_SENTRY_PROJECT',
        url: 'https://sentry.io/',
      },
    ],
    [
      'expo-camera',
      {
        cameraPermission: 'Allow AppCatalyst RN to access your camera',
      },
    ],
  ],
  experiments: {
    typedRoutes: true,
  },
  extra: {
    supportRTL: true,
    forcesRTL: false,
    router: {
      origin: false,
    },
    eas: {
      projectId: 'YOUR_EAS_PROJECT_ID',
    },
  },
  owner: 'YOUR_EXPO_OWNER',
});

🎨 Splash Screen and App Icon

Since AppCatalyst RN uses Expo, updating your app’s visual assets is straightforward and requires minimal effort.

  1. Update Images: Place your new app icon and splash screen images inside the assets folder.
  2. Generate Native Code: Run expo prebuild to automatically update the native configuration files (e.g., AndroidManifest.xml and Info.plist) with your new assets.

Multiple Environment Icons (Best Practice)

For better development workflow, we support different icons for Development, Staging, and Production environments.

  • Recommendation: Use the same core icon but apply visual badges (e.g., a “DEV” or “STG” ribbon) for clarity. This instantly tells developers which environment they are testing.

For comprehensive details on styling, sizing, and optimizing your assets, refer to the official Expo documentation: 👉 Customize App Icon and Splash Screen 

Configure EnvironmentPrerequisites