A month of React Native: part #6

Storing config (and other) data in local storage

This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.

It’s a pretty common requirement that an app needs to store some pieces of data in the device’s local storage. This can be config data, user preferences, cached data, etc. Let’s see how we can do that in React Native.

Photo by frank mckenna on Unsplash

Introducing AsyncStorage

The simplest mechanism that React Native provides us to persistent app data on the device is the AsyncStorage API. According to the documentation:

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app.

Let’s break down these properties:

• Simple: AsyncStorage is a basic key-value store, which provides two basic methods (getItem and setItem).
• Unencrypted: it’s not a place to store sensitive data, plain and simple.
• Asynchronous: the methods inAsyncStorage API return a Promise object
• Persistent: data stored in AsyncStorage will persist across both app and device restarts, making it a good choice for storing persistent data. Any data you write to it will remain on the device until you explicitly delete it (with the removeItem method). Contrast this to state data (e.g. stored in React Context or Redux), where the data is wiped out when the app exits.
• Global: like all things global, use this power with caution and frugality. As the documentation recommends: It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage.

For those coming from the web development world, AsyncStorage will look quite familiar to localStorage — and it is :)

Storing data in AsyncStorage

Let’s say you want to store a small piece of data related to your user that won’t change ever (or at least not frequently). For example, let’s store the value that the user selected as her current city. We don’t expect this to change that often, so it’s a good candidate to store in AsyncStorage. Here’s how we do this:

What about storing more than a single value for a given key? For instance, in our app, we’d like to store the list of restaurant entries the user has saved in her list of favorites. We still use the same API method (setItem), but with a caveat: we need to call JSON.stringify() on the array of data before we pass it to setItem. That’s becausesetItem expects the value parameter to be a string. Note that we would need to do the same if we want to store any object in a given key. As you’d expect, when retrieving those values, we will need to call JSON.parse() to get the actual object we’ve stored as a string.

Retrieving data from AsyncStorage

Now that we’ve stored the data we wanted, let’s try to retrieve them from the persistent storage. The method we use for this is getItem:

Note that the getItem method will return null if no item with the given key name was found.

Deleting data from AsyncStorage

As we mentioned earlier, data in AsyncStorage will remain there until we explicitly delete it. Removing a single item for a given key is quite simple:

The AsyncStorage API provides additional methods for deletion, such as clear (nuclear option, you probably don’t want to use this) and multiRemove (for when you want to remove an array of keys in one go).

Secure storage

Finally, let’s address the issue of secure storage. The Expo toolkit provides us with a handy API that provides such a feature, called SecureStore. The way we interact with it is quite similar to AsyncStorage, with setItemAsync being the method for storing a key-value pair and getItemAsync used to retrieve the value associated with a given key. The documentation has further details on the platform-specific implementation details of the SecureStore API.

That’s it for now! That was pretty simple, wasn’t it? Next up, we’ll see how to set up our app to receive push notifications.

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

I’m Alex, a software engineer and startup geek. Currently, I’m a co-founder at a startup called AgentRisk, where I’m the VP of Product & Engineering. In a past life, I was part of the founding engineering team at an enterprise cloud storage startup in Silicon Valley, did a bunch of cool cutting-edge projects at Cisco Research, and worked on some really innovative data center network architectures while doing my Master’s at UCSD. I always enjoy learning new technologies and b̵u̵i̵l̵d̵i̵n̵g̵ shipping side-projects all the time.