Change the App Icon and Splash Screen

Replace the app icon and splash screen on iOS and Android, with the size and transparency rules that cause upload rejections.

This guide covers replacing the app icon and splash screen in a React Native app, and the platform-specific rules that cause store upload rejections if ignored.

Quick Answer

Provide a 1024x1024 icon with no transparency for iOS, an Android adaptive icon (separate foreground and background layers respecting the safe zone), configure both through app.json (Expo) or the native asset catalogs (bare RN), then do a full rebuild and reinstall since icons are cached aggressively on-device.

1. Source Image Requirements

  • iOS: 1024x1024px, no alpha/transparency. The App Store upload rejects icons with any transparent pixels.
  • Android adaptive icon: a foreground layer and a background layer, each 1024x1024, designed so the important content sits inside the center "safe zone" (roughly the middle 66%), since the OS masks the icon into circles, squircles, or other shapes depending on the device launcher.

2. Expo Configuration

In app.json:

{
  "expo": {
    "icon": "./assets/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "splash": {
      "image": "./assets/splash.png",
      "backgroundColor": "#ffffff"
    }
  }
}

Modern Expo SDKs use the expo-splash-screen config plugin for finer splash control (dark mode variant, resize mode).

3. Bare React Native: iOS

Replace the images in the AppIcon.appiconset inside your Xcode asset catalog with your source icon at each required size (Xcode's asset catalog can auto-generate sizes from a single 1024x1024 source in recent versions).

4. Bare React Native: Android

Replace the icons across each mipmap-* density folder in android/app/src/main/res/, and provide the adaptive icon's foreground/background layers if targeting Android 8+.

5. Rebuild and Reinstall

Icons are embedded in the native build and cached by the OS launcher. A Metro reload will not update them, and sometimes even a fresh install over an existing one keeps the old cached icon; uninstall the app first if the old icon persists after rebuilding.

Common Issues

iOS upload rejected for an invalid icon almost always leftover transparency in the 1024x1024 source; flatten it onto an opaque background before exporting.

Android adaptive icon looks cropped or off-center important content wasn't kept inside the safe zone, so the OS mask cuts it off on some launchers.

Old icon still shows after changing the config and rebuilding the OS cached the previous icon; uninstall and reinstall.

Splash screen shows briefly then flashes white before the app loads the splash background color doesn't match the app's initial screen background; align them, or hide the splash only once the first screen has actually rendered.

Verification Checklist

  • the iOS icon source is 1024x1024 with zero transparency;
  • the Android adaptive icon's foreground content stays within the safe zone;
  • both platforms are configured (via app.json or native asset catalogs);
  • a full rebuild has been performed;
  • the app was uninstalled and reinstalled if a cached icon persisted.

Next Steps