title: How reset persistent react-redux store for testing on iOS device?
body: <p><strong>Background:</strong> I've tried reading up on this issue, but can't come up with an explanation of what actually happens on iOS devices w.r.t. a react-redux and redux-persist store setup.</p>
  <p><strong>References:</strong></p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store">How to reset the state of a Redux store?</a></li>
  <li><a href="https://blog.bam.tech/developer-news/redux-persist-how-it-works-and-how-to-change-the-structure-of-your-persisted-store" rel="nofollow noreferrer">https://blog.bam.tech/developer-news/redux-persist-how-it-works-and-how-to-change-the-structure-of-your-persisted-store</a></li>
  <li><a href="https://discussions.apple.com/thread/250190465" rel="nofollow noreferrer">https://discussions.apple.com/thread/250190465</a></li>
  </ul>
  <p><strong>Problem:</strong></p>
  <ol>
  <li>Our QA team was unable to test out the onboarding experience.</li>
  <li>Onboarding experience: 3 intro screens (controlled by <code>isNew</code> flag -&gt; login -&gt; onboarding tutorial (triggered by <code>is_first_time_login: true</code>, <code>hasLoggedIn || hasPinCodeLoggedIn: true</code>, and <code>hasFinishedOnboardTutorial:false</code></li>
  <li>We've tried on both Android and iOS devices, Android works as intended, but for iOS, it doesn't.</li>
  <li>So for iOS devices, we've deleted the app, restarted the phone, then installed the test app. The test app is distributed via firebase distribution.</li>
  <li>The problem persists, and I'm at a loss on what to do now.</li>
  </ol>
  <p><strong>Code setup:</strong></p>
  <p>store/index.js</p>
  <pre><code>    import { applyMiddleware, compose, createStore } from 'redux';
      import { persistReducer, persistStore, createTransform } from 'redux-persist';
      import createSagaMiddleware from 'redux-saga';
      import logger from 'redux-logger';
      import createSensitiveStorage from 'redux-persist-sensitive-storage';
      import { NODE_ENV } from '@env';
      import isEmpty from 'lodash/isEmpty';
      import RootSaga from 'Sagas';
      import RootReducer from 'Reducers';
      import { UserDetail } from 'Models';
      import ApiUtils from 'Services';
      import { Configs, reactotron } from 'Configs';
      
      const secureStorage = createSensitiveStorage({
        keychainService: 'xxxx',
        sharedPreferencesName: 'xxx'
      });
      
      const PersistStateTransformer = createTransform(
        (inboundState) =&gt; {
          return { ...inboundState };
        },
        (outboundState) =&gt; {
          if (!isEmpty(outboundState?.token)) {
            ApiUtils.injectToken(outboundState?.token);
          }
          return { ...outboundState, userDetails: new UserDetail(outboundState.userDetails), backgroundTimestamp: 0, hasPinCodeLoggedIn: false };
        },
        {
          whitelist: ['auth'],
        }
      );
      
      const persistConfig = {
        key: 'root',
        storage: secureStorage,
        transforms: [PersistStateTransformer],
        whitelist: ['auth', 'ui'],
      };
      
      // Use to remove all the existing state including auth/ui
      // if (NODE_ENV === 'development') {
      //   AsyncStorage.removeItem('persist:root');
      // }
      
      export const buildStore = (initialState = {}) =&gt; {
        const middlewares = [];
        const enhancers = [];
      
        // Connect the sagas to the redux store
        const sagaMiddleware = createSagaMiddleware();
        middlewares.push(sagaMiddleware);
      
        if (NODE_ENV === 'development') {
          middlewares.push(logger);
        }
      
        // do not remove spread operator
        enhancers.push(applyMiddleware(...middlewares));
      
        // Redux persist
        const persistedReducer = persistReducer(persistConfig, RootReducer);
      
        // Reactotron is only needed during dev, in test env it's not necessary
        const store =
          NODE_ENV === 'development'
            ? createStore(persistedReducer, initialState, compose(...enhancers, reactotron.createEnhancer()))
            : createStore(persistedReducer, initialState, compose(...enhancers));
        const persistor = persistStore(store);
      
        // Kick off the root saga
        sagaMiddleware.run(RootSaga);
      
        return { store, persistor };
      };
  </code></pre>
  <p>App.js</p>
  <pre><code>import React, { useEffect } from 'react';
  import { Platform, UIManager } from 'react-native';
  import { Provider } from 'react-redux';
  import { PersistGate } from 'redux-persist/integration/react';
  import { SafeAreaProvider } from 'react-native-safe-area-context';
  import SplashScreen from 'react-native-splash-screen';
  import Navigation from 'Navigations';
  import { buildStore } from 'Stores';
  import { Loading } from 'Screens';
  import { Toast } from 'Components';
  import GlobalUiProvider from 'Contexts';
  import ApiUtils from 'Services';
  
  const { store, persistor } = buildStore();
  ApiUtils.injectStore(store);
  
  const App = () =&gt; {
    if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental &amp;&amp; UIManager.setLayoutAnimationEnabledExperimental(true);
    }
  
    useEffect(() =&gt; {
      SplashScreen.hide();
    }, []);
  
    return (
      &lt;SafeAreaProvider&gt;
        &lt;Provider store={store}&gt;
          &lt;PersistGate loading={&lt;Loading /&gt;} persistor={persistor}&gt;
            &lt;GlobalUiProvider&gt;
              &lt;Navigation /&gt;
            &lt;/GlobalUiProvider&gt;
            &lt;Toast /&gt;
          &lt;/PersistGate&gt;
        &lt;/Provider&gt;
      &lt;/SafeAreaProvider&gt;
    );
  };
  
  export default App;
  export { store, persistor };
  </code></pre>
  <p>publicNavigation.js (snippet)</p>
  <pre><code>&lt;PublicStack.Navigator screenOptions={Configs.PUBLIC_SCREEN_OPTIONS}&gt;
        {isNew ? (
          &lt;PublicStack.Screen name=&quot;Onboard&quot; component={Onboard} /&gt;
        ) : (
            &lt;PublicStack.Screen name=&quot;Login&quot; component={Login} /&gt;
        )}
      &lt;/PublicStack.Navigator&gt;
    );
  </code></pre>
  <p>Let me know if I need to add more details.</p>