App Assets Configuration

Proper branding is essential for a professional mobile application. This guide covers how to generate high-quality app icons and splash screens using BowlerLaunch and Expo's built-in tools.

BowlerLaunch

BowlerLaunch is BowlerKit's companion icon, splash-screen, and App Store / Play Store screenshot studio — no Figma required. Every BowlerKit license includes 1 year of BowlerLaunch free.

How to use it:

1. Open launch.bowlerkit.com and sign in with your BowlerKit license.
2. Upload your logo and pick your colors — the icon, adaptive icon, monochrome notification icon, and light/dark splash screens update live.
3. Export the Expo bundle. It writes icon-1024.png, adaptive-foreground.png, notification-icon.png, splash-icon.png, and splash-icon-dark.png (plus a ready app.json snippet). Rename icon-1024.png → icon.png and adaptive-foreground.png → adaptive-icon.png to match the paths this boilerplate's app.json expects — see below.

App Icons

Expo handles icon generation automatically when running the prebuild process or building your application.

1. Prepare your assets

From BowlerLaunch's export, place these in the mobile-app/assets/images/ directory:

• icon.png (renamed from BowlerLaunch's icon-1024.png): The standard icon for iOS and legacy Android.
• adaptive-icon.png (renamed from adaptive-foreground.png): The foreground image for Android adaptive icons.
• favicon.png: The icon for your web application. BowlerLaunch doesn't export this — reuse icon.png or crop your own.

2. Configure app.json

Update the expo section of your app.json to reflect your exported assets:

{
  "expo": {
    "icon": "./assets/images/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/images/favicon.png"
    }
  }
}

Splash Screen

The splash screen is the first thing users see when they open your app. We use expo-splash-screen to manage this experience.

1. Prepare your assets

BowlerLaunch's export already uses these exact filenames — no renaming needed:

• splash-icon.png: The central logo for the splash screen (Light mode).
• splash-icon-dark.png: The central logo for the splash screen (Dark mode).

Place these in the mobile-app/assets/images/ directory.

2. Configure app.json

Update the splash configuration to support both light and dark modes:

{
  "expo": {
    "splash": {
      "image": "./assets/images/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff",
      "dark": {
        "image": "./assets/images/splash-icon-dark.png",
        "backgroundColor": "#000000"
      }
    }
  }
}

Notification Icon

For Android, notification icons must be monochrome (white logo on transparent background) to comply with system standards.

1. Prepare your assets

Export the notification-icon.png from BowlerLaunch (already named correctly) and place it in mobile-app/assets/images/.

2. Configure app.json

In the plugins section, update the expo-notifications configuration:

"plugins": [
  [
    "expo-notifications",
    {
      "icon": "./assets/images/notification-icon.png",
      "color": "#ffffff"
    }
  ]
]

Custom Fonts

The boilerplate includes a custom font configuration using expo-font.

1. Add your font files

Place your .ttf or .otf files in the mobile-app/assets/fonts/ directory.

2. Load fonts in _layout.tsx

Register and load your fonts in the root layout file:

const [loaded, error] = useFonts({
  SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  // Add your custom fonts here
});

Applying Changes

Because icons and splash screens are native resources, changes won't be reflected in Expo Go. You must update your native project files:

1. Local Development

If you are running the app locally with native code, run the prebuild command:

pnpm prebuild:clean

Then run the app again:

pnpm ios
# or
pnpm android

2. Using EAS Build

When you submit a build to EAS, it will automatically use the assets defined in your app.json.

eas build -p android --profile preview

Troubleshooting

• Assets not updating: If you don't see changes on Android, try cleaning the prebuild: pnpm prebuild:clean then rebuild.
• Expo Go: Remember that icons and splash screens are baked into the app binary. Expo Go uses its own icon and splash screen. To see yours, you must use a Development Build.
• Android Notification Icon: If your notification icon appears as a white square, ensure the image is a white logo on a transparent background.
• iOS Icon Caching: Sometimes Xcode caches icons. If using native builds, clean the build folder in Xcode (Cmd+Shift+K) or remove the app from the device before reinstalling.