How to ensure all assets on home screen are loaded before hiding splash screen React Native

Question

I am developing a React Native application using the Expo development environment/framework. I am able to use a splash screen effectively to load the fonts for the application before the home page loads. However, the home screen's various image assets do not load in time (before the splash screen hides) because those are defined in a different file.

App.js

const Stack = createStackNavigator();
export default function App() {
  
  SplashScreen.preventAutoHideAsync();
  
  const [loaded] = Font.useFonts({ OldLondon: require('./assets/fonts/OldLondon.ttf')});

  if (!loaded) {
    return null;
  } else {
    SplashScreen.hideAsync();
  }

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="App_to_Home"
        screenOptions={
          {
            headerTintColor: 'seagreen',
            headerTransparent: true
          }
        }
      >
        <Stack.Screen
          name="App_to_Home"
          component={HomeScreen}
          options={{
            title: 'Running Quest',
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 50,
              fontFamily: 'OldLondon'
            }
          }}
        />
... other screens from Home ...

HomeScreen.js (where the assets are loaded that I want the splash screen to hide - such as BG.png , knight-idle.gif , and scroll.png )

const HomeScreen = ( {navigation, route} ) => {
    const [loaded] = useFonts({
        OldLondon: require('../../assets/fonts/OldLondon.ttf'),
      });
    
      if (!loaded) {
        return null;
      }
  return (
    <View style={styles.mainView}>
      <Image source={require('../../assets/images/BG.png')} style={styles.backgroundImage} />
      <View style={styles.overlay}>
        <Image source={require('../../assets/images/knight-idle.gif')} />
        <View style={{ flexDirection:"row" }}>
            <View style={{padding: 8}}>
                <TouchableOpacity
                    style={styles.yellowButton}
                    onPress={() => { 
                        navigation.navigate("Home_to_Settings", {user: {
                            id: 2
                    }}) }}
                >
                <ImageBackground source={require('../../assets/images/scroll.png')} style={styles.scrollBackground}>
                <Text style={styles.yellowButton} >Settings</Text>
                </ImageBackground>
                </TouchableOpacity>
            </View>
... other views and buttons and things ...

In case I'm coming across as confusing, I import some images in my Stack Navigator home screen, but I want the splash screen to hide this loading. Currently I can only get the splash screen to hide fonts and imports done within App.js . I open the app and the fonts are loaded, but once the splash screen hides there is a split second where the images of the home screen are still loading.

How do I get the splash screen to also hide the loading of assets done within the home screen? Do I simply call SplashScreen.preventAutoHideAsync() in my home screen like I do within App.js ?

Answer 1

its very straight forword, you can maintain the state for home screen assets. until the assets being loaded. The state you can maintain in redux so that you can easily access the state value. and if you say how to track is that assets being loaded or not, then for that you have to create another component which can be hoc or any child component to track is loaded or not.

to make component use ImageBackground and in this we have onLoadStart property and onLoadEnd property that will track your image loaded or not.

<ImageBackground onLoadStart={this.onLoadStart.bind(this)} onLoadEnd={this.onLoadEnd.bind(this)} onError={this.onError.bind(this)} style={[styles.backgroundImage, style]} source={source} resizeMode={resizeMode} borderRadius={borderRadius}>

Thanks.

Muo Sigma classes