Expo React Native App + Redux-Persist: AsyncStorage Problem

Question

I just started a new Managed Expo React Native project (Expo SDK 35, React Native 0.5.9) using [email protected] but even a fresh expo project with redux/redux-persist is currently throwing the error below.

---

Using AsyncStorage from react-native,

we get the error:

redux-persist: config.storage is required. Try using one of the provided storage engines import storage from 'redux-persist/lib/storage'

---

Using AsyncStorage from @react-native-community/async-storage,

we get the error:

[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

---

Using storage from redux-persist/lib/storage,

we get the error:

console.error: "redux-persist failed to create sync storage. falling back to noop storage."

---

Question: How do we solve this problem without ejecting? Thanks!

---

redux-persist Code

Note: Previous attempts have been commented out:

// Chose 1 of the 3 storages
// import { AsyncStorage } from "react-native";
// import AsyncStorage from '@react-native-community/async-storage';
import storage from 'redux-persist/lib/storage'

import { createMigrate, persistStore, persistReducer } from "redux-persist";
import reducer from "../reducers";

const persistConfig = {
    key: 'root',
    version: 0,
    storage,    // 'redux-persist/lib/storage'
}

// const persistConfig = {
//   key: 'root',
//   version: 0,
//   AsyncStorage,    // '@react-native-community/async-storage'
// }

const persistedReducer = persistReducer(persistConfig, reducer);

Answer 1

This import is for Web App :

import storage from 'redux-persist/lib/storage'

For React Native, you should use the following imports:

import AsyncStorage from '@react-native-community/async-storage';
import { createMigrate, persistStore, persistReducer } from "redux-persist";
import reducer from "../reducers";

const persistConfig = {
    key: 'root',
    version: 0,
    //...
    storage: AsyncStorage
}

const persistedReducer = persistReducer(persistConfig, reducer);

Answer 2

For React Native below code does not work.

import AsyncStorage from '@react-native-async-storage/async-storage';

const persistConfig = {
    key: 'root',
    AsyncStorage
}

Because persistConfig expects a key storage

Below persistConfig works for React Native.

import AsyncStorage from '@react-native-async-storage/async-storage';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage
}