zustand-persist
zustand-persist copied to clipboard
screen is blank after using PersistGate in react native
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>
)
}
Same here. However, I only have a blank screen when I run my app on IOS. On Android, it works 100%.
Did you try loading
prop? in <PersistGate>. It will show the component while getting saved data from storage
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.
Hi @smallsaucepan, unfortunately, I didn't have a loading component configured.
<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
Any update on this?
Hi @pku-arun, can you please post your entire code? Are you calling useStore() somewhere prior to rendering the PersistGate? Thanks
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.
Resolved by PR #19