Redux persist not working with RN 0.73

[OmarBasem]

After upgrading to RN 0.73.1, my app gets stuck on a blank loading screen (PesistGate loading).

Removing PersistGate from the App tree makes it work.

I tried debugging the problem, in the file lib/integration/react.js, this.state.bootstrapped returns false, therefore returns loading.

[eithe]

Anyone else seeing this with RN 0.73? We are due to upgrade soon so want to know if this is a showstopper. Any news on your side @OmarBasem ?

Edit: And @OmarBasem, did you debug exactly what happens in the handlePersistorState function causing bootstrapped state not being set to true? https://github.com/rt2zz/redux-persist/blob/d8b01a085e3679db43503a3858e8d4759d6f22fa/src/integration/react.ts#L34

[OmarBasem]

@eithe No news from my side.

Edit: And @OmarBasem, did you debug exactly what happens in the handlePersistorState function causing bootstrapped state not being set to true?

Nope, I did not debug exactly what happens. I wasn't in urgent need of 0.73 so I rolled back to 0.72.

If you find anything let me know please.

[Harisene]

I'm trying to use redux-react in my React native application version 0.72.8. When I try to import PersistGate like below it can't be accessible.

import {PersistGate} from 'redux-persist/integration/react'

I checked the node_modules and found out the integration folder is not even there. Any solution for this?

[samvoults]

I copied/pasted my redux implementation from a RN 0.72 project to a new RN 0.73 project and it's not working for me neither although it's working correctly on my RN 0.72 project.

[johnhamlin]

Same problem here on Expo 50 / React Native 0.73.

[samvoults]

Does anyone know if this has a chance to be fixed anytime soon?

[johnhamlin]

I've got a solution that's working for me, which you can install with `npm install @johnhamlin/redux-persist.' (You'll have to update all of your import statements too.)

Long story short(er), the code in this repo was updated to version 6.1 three years ago, but that was never published for whatever reason. The latest on npm is 6.0. patch-package didn't like the version mismatch and broke, so I published a new npm package instead.

The only change I made was to update @types/react to the current version, 18.2.51, from 17.0.16. That fixed a problem where TypeScript was complaining that <PersistGate> wasn't a JSX component. Whether that fixed the problem, or the problem was fixed somewhere else in the code changed from 6.0 to 6.1, I'm not sure, but it's working for me and I'm moving on. I'll make a PR with that change, but no PRs have been approved since 2021.

I've tested my version on Expo SDK 50 / React Native 0.73. It works in development and production builds on my iPhone and in simulators. Hope this helps others!

[samvoults]

Hi John. By trying your package, I found why my redux-persist wasn't working. It was because I didn't add the right value in the whitelist (lol). After the fix I did, I deleted node modules folder and npm i to be sure it was not using a cache version of your package John and it was still working. Thanks for your time though.

const slicePersistConfig = {
  key: SLICE,
  storage: AsyncStorage,
  version: 1,
  whitelist: ["settings"],` // I changed the value here.
};

Which means redux-persist is apparently working in my project with those versions:

"@react-native-async-storage/async-storage": "1.21.0",
"@react-navigation/native": "^6.1.9",
"@reduxjs/toolkit": "^2.1.0",
"expo": "~50.0.5",
"react": "18.2.0",
"react-native": "0.73.2",
"react-redux": "^9.1.0",
"redux-persist": "^6.0.0"

Here is my implementation in case it could help someone else:

store.js

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

import { sliceReducer } from "./slice";

const slicePersistConfig = {
  key: "slice",
  storage: AsyncStorage,
  version: 1,
  whitelist: ["settings"],
};

const reducers = combineReducers({
  slice: persistReducer(slicePersistConfig, sliceReducer),
});

export const store = configureStore({
  reducer: reducers,
  devTools: process.env.NODE_ENV !== "production",
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

slice.js

import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "slice",
  initialState: {
    settings: {
      isFirstLaunch: true,
      selectedTheme: undefined,
    },
  },
  reducers: {
    setSelectedThemeInSlice: (slice, action) => {
      slice.settings.selectedTheme = action.payload;
    },
  },
});

export const { setSelectedThemeInSlice } = slice.actions;

export const sliceReducer = slice.reducer;

[johnhamlin]

Glad you got it working! I was trying to set this up in a new project, so it wasn't totally clear why it started working when it did 😅

[eithe]

So to conclude you are also seeing that it's working with RN 0.73 and React 18.x without your 6.1 package @johnhamlin ?

[saneybinfaruk]

@eithe Yes its working with @react-native-async-storage/async-storage. Just , put the right name on whitelist!

[gabriel-logan]

Give a try to my library

https://github.com/Redux-Utils/react-native-redux-persist/

I made it especially for react-native and expo.

So far you can use AsyncStorage and Expo Secure Store