AsyncStorage.

AsyncStorage is React Native’s API for storing data in form of key-value pair without using any cloud services. For data manipulation AsyncStorage has methods that are similar to LocalStorage in React.

• setItem(), getItem(), clear(), removeItem(), getAllKeys()

Unlike LocalStorage, AsyncStorage is asynchronous so it always returns a Promise object. In this blog I am going to show how to use AsyncStorage and how to retrieve the data from Promise object.

Let’s imagine we have a simple React Native App (to do list) that render some data from the state and we can modify that data.

App.js
import React, {useState} from 'react';
import {Text, View} from 'react-native';
export default function App(){   
 const [toDoList, updateToDoList] = useState([
    {key: 1, title: "Monday", toDo: "shopping, cooking"},
    {key: 2, title: "Tuesday", toDo: "business meeting"},
    {key: 3, title: "Wednesday", toDo: "paying bills, visiting 
     family"}
 ])
let editHandler = () => {
   ...some code for updating item...
}
return(
    <View>
       {toDoList.map(item => {
          return <Text key={item.key} onPress={editHandler}>
                      {item.title} : {item.toDo}
                 </Text>                
       })}
)}

Our goal is to modify the code, so the updated data can be stored in AsyncStorage and could be taken from it.

1. First step that we need to take is to install the AsyncStorage module.
2. npm install -S @react-native-community/async-storage

-Sflag (witch is the same as --save) indicates that package will appear in your dependencies (updates in your package.json)

2. Import the module.

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

3. Import useEffect hook.

import React, {useState, useEffect} from 'react';

If you are not familiar with UseEffect hook I am giving a quick explanation of it. If UseEffect has 2 arguments (the first arg is what to run and the second arg is an empty array []). This way it is going to work as ComponentDidMount() in React and run the code provided in the first argument only on initial component rendering. So with UseEffect we can get the data from AsyncStorage on initial rendering.

useEffect(() => {getData()}, [])

GetData method is going to check if there is a storedToDoList in AsyncStorage. If so the state will be updated.

let getData = async () =>  {
  let keys = await AsyncStorage.getAllKeys()
  if (keys.includes('storedToDoList')){
     await AsyncStorage.getItem('storedToDoList')
     .then(data => JSON.parse(data))
     .then(data => {updateToDoList(data)
     })
  }
}

4. I am going to use UseEffect one more time. At this time 1st argument is setItem() (what to run), 2nd argument is toDoList (when to run). Every time editHandler() function is invoked and toDoList is changed, AsyncStorage will be updated with new toDoList.

 useEffect(() => {
   AsyncStorage.setItem("storedToDoList", JSON.stringify(toDoList))
   }, [toDoList]
 )

The completed code:

App.js
import React, {useState, useEffect} from 'react';
import {Text, View} from 'react-native';
export default function App(){   
 const [toDoList, updateToDoList] = useState([
    {key: 1, title: "Monday", toDo: "shopping, cooking"},
    {key: 2, title: "Tuesday", toDo: "business meeting"},
    {key: 3, title: "Wednesday", toDo: "paying bills, visiting 
     family"}
 ])
useEffect(() => {getData()}, [])
useEffect(() => {
   AsyncStorage.setItem("storedToDoList", JSON.stringify(toDoList))
   }, [toDoList]
 )
let editHandler = () => {
   ...some code for updating item...
}
let getData = async () =>  {
  let keys = await AsyncStorage.getAllKeys()
  if (keys.includes('storedToDoList')){
     await AsyncStorage.getItem('storedToDoList')
     .then(data => JSON.parse(data))
     .then(data => {updateToDoList(data)
     })
  }
}
return(
    <View>
       {toDoList.map(item => {
          return <Text key={item.key} onPress={editHandler}>
                      {item.title} : {item.toDo}
                 </Text>                
       })}
    </View>
)
}

It is good to know the limitation of an AsyncStorage on Android. By default the size of the storage is set to 6MB . There is a way to increase the size if needed. Go to your project, open android/gradle.properties file and add the following line: AsyncStorage_dB_size_inMB=10