React Native AsyncStorage Example: When I Die App

React Native AsyncStorage Example: When I Die App

React Native AsyncStorage Example: When I Die App

AsyncStorage is the persistent storage in React native that is based on key-value pair storage. It is commonly used when we want to store some basic data like app settings. All values in AsyncStorage are stored as plain text since it does not support any other data type. In this post, we will learn the basics of using AsyncStorage in a React native app.

Set up on Android and iOS

We can add the async-storage package to our project using yarn.

Async-storage comes with the auto-linking feature for React native 0.60+.

For iOS using cocoapods, run:

We can now import the package to our project.

Commonly Used Methods

Here, we will discuss the four commonly used methods in AsyncStorage that follow the get and set principle.

Store Data

Get Data

Delete Individual Key

Clear All Data

First Basic Example: When I Die App

Our app follows a simple idea. It uses some random time value that is set as a react-native-countdown-component. After the countdown is started, the current time will be stored in AsyncStorage when we close the app and the componentWillUnmount event fires. When we open the app again and componentDidMount event fires, the app will retrieve the counting down time value from AsyncStorage and continue.

Initialize New Project

Using the VsCode integrated terminal, we can create a new react-native project using the following command.

To open the project, run:

Now we need to add the two required packages, async-storage and react-native-countdown-component, using yarn.

Bootstrap the App

Import the installed packages to our project file, App.js.

Define a new state for the component.

Render our component to show the countdown clock.

If we closely inspect the code inside the render function, first we set the initial time.

When the time changes, we set the state of until_death to the new value.

Next, we should store the state when the user closes the app so that when the user opens the app again the countdown continues.

The componentWillUnmount event fires when the user closes the app. We will call the storeData function when this event fires and sends the current state as a parameter.

Continue Count Down

When the user opens the app again, getData function will retrieve the stored time. If the app is opened for the first time, it will initialize a random value for until_death and set the state of the app.

When the user opens the app and the componentDidMount event fires, call the getData method to continue the countdown.

Our final app now continues the countdown from where it left off.


This post demonstrated the basics of using AsyncStorage in our app. Our current app does not continue the countdown in the background when the app closes. If you want to find out how to add this feature to our app, you can find the full source code here.


Icon made by Freepik from

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Build Real-World React Native App #9 : Implementing Remove Ads Feature

One of the simplest ways to make money from apps is through Advertisements. Hence, we have a popular ads network for mobile that is Admob. There are ...

Build Real-World React Native App #8 : implement Dark mode

In this chapter, we are going to implement a new feature in our app. The feature is called dark mode which is very prevalent in the app nowadays. The ...

How to use the redux dev tools to speed up development and debugging

Redux dev tools are development tools used to debug Redux-based applications. In this article, we'll learn more about how this tool aids the ...


Nikita Bragin January 1, 2020 at 11:57 pm

Are “componentWillMount” and “componentWillUnmount” still recommended to be used?

Krissanawat Kaewsanmuang January 2, 2020 at 7:15 am

componentWillMount is not recommend because is deprecated you can use the constructor or componentDidMount for alternative
and componentWillUnmount is a recommend for clean up like unsubscribing event handle

Nikita Bragin January 3, 2020 at 1:02 am

Thank you, it was a question from Reddit users

Sign in

Forgot password?

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy