Waiting for Asynchronous Load in React Native
By: Ben Aron Davis
Tags: React Hook, Expo, App Development, React Native, Asynchronous

Waiting for Asynchronous Load in React Native

Using Expo’s AppLoading Component to Conditionally Render

Photo by Kai Pilger on Unsplash

AppLoading is a useful component offered by Expo, so be sure you’re using Expo to create your React Native app before you follow this advice.

When AppLoading Comes in Handy

If your app depends on any asynchronous response, AppLoading will be useful for you. My app uses AppLoading in the ‘App.js’ file because I use fonts that require loading. If my app’s components render immediately, they could try to use fonts that have not loaded yet. Here we can use the AppLoading component with certain props to accomplish a few things:

Keeps the loading screen up until a different component is ready to render

Starts an asynchronous load

Specifies what to do once the asynchronous load finishes

Two Props That Come Together

All of the props for AppLoading are technically optional, but it’s a lot easier to use if you provide at least two props. These two props work together, so you can’t use one without the other.

startAsync

We pass a function for this prop, and this function runs as soon as AppLoading renders. The function must return an asynchronous action, because its partner prop depends on the response. In my AppLoading component, I pass a function called fetchFonts to the startAsync prop. Here’s how fetchFonts looks:

Notice that fetchFonts() doesn’t simply call Font.loadAsync() , it actually returns it. This is important because otherwise the AppLoading component doesn’t have access to see when the asynchronous call finishes with its response. When AppLoading sees the asynchronous action has finished, it runs the function passed to the onFinish prop.

onFinish

onFinish also receives a function, and this function runs as soon as startAsync finishes. In my AppLoading component, I pass onFinish an anonymous function that updates the state variable with a new boolean value. This re-renders the App component, and the updated state variable value renders the rest of the app instead of the AppLoading component.

How It All Fits Together

Now that we know how AppLoading works with its props, it’s time to check out how the AppLoading component fits with everything else in my functional App component.

Since my App component is a functional component, I use Hooks to create a state variable called fontLoaded that tracks whether everything has loaded. This way when the value changes, the component has to re-render so the conditional is re-evaluated, which will render the rest of the app instead of the AppLoading component. Initially I set fontLoaded to false. The conditional is set to return the AppLoading component if fontLoaded is false.

When the asynchronous load finishes, the anonymous function passed to the onFinish prop will run. This anonymous function uses the setFontLoaded function created alongside the fontLoaded state variable. We pass the boolean value true to setFontLoaded, so that fontLoaded equals true when the component re-renders.

The component only returns AppLoading when fontLoaded does not equal true. We now skip over the content of that if statement, and we return the rest of our app.

Remember Your Imports Before You Start

If you think this might be useful in your own React Native app, you need to import a couple things in your file before utilizing these helpful tools: