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

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

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

Supress the warning.

You can supress the YellowBox warning by using the following

import {YellowBox} from 'react-native';

Then you can add the following

YellowBox.ignoreWarnings(['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 YellowBox 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/

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

Credits to @Rory for the below steps:

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

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-community/async-storage');

// and further below

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

Refresh and the warning is gone!

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