React Native : Async Storage, Goal tracker app.

AsyncStorage is a simple, unencrypted, persistent, key-value storage system that is global to the app.
It’s simple because at its foundation, AsyncStorage.setItem(key, value) and AsyncStorage.getItem(key) is all you need to store and retrieve an item.

It’s unencrypted, which means anyone who can access the location of where you’re saving things through AsyncStorage can view and understand the information that you’ve saved without having to bypass any safeguards (encryption).

It’s persistent, meaning that all data you save through AsyncStorage will be at the location where you saved it at until you purposely delete it through the clear(), multiRemove(), or removeItem() method or the app’s data is cleared.


Async storage uses promises. The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

In React Native, the Promise object is essentially what is returned by an async function (explained later) before the Promise is “fulfilled”. When the async function finishes executing, the Promise is “fulfilled” and the Promise object becomes the result returned from the async function.


The Promise object is useful for both storing and retrieving objects from AsyncStorage

async and await are two keywords which are commonly used with AsyncStorage. Labelling a function as async means that the function returns a Promise initially, allowing your program to perform other tasks while the function executes in the background . After the function finishes running, the Promise is then resolved to the value you are trying to store/retrieve. The await keyword is used on a Promise object to indicate that we want the Promise to be resolved before continuing to execute the async function

async storeItem(key, item) {
    try {
        //we want to wait for the Promise returned by AsyncStorage.setItem()
        //to be resolved to the actual value before returning the value
        var jsonOfItem = await AsyncStorage.setItem(key, JSON.stringify(item));
        return jsonOfItem;
    } catch (error) {
      console.log(error.message);
    }
}

the then() method is essentially a callback function which is executed after the Promise object it’s executed upon is resolved. Similarly, the catch() method contains the callback which is executed when the Promise object is rejected

this.retrieveItem(goalCategory).then((goals) => {
              //this callback is executed when your Promise is resolved
              }).catch((error) => {
              //this callback is executed when your Promise is rejected
              console.log('Promise is rejected with error: ' + error);
              });

//the functionality of the retrieveItem is shown below
async retrieveItem(key) {
    try {
      const retrievedItem =  await AsyncStorage.getItem(key);
      const item = JSON.parse(retrievedItem);
      return item;
    } catch (error) {
      console.log(error.message);
    }
    return
}

For storing an object into async storage, we need to first stringify the object and save it.

You need to stringify your array of objects before storing it into AsyncStorage. This converts your Array into a String formatted in a manner so that it can be convertible back into an array through the JSON.parse() method.

References:
https://github.com/richardzhanguw/goals-tracker-android-ios
https://medium.com/@richardzhanguw/storing-and-retrieving-objects-using-asyncstorage-in-react-native-6bb1745fdcdd