React Native with Redux + persist + redux-react-hook

gistfile1.js

import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import React, { useEffect, useState } from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { ThemeProvider } from 'react-native-elements';
import { LocalizeProvider, withLocalize } from "react-localize-redux";
import { Ionicons } from '@expo/vector-icons';
import AppNavigator from './navigation/AppNavigator';
import { createLogger } from "redux-logger";
import * as NavigationService from './services/NavigationService.js'
import { Provider } from "react-redux";
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import { StoreContext } from "redux-react-hook";
import createSagaMiddleware from "redux-saga";
import { compose, createStore, applyMiddleware } from "redux";
import reducers from "./redux/reducers";
import rootSaga from "./redux/sagas";

const theme = {
  colors: {
    primary: '',
    secondary: ''
  }
};

const loggerConfig = {
  collapsed: true
};

const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const createStoreWithMiddleware = applyMiddleware(
  sagaMiddleware,
  createLogger(loggerConfig),
)(createStore);

const store = createStoreWithMiddleware(
  reducers
);

sagaMiddleware.run(rootSaga);


function App(props) {
  const [navigator, setNavigator] = useState();
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  useEffect(() => {
    NavigationService.setNavigator(navigator)
  }, [navigator])

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <Provider store={store}>
        <StoreContext.Provider value={store}>
          <PersistGate loading={null} persistor={persistStore(store)}>
            <LocalizeProvider store={store}>
              <ThemeProvider theme={theme}>
                <View style={styles.container}>
                  {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                  <AppNavigator ref={nav => {
                    setNavigator(nav)
                  }}/>
                </View>
              </ThemeProvider>
            </LocalizeProvider>
          </PersistGate>
        </StoreContext.Provider>
      </Provider>
    );
  }
}

export default withLocalize(App);

async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({
      ...Ionicons.font,
      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
}

function handleLoadingError(error) {
  console.warn(error);
}

function handleFinishLoading(setLoadingComplete) {
  setLoadingComplete(true);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});