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.
The simplest mechanism that React Native provides us to persistent app data on the device is the
AsyncStorage API. According to the documentation:
AsyncStorageis a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app.
Let’s break down these properties:
AsyncStorageis a basic key-value store, which provides two basic methods (
- Unencrypted: it’s not a place to store sensitive data, plain and simple.
- Asynchronous: the methods in
AsyncStorageAPI return a
- Persistent: data stored in
AsyncStoragewill 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
removeItemmethod). 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
AsyncStoragedirectly 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 because
setItem 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
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:
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).
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
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.
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.