PersistGate causes the app to stop rendering

Question

I am in the process of configuring a React Native app with Redux store and PersistGate. The Redux store is configured and working as expected, but the PersistGate is causing the app to stop rendering even the first screen. Without PersistGate the app renders fine.

Here is the App.js code:

    import React, {Component} from 'react';
    import { Provider } from 'react-redux';
    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import { persistStore, autoRehydrate } from 'redux-persist';
    import { PersistGate } from 'redux-persist/integration/react';
    import AppNavigator from './AppNavigator';
    import SplashScreen from 'react-native-splash-screen';
    import allReducers from './store/reducers/index';

    const store = createStore(
      allReducers,
      applyMiddleware(thunk),
      //compose(applyMiddleware(thunk), autoRehydrate()),
    );

    // This line makes store persistent.
    const persistor = persistStore(store);

    type Props = {};
    export default class App extends Component<Props> {
      componentDidMount() {
        if (SplashScreen) {
          SplashScreen.hide();
        }
      }
      render() {
        return (
          <Provider store={ store }>
            <PersistGate persistor={persistor}>
                <AppNavigator />
            </PersistGate>
          </Provider>
        );
      }
    }

The Reducer index file:

    import {combineReducers} from 'redux';
    import userReducer from './UserReducer';
    const allReducers= combineReducers({
      user: userReducer,
    });
    export default allReducers;

If I remove the <PersistGate persistor={persistor}> tag from App.js file, the app works fine. But when I use the PersistGate, I just see a white screen without any crash.

What am I missing which causes this weird output?

Answer 1

You also need to call the persistReducer function:

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)
let store = createStore(persistedReducer)
let persistor = persistStore(store)

More info in their doc: https://github.com/rt2zz/redux-persist