Redux Persist not working on IOS... works well on android

Redux persist works on android but is not working on IOS 11.0 my code is as below

// store.js
export const configureStore(intialState){
const rootPersistConfig = {
  key: "root",
  storage: storage,
  debug: true
};

const persistedReducer = persistReducer(rootPersistConfig, rootReducer);

middlewares = [...];

let store = createStore(
    persistedReducer,
    initialState,
    composeEnhancers(applyMiddleware(...middlewares))
  );
let persistor = persistStore(store);
return { persistor, store };
}

and my app.js is as follows

// app.js
// other imports
const { persistor, store } = configureStore({});

export default App extends Component {
// all other things

render() {
    return (
      <Provider store={store}>
        <AlertProvider>
          <Root>
            <PersistGate persistor={persistor} loading={null}>
              <RootNav />
            </PersistGate>
          </Root>
        </AlertProvider>
      </Provider>
    );
  }
}

I also had redux-logger which I checked in the console neither the PERSIST event nor REHYDRATE occurs. The persistGate never gets lifted. Please help stuck from past 4 days. 😦 thanks in advance

[ltankey]

Argh I’m having the opposite - works fine on iOS simulator but not on a connected Android device! Hopefully it’s a related issue and someone can respond…

[evertonco]

App.js

export default class App extends React.Component {
  render() {
    return (
      <ApolloProvider client={client} store={store}>
        <AppNavigator {...this.props} />
      </ApolloProvider>
    );
  }
}

navigator.js

export const AppNavigator = createSwitchNavigator(
  {
    AppLoading,
    App,
    Auth,
  },
);

app-loading.js

class AppLoading extends Component {

  storeReady = false;
  // other variable definitions

  state = {};

  componentWillMount() {
    
    const { _persist } = this.props;
    
    // set flag (expected be true)
    this.storeReady = _persist.rehydrated;
    ...
  }

  componentWillReceiveProps({ _persist }) {

    // check for REHYDRATE event (On IOS, this event is not fired. On android, works correctly)
    if (!this.props._persist.rehydrated && _persist.rehydrated) {

      this.storeReady = true;
      ...
    }
  }

  // I'm using Expo. So, I check if this.storeReady flag is true to allow app to go to next screen:
  handleFinishLoading = () => {
    if(this.storeReady) {
      // logic to check if user is authenticated or other stuff and redirect to correct screen
      this.props.navigation.navigate('NextScreen');
    } else {
       // redirect to error screen?!
    }
  }

  render() {
    return (
      <Expo.AppLoading
        startAsync={this.handleLoadResources}
        onError={this.handleLoadingError}
        onFinish={this.handleFinishLoading}
      />
    );
  }
}

// redux mapping to get access to _persist prop
const mapStateToProps = ({ _persist }) => ({ _persist });

export default connect(mapStateToProps)(AppLoading);