Expo · SDK 58

How to Add a Splash Screen in Expo (SDK 58)

Q: Is the top-level splash key still used?

Expo recommends the expo-splash-screen config plugin and calls the other methods legacy.

Short answer

Add the expo-splash-screen config plugin to app.json, set image to a 1024×1024 PNG with a transparent background, and choose backgroundColor and imageWidth. Then make a new native build. Expo Go shows your app icon instead of the splash screen, so test on a release build.

Checked against Expo: Splash screen and app icon, Expo SplashScreen API (SDK 58) and Expo app config reference in October 2026.

Files you need

File	Size	Where
`splash-icon.png`	1024×1024 PNG, transparent	`assets/images/`
`splash-icon-dark.png` (optional)	1024×1024 PNG, transparent	`assets/images/`

Only PNG works. Other formats make the production build fail.

1. Install

bash

npx expo install expo-splash-screen

2. Configure app.json

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "backgroundColor": "#ffffff",
          "dark": {
            "image": "./assets/images/splash-icon-dark.png",
            "backgroundColor": "#000000"
          }
        }
      ]
    ]
  }
}

Option	Default	What it does
`image`	—	Your logo or app icon
`imageWidth`	`100`	Width of the logo on screen. Change this, not the PNG size.
`backgroundColor`	`#ffffff`	Hex color behind the logo
`dark`	—	`image` and `backgroundColor` for dark mode
`resizeMode`	—	`contain`, `cover` or `native`
`ios` / `android`	—	The same keys, per platform

3. Keep it visible while the app loads

app/_layout.tsx

import * as SplashScreen from "expo-splash-screen";
import { Stack } from "expo-router";
import { useEffect, useState } from "react";

SplashScreen.preventAutoHideAsync();
SplashScreen.setOptions({ duration: 400, fade: true });

export default function RootLayout() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    // load fonts, auth, data…
    setReady(true);
  }, []);

  useEffect(() => {
    if (ready) SplashScreen.hide();
  }, [ready]);

  if (!ready) return null;
  return <Stack />;
}

Call preventAutoHideAsync() at the top level, outside the component, and don't await it. fade applies to iOS only.

4. Build

The splash screen is baked into the native binary, so a JavaScript reload won't change it.

bash

npx expo prebuild --clean
npx expo run:ios --configuration Release

With EAS, make an internal or production build: eas build --profile preview.

Expo splash screen not showing: fixes

You see	Why	Fix
Your app icon instead of the splash	Expo Go shows the app icon (SDK 52 and later)	Test on a preview or release build
A different splash in a dev build	`expo-dev-client` has its own splash screen	Test on a preview or release build
The old splash after changing it	The config needs a new native binary	`npx expo prebuild --clean`, then rebuild
The old splash on iOS, SDK 52 or earlier	The launch screen was cached	`npx expo run:ios --no-build-cache`
Logo too small or too large	`imageWidth` sets the size, not the PNG	Change `imageWidth`
Production build fails	The image isn't a PNG	Export it as PNG
Dark mode shows the light splash	No `dark` block	Add `dark.image` and `dark.backgroundColor`
Splash closes before data loads	It hides on the first frame	`preventAutoHideAsync()` at the top level, `hide()` when ready

FAQ

What size should an Expo splash image be?

1024×1024 PNG with a transparent background. Set the size on screen with imageWidth.

Can I use an SVG or JPG?

No. Only PNG is supported, and other formats make the production build fail.

Why does Expo Go show my app icon instead of the splash screen?

Since SDK 52, Expo Go shows the app icon while your project loads. Your splash screen only appears in a real build.

Is the top-level splash key still used?

Expo recommends the expo-splash-screen config plugin and calls the other methods legacy.

Can the splash screen be animated?

Not the native one. Show an animated React screen after calling hide().