AsyncStorage in React Native

Recently, I have worked on cross-platform mobile app development in React Native. In this application I used AsyncStorage for storing data in a simple key-value store which is globally available to your React Native application. In this blog, I’m going to explain what AsyncStorage is and how to use it in React Native.

What is AsyncStorage?

AsyncStorage is used to store data as a simple key-value store which is unencrypted by default. It allows you to use data in offline mode in React Native apps. As the name suggests AsyncStorage is asynchronous and unencrypted. As we all know asynchronous means concurrently running tasks. AsyncStorage only accepts and stores string data, so in order to store object data or value we need to use JSON.stringify() method while saving the data and JSON.parse() method is for parsing objects that were received as JSON string. AsyncStorage API methods return a Promise object or Error object in case of error as it is asynchronous by nature.

AsyncStorage is simple to use because AsyncStorage.setItem(key, value) and AsyncStorage.getItem(key) is all you need to store and retrieve data.

AsyncStorage is unencrypted which gives you permission to access the location of data which you have stored through AsyncStorage without any encryption.

AsyncStorage is persistent storage which will save your stored data until the app’s data is cleared or you purposely delete it using AsyncStorage.clear() or AsyncStorage.removeItem().

Installation

As per the React Native documentation, it is recommended that you should not use AsyncStorage object directly, instead use the @react-native-community/async-storage.

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

CocoaPods Installation

Auto Linking is introduced for React Native versions 0.60+ so we do not need to link the library but we have to install pods.

cd ios/ && pod install && cd ..

Import AsyncStorage in Code:

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

Using async and await for Storing Objects:

The keyword async and await can be used inside an Asynchronous block only, where await keyword blocks the execution of all the code until the promise is fulfilled and returns a result.

Note: Await only makes the async function block wait and not the execution of whole code.

const _storeData = async (value) => {
try {
//we have to wait until AsyncStorage.setItem() returns a promise
var item = await AsyncStorage.setItem(key, JSON.stringify(value));
return item;
} catch (error) {
console.log(error);
}
};

Using try{ } catch(e) { } Methods for Retrieving Objects:

Every developer like you and me finds this method confusing at the beginning but then realize that try{ } method is essentially a callback function which allows you to test a block of code for errors and catch(e) { } method handle the errors. If there are no errors then catch(e) {…} is ignored and execution is completed using try{…} method.

When storing and retrieving data objects we need these methods to occur asynchronously so that we don’t have to wait for the method to finish in order to avoid blocking of other tasks such as updating the user interface.

Note: try{…} method is executed after the promise has been resolved.

Store Item:

const _storeData = async (userId, userEmail) => {
try {
await AsyncStorage.setItem('id', JSON.stringify(userId));
await AsyncStorage.setItem('email', userEmail);
} catch (error) {
console.log(error);
}
};

_storeData is an asynchronous method which is promise-based,thus,we can use async-await along with try-catch block. AsyncStorage.setItem(‘key’, value) stores the value in storage. Here object id is converted to JSON strings using JSON.stringify() method before storing it to asyncStorage.

Retrieve Item:

const _retrieveData = async () => {
const id = JSON.parse(await AsyncStorage.getItem('id'));
const email = await AsyncStorage.getItem('email');
console.log(id, email);
};

AsyncStorage.getItem(‘key’) is use to get a string value for a given key. Here we have used JSON.parse() method to deserialize the object value which is id. You can store the value in any state using setState for further use.

Remove Item:

const _removeData = async (useName) => {
try {
await AsyncStorage.removeItem('user_name');
} catch (error) {
console.log(error);
}
};

AsyncStorage.removeItem(‘key’) is use to remove the item from storage using the key.

Merge Item:

Before we look into how merge works, let’s get clear when to use AsyncStorage.mergeItem(‘key’, value). Merge Item is useful when you assign a particular value to a key and after some changes you want to change the value for the same key. So, merge item replace existing value stored under the key with the new value.

const _mergeData = async (userName1, userName2) => {
try {
// first save the userName1 suppose it is “Tom”
await AsyncStorage.setItem('user_name', userName1);

// now merge userName2 suppose it is “Jerry”
await AsyncStorage.mergeItem('user_name', userName2);
// we have assigned userName2 for same key “user_name”
const currentUser = await AsyncStorage.getItem('user_name');
console.log('result:',currentUser);
// result:Jerry
} catch (error) {
console.log(error);
}
};

Clear:

AsyncStorage.clear() removes whole data stored in AsyncStorage. If you want to remove a particular key then use removeItem.

const _clearAll = async () => {
try {
await AsyncStorage.clear();
console.log('Done');
} catch (error) {
console.log(error);
}
};