Search code examples
reactjsreact-nativeexposplash-screen

React-Native Expo: Show only SplashScreen when loading fonts

How do I only show the SplashScreen instead of an emtpy view when waiting for loading the fonts and other async tasks? The problem I'm currently facing (on Android & iOS) is that when the fonts are not loaded, a white empty view with a title gets display, which is very annoying.

This is my current code:

import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font"
import { useEffect } from "react";

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    ...
  })

  useEffect(() => {
    if (fontError) throw fontError;
    if (fontsLoaded) SplashScreen.hideAsync();
  }, [fontsLoaded, fontError])

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
  );
}

image 1 image 2

I also tried returning the deprecated component which also did not work

Solution

  • I solved it by adding another Stack.Screen to my root _layout.jsx file like following:

    <Stack.Screen name="index" options={{ headerShown: false }} />

    After that I could easily make the splash screen appear using the Image component.