I'm following the react navigation documentation, react-navigation-redux-helpers's documentation, but always throw me this error. also if i erase the persistGate the error gets fixed but i need to persist some data so that shouldn't be an option

This is my store.js

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';

import Reducer from './reducers/index';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    blackList: [],
};

const AppReducer = persistReducer(persistConfig, Reducer);

const middleware = createReactNavigationReduxMiddleware(
    (state) => state.navigation,
);

export const store = createStore(AppReducer, applyMiddleware(middleware));
export const persistor = persistStore(store);

This is my app-with-state.js

import AppNavigator from './AppNavigator';

const AppNavigatorWithState = createReduxContainer(AppNavigator);

class ReduxNavigation extends React.Component {
    render() {
        const { state, dispatch } = this.props;

        return <AppNavigatorWithState navigation={state} dispatch={dispatch} />;
    }
}

const mapStateToProps = (state) => ({
    state: state.navigation,
});

export default connect(mapStateToProps)(ReduxNavigation);

this is my AppNavigator.js

const Main = createStackNavigator(
    {
        Home: Home,
        Movie: Movie,
        Category: Category,
    },
    {
        defaultNavigationOptions: {
            header: Header,
        },
    },
);


const TabNavigator = createBottomTabNavigator(
{
        Home: {
            screen: Main,
            navigationOptions: {
                tabBarIcon: <Icon icon='