Splash screen configuration for a bare expo app.

splashScreen.js

import React, { useState, useEffect } from 'react';
import { useFonts } from '@use-expo/font';
import * as SplashScreen from 'expo-splash-screen';

const App = () => {
  const [isReady, setIsReady] = useState(false)
  const [isLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Medium': require('./assets/fonts/Poppins-Medium.ttf'),
    'Poppins-SemiBold': require('./assets/fonts/Poppins-SemiBold.ttf'),
  });

  useEffect(() => {
  	// Stop the Splash Screen from being hidden.
    const showSplashScreen = async () => {
      await SplashScreen.preventAutoHideAsync();
    }
    showSplashScreen();
    // You can do additional data fetching here.
    // I have a function that fetches my user from Firebase
    // but I have left it out because it is kind of irrelevant
    // in this demo.
  }, []);

  useEffect(() => {
  	// Once our data is ready, hide the Splash Screen
    const hideSplashScreen = async () => {
      await SplashScreen.hideAsync();
    }

    if (isLoaded && isReady) hideSplashScreen();
  }, [isReady])
  
  if (!isReady) return null;
  
  return (
    <RootComponent />
  )
}