Splash Screen & App Icon

Setup

• Setup the splash screen and app icon in app.json

• You can adjust

  • The app icon image

  • The splash screen image

  • Width of the splash screen image

  • Background color

• See the expo splash screen docs here

• 🚨🚨 Important 🚨🚨

  • If you are using the expo dev client (when working with in-app-purchases), you need rebuild your app after making changes to app.json, then install a new dev client. See the instructions in Expo Dev Client

Showing / Hiding the Splash Screen

• In app/_layout.tsx

  • There is code to block the splash screen from automatically hiding

    // Keep the splash screen visible while we fetch resources
    SplashScreen.preventAutoHideAsync();
    
    SplashScreen.setOptions({
      duration: 200,
      fade: true,
    });

• In app/index.tsx

  • There is code to hide the splash screen once the app is initialized

    if (isAppInitialized) {
      SplashScreen.hide()
    }