How to remove 'Warning: Async Storage has been extracted from react-native core...'?

Question

I've already tried what's recommended in this screenshot

by using this line of code import AsyncStorage from '../../../node_modules/@react-native-community/async-storage'; in the file where I'm importing async-storage from react-native but this path is unresolved, i.e. async-storage doesn't exist in this directory. I also tried installing async-storage (even though it's already installed) by running yarn add async-storage, but nothing appeared in the previously mentioned directory

Idellaidelle

Did you try to install exactly what was mentioned, that is @react-native-community/async-storage? – Trackandfield

Have you tried to use directly this import instead of ../../../node..... ? : import AsyncStorage from '@react-native-community/async-storage'; – Arjan

Yes, I did. It threw this error – Idellaidelle

Hi, I got this not from my direct dependency but from my dependency's dependency. Do you have any idea how to solve this? – Thuythuya

Have you tried installing AsyncStorage according to Andrew's answer? – Idellaidelle

Answer 1

There are two ways you can do this.

• Firstly import AsyncStorage correctly. This will remove the warning and fix the problem.
• Secondly, suppress the warning. This will just hide the warning but will cause you issues once AsyncStorage has been removed from react-native. I would not do this as the first way actually solves the problem.

Note you can get this warning if you are using a dependency that uses AsyncStorage and still imports it the old way from react-native. Installing AsyncStorage won’t fix the error. You will need to look through your dependencies’ dependencies to find out which one is causing it.

This means actually going through the code of each your dependencies to see if they use AsyncStorage. Searching through your node modules or on the dependency's Github usually is sufficient but it can take some time to find it.

Once you have found out which one is causing it, you should open an issue or create a PR with a fix on the dependency’s repo. At this point suppressing the warning is all you can do until it is fixed.

Install AsyncStorage

1. Install it using your favourite package manager npm or yarn
2. Link the dependency
3. Use the dependency

Installation: choose the method you usually use

npm i @react-native-community/async-storage

or

yarn add @react-native-community/async-storage

Link the dependency (you may not have to do this if you are using 0.60+ as it has Autolinking)

react-native link @react-native-community/async-storage

Then you import it like this, and use it as before.

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

You can see more about it by looking here

Suppress the warning.

Previously you would use YellowBox to suppress warnings, this has now changed to LogBox. The process is similar to that of YellowBox

import { LogBox } from 'react-native';

Then you can add the following

LogBox.ignoreLogs(['Warning: Async Storage has been extracted from react-native core']);

I usually do it in the App.js so it is easy to keep track of which ones I have hidden.

It won't remove the warning from your console, but it will remove any LogBox warnings associated with the error. However, I wouldn’t do this on this occasion as there is a proper fix, which is to install the dependency correctly.

---

Expo users

Currently Expo still imports AsyncStorage from react-native, due to this you may still experience the warning. I believe it still imports it this way for backwards compatibility reasons. A quick search of the Expo repo shows that there are many instances where it is used as you can see here. In this case your only option would be to suppress the warning. According to the Expo feature requests it is currently in progress, so hopefully it should be added to Expo shortly.

Expo Update

As of June 2020: @react-native-community/async-storage v1.11.0 can be installed in Expo managed apps. Hopefully this will lead to less of these warnings appearing as dependencies transition to the new way of importing async-storage.

Repo update

There is now a new repository for async-storage which can be found here

https://github.com/react-native-async-storage/async-storage

Check out the documentation for installation and linking instructions

https://react-native-async-storage.github.io/async-storage/docs/install/

Kummerbund

definitely do not put that in your render method! YellowBox.ignoreWarnings does a whole lot of iterations over collections, putting it in the render is a terrible idea (render is too hot!). You only want it to execute once, I would maybe put it in componentDidMount, perhaps wrapping it in lodash.once – Incapacitate

Suppressing the warning is not an answer. The warning should not be showing in the first place. I too tried to install it using the methods you described but it does not remove the warning. – Yasukoyataghan

@Yasukoyataghan have you removed all instances of import { AsyncStorage } from 'react-native and replaced them with import AsyncStorage from '@react-native-community/async-storage' as you may have missed one which will cause you to still get the warning? – Kummerbund

I'm experiencing the same issue as Hasen. – Symmetrical

@Symmetrical if you’ve updated all your instances of where you are using Async-Storage to the correct import then it could be caused by a dependency that uses Async-Storage. – Kummerbund

Yes, I ended up figuring out that I use react-native-elements which depends on react-native-ratings which has expo as a dependency. Unfortunately, the latest version of expo still relies on an import of AsyncStorage from react-native as you can see here: github.com/expo/expo/blob/master/packages/expo/src/… – Symmetrical

As @Symmetrical mentions above, Expo users must still load AsyncStorage from react-native, because expo doesn't yet support packages that require linking. – Hacker

@Symmetrical thanks, would upvote but missclicked and removed an upvote so I can never upvote your comment again. Silly dependencies need updates. – Personalty

Seems like @react-native-community/async-storage is now deprecated – Felishafelita

To suppress the warning: 1 - import {LogBox} from 'react-native'; instead of importing YellowBox 2 - LogBox.ignoreLogs(['Warning: Async Storage has been extracted from react-native core']) instead of YellowBox..ignoreWarnings – Treece

Answer 2

If the source of the issue is Firebase then a working solution as of version 9.9.2 is to set the default persistence layer used by Firebase to store the authentication session to be AsyncStorage after correctly importing it:

expo install @react-native-async-storage/async-storage

then to add in firebase.js

import AsyncStorage from '@react-native-async-storage/async-storage';
import { initializeAuth, getReactNativePersistence} from 'firebase/auth/react-native';

and then to export { auth } via

const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});

