Saving data in local databases with AsyncStorage & React Native

In this tutorial, we'll learn how to use AsyncStorage in React Native to save data in a database.

After creating and styling our list of data using the FlastList component and added two buttons for opening URLs with web browsers and saving article meta-data locally for reading later. Let’s see how to implement the functionality of the Read later button using the AsyncStorage module in React Native.

AsyncStorage is an asynchronous, unencrypted, persistent, key-value storage system for React Native that should be used instead of LocalStorage because it makes use of efficient data storage mechanisms such as files and database systems (SQLite).

On iOS, AsyncStorage stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage makes use of SQLite or RocksDB.

Head over to your terminal, make sure you are inside your React Native project and run the following command:

$ npm install @react-native-community/async-storage --save

You need to run the run-android (or run-ios) again, after installing async-storage:

$ react-native run-android

Next, open the App.js file and import AsyncStorage as follows:

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

Next, add the following method:

const saveArticle = async (key, value) =>{
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.log(e);
  }
};

At this point, before we implement the UI for displaying the bookmarks, we can make sure the values are properly stored in our local database using the following method:

const getAllData = () =>{
  AsyncStorage.getAllKeys().then((keys) => {
    return AsyncStorage.multiGet(keys)
      .then((result) => {
        console.log(result);
      }).catch((e) =>{
        console.log(e);
      });
  });
}

You simply need to call it from the saveArticle() method as follows:

const saveArticle = async (key, value) =>{
  try {
    await AsyncStorage.setItem(key, value);
    getAllData();
  } catch (e) {
    console.log(e);
  }
};

You also need to run the react-native log-android or react-native log-ios command to see the output of console.log() method in your terminal.

Next, now all you need to do is calling the saveArticle() method when pressing the Read later button. In your ArticleItem component, change the onPress prop of the second IconButton component as follows:

const ArticleItem = ({article}) => {
  const { title, description, url, urlToImage } = article;
  return (
    <View style = { styles.articleContainer }>
      <Image style={ styles.articleImage } source={{ uri: urlToImage }} />
      <Text style= { styles.articleTitle }>
        { title }
      </Text>
      <Text style = { styles.articleDescription }>
        { description }
      </Text>
      <View style = { styles.articleBtns}>
      <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { readIcon } onPress = { () => { console.log("Button pressed!")} } title = "Open" />
      <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { bookmarkIcon } onPress = { () => { saveArticle(title, url); } } title = "Read later" />
      </View>
    </View>
  )
}

When the read later button is pressed, we call the saveArticle() method with the title as key and URL as value.

We’ll see in a next part how to create a component for displaying the bookmarked articles using the AsyncStorage.getAllKeys() and AsyncStorage.multiGet() methods.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status