Redux Persist renders a white screen instead of SplashScreen

[ilyadynin]

`const App: React.FC = () => {
useEffect(() => {
//useEffect stuff
}, [])

const CustomLoadingScreen = () => {

console.log('Rendering')

return (
  <View style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }}>
    <Text style={{
      fontSize: 20,
      color: 'black',
      fontWeight: 'bold',
    }}>Loading...</Text>
  </View>
);

};`

return ( <> <I18nextProvider i18n={i18n}> <Provider store={store}> <PersistGate loading={<CustomLoadingScreen />} persistor={persistor}> <StatusBar /> <Root /> </PersistGate> </Provider> </I18nextProvider> </> ); };

So I integrated redux persist and overall it works completely fine in my project, but when it comes to loading the App we have an issue. Instead of showing a Loading screen, it shows a completely blank screen for 1-1,5 seconds.

In my project I use expo and also SplashScreen.preventAutoHideAsync(); provided by Expo to show an initial SplashScreen, and I would like to keep it there until everything loads or better said also when the PersistGate is loading, but I didn't find away how to achieve this. And the issue here is that now I am trying to pass a CustomLoadingScreen component to loading, but it is still white and there is a white 1 sec delay on my Android phone at least between the expo SplashScreen, the white screen caused by PersistGate and my app being loaded.