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);

Can you show us how you're declaring your persistConfig using @react-native-community/async-storage? — Neeko
– Neeko, Commented Oct 28, 2019 at 14:13
@Neeeko I've updated the question (commented out) to answer your question. Thank you! — Nyxynyx
– Nyxynyx, Commented Oct 28, 2019 at 15:58
@Neeeko iOS only. No android device currently available for testing this. — Nyxynyx
– Nyxynyx, Commented Oct 29, 2019 at 14:40

tolotra · Accepted Answer · 2019-10-28 14:30:46Z

8

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);

answered Oct 28, 2019 at 14:30

tolotra

3,2701 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nyxynyx Over a year ago

Thanks tolotra! I did try your approach (commented out on question) but encountered the error [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. Maybe because I am using Expo SDK 35 which uses React Native 0.5.9 and not 0.6?

tolotra Over a year ago

May be, try to use expo import for AsyncStorage import { AsyncStorage } from 'react-native';

Nyxynyx Over a year ago

I have tried this approach, encountered the error

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

Updated the question to reflect this.

Dharman · Accepted Answer · 2020-12-30 02:01:39Z

6

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
}

edited Dec 30, 2020 at 2:01

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Dec 30, 2020 at 1:56

Arosha

1,4112 gold badges19 silver badges22 bronze badges

1 Comment

Suraj Neupane Over a year ago

I'm using expo ~45.0.0. So far, this is the solution that works. @react-native-community/async-storage this doesn't work since it can't link up.

goodhyun · Accepted Answer · 2022-01-09 04:14:37Z

1

A simple inadvertent typo such as

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

will end up with

config.storage is required

or

redux-persist failed to create sync storage. falling back to noop storage.

answered Jan 9, 2022 at 4:14

goodhyun

5,0083 gold badges35 silver badges25 bronze badges

2 Comments

Prudhvi Raj Kumar Over a year ago

How did you resolve this?

goodhyun Over a year ago

Simply remove { }

Neeko · Accepted Answer · 2019-10-29 14:50:21Z

0

It might be a library linking issue.

Make sure you ran react-native link @react-native-community/async-storage

I would also suggest going to your ios folder and running pod install.

If you're not using Cocoapods, have a look here for manual linking.

answered Oct 29, 2019 at 14:50

Neeko

1,1591 gold badge10 silver badges26 bronze badges

1 Comment

Nyxynyx Over a year ago

Thanks! Hoping for a solution without having to eject the Expo app (necessary for linking the lib)

Rajendra singh rana · Accepted Answer · 2021-05-13 22:24:04Z

0

yarn add @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage'; const authPersistConfig = { key: 'auth', stateReconciler: autoMergeLevel2, storage: AsyncStorage, whitelist: ['isAuthenticated', 'sessionToken', 'userId'], };

worked for me

answered May 13, 2021 at 22:24

Rajendra singh rana

4615 silver badges4 bronze badges

Collectives™ on Stack Overflow

Expo React Native App + Redux-Persist: AsyncStorage Problem

5 Answers 5

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related