patterntypescriptreact-nativeTip

Splash Screen Implementation with expo-splash-screen

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

splash screenexpo-splash-screenpreventAutoHideAsynchideAsyncstartupwhite flash

Problem

The default native splash screen disappears before React Native finishes mounting, causing a white flash. Apps need to control when the splash screen hides.

Solution

Use expo-splash-screen. Call SplashScreen.preventAutoHideAsync() at module load time. After fonts, data, and other async resources are ready, call SplashScreen.hideAsync(). In Expo, configure the splash image in app.json under expo.splash.

Why

The native splash screen is shown immediately by the OS (zero JS involvement). preventAutoHideAsync tells the native layer not to hide it automatically after JS loads. Your app keeps control until explicitly ready.

Gotchas

Call preventAutoHideAsync at module level (top of App.tsx), not inside a component
If the app crashes before hideAsync is called, the splash screen stays forever — use a try/finally
Android splash screens require a launch_background.xml drawable for proper full-screen coverage
iOS 16+ has native splash screen support — expo handles this automatically

Code Snippets

Controlled splash screen with resource loading

import * as SplashScreen from 'expo-splash-screen';

// Keep splash visible while loading resources
SplashScreen.preventAutoHideAsync();

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

  useEffect(() => {
    async function prepare() {
      try {
        await Font.loadAsync(customFonts);
        await prefetchData();
      } catch (e) {
        console.warn(e);
      } finally {
        setReady(true);
      }
    }
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (ready) await SplashScreen.hideAsync();
  }, [ready]);

  if (!ready) return null;

  return <View onLayout={onLayoutRootView}>{/* app */}</View>;
}

Revisions (0)

No revisions yet.