How to resolve using AsyncStorage (deprecated) warning? Using the community (correct) library

Question

I am using @react-native-community/async-storage and keep receiving this warning:

Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage

Here is my package.json:

{
  "name": "mobile_app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@aws-amplify/pushnotification": "^1.0.32",
    "@react-native-community/async-storage": "^1.6.1",
    "aws-amplify": "^1.1.32",
    "aws-amplify-react-native": "^2.1.15",
    "buffer": "^5.3.0",
    "moment": "^2.24.0",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-ble-plx": "^1.0.3",
    "react-native-calendars": "^1.208.0",
    "react-native-check-box": "^2.1.7",
    "react-native-dialog": "^5.6.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-indicators": "^0.13.0",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-modal-datetime-picker": "^7.5.0",
    "react-native-modalbox": "^1.7.1",
    "react-native-swipeable-row": "^0.8.1",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

I have deleted node_modules, and yarn.lock and reinstalled. Also, I looked through all my dependencies (as was recommended in this question: How to remove 'Warning: Async Storage has been extracted from react-native core...'?) and none of them use the deprecated async storage package.

Do you have any suggestions for how to resolve this warning?

---- Edit: I was asked how I import AsyncStorage. I only do it in one place in a file called storage-helpers:

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

set_data = async (storage_key, value) => {
    try {
        const value_to_store = JSON.stringify(value);
        return await AsyncStorage.setItem(storage_key, value_to_store);
    } catch (error) {
        console.log(error);
        return error;
    }
}

get_data = async (storage_key) => {
    console.log("Getting Data", storage_key);
    const value = await AsyncStorage.getItem(storage_key)
        .then((returned_value) => {
            const parsed = JSON.parse(returned_value);
            return parsed;
        })
        .catch((error) => {
            console.log("Get Item Error: ", error);
        })
    console.log("Finished Getting Data");
    return value;
}

clear_data = async () => {
    console.log("Clearing Persistent Storage");
    return await AsyncStorage.clear();
}

module.exports = {
    set_data,
    get_data,
    clear_data,
}

Answer 1

Make sure you're using the correct import:

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

Answer 2

seems Async Storage moved to new organization

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

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

Answer 3

Update

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

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

Usage (note the new name of the dependency):

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

Check out the documentation for installation, linking instructions, and usage.

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

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

——

Looking at your list of dependencies, the first one on your list @aws-amplify/pushnotification uses AsyncStorage from react-native

You can see here that it imports AsyncStorage. Below is the exact line:

import { NativeModules, DeviceEventEmitter, AsyncStorage, PushNotificationIOS, Platform, AppState } from 'react-native';

This will be why you are getting the warning, it is due to this dependency using AsyncStorage

There was an issue that had been opened by in May about this, however it has since been marked closed. You can see the issue here.

---

It seems that @aws-amplify/core also uses AsyncStorage from react-native.

You can see it being used in the RNComponents here, and in the StorageHelper here.

---

Your best course of action is to fork the repo and fix all instances of AsyncStorage to use the correct version, or open an issue.

---

It is always worth going through your dependencies carefully to see what they are actually using. Sometimes just searching what they have installed or what is on their github can be enough.

Answer 4

Get library with one of the below command

With npm:

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

With Yarn:

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

With Expo CLI:

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

Once done, import the header

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

For store a value

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

Get a Value

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

For more: offical link