Multiple Expo.AppLoading


I’ve found myself in a scenario where I’d like to use multiple Exp.AppLoading components.

I use Apollo and in my top level I have something like this:

<AsyncStorage.get key={token} render={token => {
     <ApolloProvider client={Client}>
         <SessionData render={session  => <AppWithNavigationState />
}} />

AsyncStorage.get, SessionData each have their own loading states. I tried to nest Expo.AppLoading but after the initial AppLoading completes, all I get is a blank screen.

Do I have to refactor my setup or is there a way for this to work?

Thanks so much!

I think the recommended practice would be to have one top-level flag which indicates “is the app completely ready?” and then have some method which listens to the loading state of all three of those, waits until all three are complete, and then changes the top-level flag. Then show app loading as long as the top-level flag is not ready yet.

1 Like