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

Issue

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,
}

Solution

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/

——

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.

Answered By - Andrew

Answer Checked By - Mary Flores (PHPFixing Volunteer)