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 https://docs.expo.io/versions/latest/sdk/app-loading/

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