I'm using the built in splash screen in expo that you add in app.json for a simple test app. However I noticed that my start screen flashes in default mode 1 millisecond before showing the assets that I've added with AsyncStorage.

I've tried using splash-screen package from expo but I found it a bit confusing. Is there a fairly easy way to add in my App.js this logic :

Show a splash screen and when all assets are loaded, load this setup (with my contexts and screens), or just increase loading time of the build in splash screen from expo (because I assume it loads over the assets being fetched?).

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  useEffect(()=> {
    changeTheme()
  },[])


  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" ponent={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};

I'm using the built in splash screen in expo that you add in app.json for a simple test app. However I noticed that my start screen flashes in default mode 1 millisecond before showing the assets that I've added with AsyncStorage.

I've tried using splash-screen package from expo but I found it a bit confusing. Is there a fairly easy way to add in my App.js this logic :

Show a splash screen and when all assets are loaded, load this setup (with my contexts and screens), or just increase loading time of the build in splash screen from expo (because I assume it loads over the assets being fetched?).

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  useEffect(()=> {
    changeTheme()
  },[])


  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" ponent={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};

• javascript
• reactjs
• react-native
• expo

2 Answers 2

First solution

You could use the SplashScreen module from Expo. Here is an overview of how you could use it:

expo install expo-splash-screen

import * as SplashScreen from "expo-splash-screen";
import React, { useCallback, useEffect, useState } from "react";
import { Text, View } from "react-native";

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      // Keep the splash screen visible
      await SplashScreen.preventAutoHideAsync();
      // Do what you need before the splash screen gets hidden
      console.log("I'm a task that gets executed before splash screen disappears");
      // Then tell the application to render
      setAppIsReady(true);
    }
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      // Hide the splash screen
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View onLayout={onLayoutRootView} style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Hello Word!</Text> </View>
  );
}

Second solution

There is also AppLoading ponent from Expo, but it seems to be deprecated. But it works, and here is an overview of how you would use it:

 expo install expo-app-loading

import AppLoading from "expo-app-loading";
import {View, Text} from "react-native"


export default function App() {
 const [isChecking, setIsChecking] = useState(true);

 const  asyncDoThings = async ()=>{
    // You do here all the fetching and checking process
 }

 if (isChecking) {
    return (
      <AppLoading
        startAsync={() => asyncDoThings()}
        onFinish={() => setIsChecking(false)}
        onError={console.warn}
      />
    );
  }

  return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Hello Word!</Text></View>
  
}

Additional one

The section below is a special use case answering the above question using the AppLoading:

import AppLoading from "expo-app-loading";
import {View} from "react-native"

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)
  const [isChecking, setIsChecking] = useState(true);

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  if (isChecking) {
    return (
      <AppLoading
        startAsync={() =>   changeTheme()}
        onFinish={() => setIsChecking(false)}
        onError={console.warn}
      />
    );
  }
  
  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" ponent={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};

I had the same issue but in my case I have created an expo project with initial navigation screens. When you create a project with this setting, the App.tsx file will contain the hook useCachedResources.

import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './src/hooks/useCachedResources';
import Navigation from './src/navigation';
  
export default function App() {
  const isLoadingComplete = useCachedResources();
  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

When checking the hook, we can see that there is a code to keep the splash screen while loading the fonts. So we just add the timeout on the finally block before the SplashScreen.hideAsync().

import { FontAwesome } from '@expo/vector-icons';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';

SplashScreen.preventAutoHideAsync();

export default function useCachedResources() {
  const [isLoadingComplete, setLoadingComplete] = useState(false);
  useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        await Font.loadAsync({
          ...FontAwesome.font,
          'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),
        });
      } catch (e) {
        console.warn(e);
      } finally {
        await new Promise(resolve => setTimeout(resolve, 2000));
        setLoadingComplete(true);
        SplashScreen.hideAsync();
      }
    }
    loadResourcesAndDataAsync();
  }, []);
  return isLoadingComplete;
}