export { auth };

Unlike getAuth(), initializeAuth() gives us control over the persistence layer .

Reference.

Floater

This is the right solution for Firebase, and works.To add more references, it was introduced here github.com/firebase/firebase-js-sdk/issues/… and I also liked the single-loading trick from this comment: github.com/firebase/firebase-js-sdk/issues/… – Spiritoso

Answer 3

This seems to be an ongoing issue on Firebase with React Native.

Check out this thread:

https://github.com/firebase/firebase-js-sdk/issues/1847

Berezina

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Matter

@essam explains the eventual solution to this in their answer – Spiritoso

Answer 4

For me this issue was with @firebase.

node_modules/@firebase/app/dist/index.rn.cjs.js

following the steps above from Andrew, in vscode I was able to remove the warning.

1. copy "AsyncStorage"
2. cmd + shift + f - then paste "AsyncStorage" into search
3. click three dots under search '...'
4. right click node_modules folder select 'copy path'
5. add path to 'files to include' in vscode search
6. find one example of the import or require statement for the original (incorrect) AsyncStorage, copy that. Paste it into the search, replacing the first search query.

Once all the imports are found install the AsyncStorage correctly for the new version (as mentioned above), also add to pods, then go through and replace all

require('react-native').AsyncStorage; => require('@react-native-community/async-storage').AsyncStorage;

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

I did a clean build with xcode, Then all was good to go, no more warning :-)

Illhumored

This won’t permanently solve the problem. It is only a temporary fix. The issue with this is that when you reinstall your node_modules or your pods you will have to perform the above steps again. – Kummerbund

There is definitely an issue with Firebase (Firebase Auth, in particular). I got the warning to go away by digging into the Firebase code and replacing the imports as described above. But when I did, local persistence of auth data no longer worked. So I ended up putting everything back the way it was and just suppressing the warning. It doesn't feel ideal, but at least everything in the Firebase Auth works as expected. – Pourboire

Answer 5

I have been annoyed by this similar issue and here is my warning message. I simply solved it by:

• go to: 'node_modules/react-native/index.js'
• simply comment out all the lines that contains 'AsyncStorage'
• Then it was working fine for me.

Gabrielson

Thank you! That is literally all I wanted lol – Hydromagnetics

Answer 6

if you're using npm

npm install @react-native-async-storage/async-storage

yarn

yarn add @react-native-async-storage/async-storage

Sherrill

Answer 7

Credits to @Rory for the below steps:

Note: We need to find var reactNative = require('react-native') in node_modules

Note: If you don't want to do the following steps, just navigate to node_modules/@firebase/auth/dist/rn/index.js

1. cmd + shift + f - then paste var reactNative = require('react-native') into search

2. click three dots under search '...'

3. right click node_modules folder select copy path

4. add path to files to include in vscode search

Then in index.js where we find our search, do the following replacements:

// var reactNative = require('react-native');
var AsyncStorage = require('@react-native-async-storage/async-storage');

// and further below

// var reactNativeLocalPersistence = getReactNativePersistence(reactNative.AsyncStorage);
var reactNativeLocalPersistence = getReactNativePersistence(AsyncStorage);

Refresh and the warning is gone!

Feil

Answer 8

YellowBox has been replaced with LogBox. You can use LogBox.ignoreLogs() instead to suppress the warning

Vogue

Answer 9

In my case firebase using asyn storage from react native . I am using v8 firebase which has no getReactNativePersistence.

So I had this solution which may be helpful.

Keep below code snippet in one file ignoreWarning.js and import in App.js on top of file .

import { LogBox } from "react-native";

const ignoreWarns = [
    "AsyncStorage has been extracted from react-native",
];

const warn = console.warn;

console.warn = (...arg) => {

    for (const warning of ignoreWarns) {
        if (arg[0].startsWith(warning)) {
            return;
        }
    }
    warn(...arg);
};

LogBox.ignoreLogs(ignoreWarns);

Hydrocellulose

Answer 10

It's working, I can try it.

// With npm:

npm install @react-native-async-storage/async-storage

// With Yarn:

yarn add @react-native-async-storage/async-storage

// With Expo CLI:

npx expo install @react-native-async-storage/async-storage

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

await AsyncStorage.setItem('@storage_Key', value);
await AsyncStorage.getItem('@storage_Key');

https://react-native-async-storage.github.io/async-storage/docs/usage/

Tearle

Answer 11

I solved with replace storage from redux-persist to @react-native-async-storage/async-storage

Step 1 : install @react-native-async-storage/async-storage with expo

step 2 : update import

// Before:
import storage from 'redux-persist/lib/storage';
// After:
import AsyncStorage from '@react-native-async-storage/async-storage';

step 3 : update persistConfig.

const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
   blacklist: [],
};

Pohai