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.

Conclusion

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.

Credit

Icon made by Freepik from www.flaticon.com

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

19.02.2020

This Is How I Created a Simple App Using React Routing

react-router is an amazing library. Here's how to create a simple app using ...

Create simple POS with React, Node and MongoDB #3: setup E-mail pipeline with add activate on SignUp

This is the third chapter of our series of developing a POS with React, Node, and MongoDB. In this chapter, we are going to set up an email ...

Conditional Rendering Methods in React

JSX makes it possible to reuse the conditionals you are already familiar with when working with ...

3 comments

Nikita Bragin January 1, 2020 at 11:57 pm
0

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

 
Krissanawat Kaewsanmuang January 2, 2020 at 7:15 am
0

 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
0

 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