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.

try-catch-flow

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);
}
};
coma

Conclusion:

In this article, we covered all the basic methods of using AsyncStorage API in React Native application. Make sure you know when to use AsyncStorage in your application as AsyncStorage is not secure for sensitive data.

It simply saves data on the phones’ hard drive, therefore anyone with access to the phone’s document file system can read the data stored using AsyncStorage. For more information, you can go through this. AsyncStorage is the best and easy way to store non-sensitive data which runs across the application or to store redux state.

Sayali

Tech Expert
Sayali is a React Native Developer with around 1 year of experience in developing mobile applications. She is familiar with writing blogs for the last 2 years. She is self-motivated, a fast learner, and result oriented. She loves to write blogs on technical issues faced by developers in day to day work and help them through her blogs.

The founder's survey report on "What Matters For Startup" is released - Get your copy and learn the trends of successful companies :)

Download Free eBook Now!

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

"Mindbowser was very helpful with explaining the development process and started quickly on the project."

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

"The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs."

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

"They're very tech-savvy, yet humble."

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

"Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier"

author
Katie Taylor
Founder, Child Life On Call
coma

“As a founder of a budding start up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity."

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give