How to load assets right when app itself is loading.

In my App.js render method I check for the value of this.state.loading. If it’s true, then I show activity indicator, otherwise, I load the app. I set the value of the loading variable in the componentDidMount like this:

async componentDidMount() {
await Font.loadAsync({
“icon-fonts”: require(“./assets/fonts/icon-fonts.ttf”),
“segoe-ui”: require(“./assets/fonts/segoe-ui.ttf”),
“segoe-ui-bold”: require(“./assets/fonts/segoe-ui-bold.ttf”)
});
await Asset.loadAsync([require(“./assets/logo_blue.png”)]);
this.setState({ loading: false });
}

But there’s one little thing that I find a bit not right. When app itself is loading the splash image is shown. And after that comes the activity indicator and stays there until all fonts and assets are loaded. Is there a way to actually load all these stuff when app itself is loading, to avoid kind of a two step loading.

If you render AppLoading while loading equals false, then it should show your splash screen until its finished. See AppLoading - Expo Documentation

1 Like

Wow. That’s really awesome. I’ve come across the AppLoading component lots of times before but for some reason, I always thought that it’s something like the ActivityIndicator. That’s exactly what I needed. Thanks a lot

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.