How do I make a full-screen splash screen in Expo?

If your full-screen splash image turned into a small icon, or got cropped strangely after an Expo upgrade, that’s expected behavior rather than a broken config. In SDK 52, the way splash screens work in Expo changed to match the splash screen API that Android has used since Android 12.

What changed

On Android, the system draws the splash screen before your app’s code runs, and it only supports a centered image on a background color. There’s no full-screen image option on Android anymore.

On iOS, there’s still a transition option, enableFullScreenImage_legacy, that shows a full-screen image. Expo’s docs say it exists to help with the move from the old configuration and will be removed, so we wouldn’t build on it.

You also can’t judge the result in Expo Go, where you’ll see your app icon instead of your splash screen, and development builds don’t reflect every setting either. A preview or production build is the only place to see what your users will see.

How to set it up

1. Configure the native splash with the config plugin in app.json. Use a transparent PNG of your logo and the background color you want behind it:

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

2. If you want a full-screen image, show it in React right after the native splash. Keep the native splash on screen until your image has loaded, then hide it, so people don’t see the switch:

   import * as SplashScreen from "expo-splash-screen";
   
   SplashScreen.preventAutoHideAsync();
   
   export default function App() {
     const [showIntro, setShowIntro] = useState(true);
   
     if (showIntro) {
       return (
         <Image
           source={require("./assets/splash-full.png")}
           style={{ flex: 1 }}
           resizeMode="cover"
           onLoadEnd={() => {
             SplashScreen.hideAsync();
             setTimeout(() => setShowIntro(false), 1500);
           }}
         />
       );
     }
     return <MainApp />;
   }

   Match the background color of the native splash to your full-screen image, so the hand-off doesn’t flash.

3. Test in a preview build on a real Android phone and iPhone, because the real splash doesn’t appear in Expo Go.

How you know it worked

On a preview build, the app opens to your logo on your background color, then switches to your full-screen image without a white flash, then to your first screen.

If it still looks wrong

If you see a white flash, check that the background colors match and that hideAsync isn’t running before the image has finished loading. If the splash never goes away, something is keeping hideAsync from running, which is the same problem as an app stuck on its loading screen.