Expo: White screen after SplashScreen

[Chenlui]

I’m facing an issue where, right after the SplashScreen, my app flashes a white screen before rendering the home screen.

Check the following gif of the problem:

I suspect that SplashScreen.preventAutoHideAsync() is not working properly, causing the SplashScreen to be automatically dismissed.

Stack: Expo 50.0.21 RN 0.73.6

Since I’m using expo router, I tried to importing SplashScreen from expo-router but it didn’t work.

[Petya]

The issue you’re facing with a white screen flash between the SplashScreen and the home screen is a common problem in React Native applications using Expo, especially when the SplashScreen.preventAutoHideAsync() method is not properly handled. Here’s how you can troubleshoot and potentially solve the issue:

Possible Cause:

The white flash might occur because the splash screen is being hidden before your app’s first screen (home screen) is fully rendered. This usually happens if SplashScreen.preventAutoHideAsync() is not functioning correctly, or if you’re not explicitly hiding the splash screen after the app is ready to render.

Steps to Fix:

1. Ensure Proper Use of SplashScreen API: Double-check how you’re importing and using SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync(). If you’re using expo-router, make sure you’re importing from expo-splash-screen instead of expo-router. Here’s a typical setup:

import { useEffect } from 'react';
import { SplashScreen } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';

export default function App() {
  useEffect(() => {
    async function prepare() {
      try {
        // Prevent splash screen from auto-hiding
        await SplashScreen.preventAutoHideAsync();
        // Preload resources or other tasks
      } catch (e) {
        console.warn(e);
      }
    }

    prepare();
  }, []);

  // Hide splash screen once the app is ready
  const hideSplashScreen = async () => {
    await SplashScreen.hideAsync();
  };

  // Ensure that splash screen hides once the app is fully loaded
  useEffect(() => {
    hideSplashScreen();
  }, []);

  return (
    // Your app's home screen component or router
    <YourHomeComponent />
  );
}

2. Delaying SplashScreen Dismissal: Ensure that SplashScreen.hideAsync() is only called once the app’s first screen is ready to be displayed. If you hide it too soon, the white screen may flash before your content renders. Use a state variable to manage when your app is ready:

const [isAppReady, setAppReady] = useState(false);

useEffect(() => {
  async function prepareApp() {
    // Perform async tasks like data loading, etc.
    await loadResources();
    setAppReady(true);
  }

  prepareApp();
}, []);

useEffect(() => {
  if (isAppReady) {
    SplashScreen.hideAsync();
  }
}, [isAppReady]);

3. Custom Background Color: If the white flash is caused by the default background color of the root view, you can change it to match your splash screen’s background color to make the transition smoother.In app.json, add the backgroundColor under the splash configuration:

{
  "expo": {
    "splash": {
      "backgroundColor": "#000000",  // Match your splash screen background color
      ...
    }
  }
}

4. Check Expo Router Integration: If you are using expo-router, make sure it is compatible with the SplashScreen API. You may want to initialize the router only after hiding the splash screen:

import { Router } from 'expo-router';

function App() {
  const [isReady, setReady] = useState(false);

  useEffect(() => {
    async function prepareApp() {
      await SplashScreen.preventAutoHideAsync();
      // Preload or fetch any data here
      setReady(true);
      await SplashScreen.hideAsync();
    }

    prepareApp();
  }, []);

  if (!isReady) {
    return null; // or loading component
  }

  return <Router />;
}

5. Expo Updates: Ensure that you’re using the latest versions of Expo, expo-splash-screen, and expo-router. Sometimes bugs are fixed in newer releases.
6. Consider a Fallback: If the white screen persists, you can provide a fallback component while your app is loading, with the same design as your splash screen, to prevent any noticeable flashes.

This issue often occurs due to improper timing between the splash screen hiding and the app content rendering. By ensuring that you properly handle SplashScreen.preventAutoHideAsync() and only call SplashScreen.hideAsync() once your app is ready, the flash should be minimized or eliminated. Additionally, matching the background color during the transition can make it look smoother.