screen is blank after using PersistGate in react native

[krunaldodiya]

import React, {memo} from 'react';
import {PersistGate} from 'zustand-persist';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

export default App() {
  const RootStack = createStackNavigator();

  const {initialScreen} = authStore(state => state);

  return  (
     <PersistGate>
          <NavigationContainer>
                <RootStack.Navigator initialRouteName={initialScreen}>
                  <RootStack.Screen
                    name="Auth"
                    component={Auth}
                  />
                </RootStack.Navigator>
              </NavigationContainer>
        </PersistGate>
    )
}

[mbuxmann]

Same here. However, I only have a blank screen when I run my app on IOS. On Android, it works 100%.

[roadmanfong]

Did you try loading prop? in <PersistGate>. It will show the component while getting saved data from storage

[smallsaucepan]

Hey @krunaldodiya and @mbuxmann, I'm going to have a go at fixing this. Did either of you have a loading component configured? If you did, it would help if you can confirm whether you were stuck on your loading component, or whether your loading component never showed up at all.

[mbuxmann]

Hi @smallsaucepan, unfortunately, I didn't have a loading component configured.

[pku-arun]

<PersistGate onBeforeLift={() => { console.log('ON BEFORE EVENT'); }} loading={ <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }}> <Text>LOADING!</Text> </View> }> <AppNavigation /> </PersistGate>

Page is not navigating to inner screens. How should that be configured

[souzaramon]

Any update on this?

[smallsaucepan]

Hi @pku-arun, can you please post your entire code? Are you calling useStore() somewhere prior to rendering the PersistGate? Thanks

[smallsaucepan]

Think I've figured this out. @roadmanfong would you mind reading along to see if the diagnosis and planned fix make sense?

The PersistGate works by setting a custom onAllLoaded callback which sets isReady state to true, lifting the gate. However, if the LoadManager finishes loading the data before the PersistGate renders the default onAllLoaded callback is executed - a noop. This means PersistGate's callback never gets called, and isReady never gets set to true.

Proposed solution is to change LoadManager so that if onAllLoaded is called after all state is loaded, it executes the callback immediately. PersistGate calls onAllLoaded from inside useEffect to avoid calling it multiple times and re-rendering.

If that makes sense I'll work on a PR.

[smallsaucepan]

Resolved by PR #19