Saving objects using AsyncStorage

I’m developing a rate conversion APP for travellers like me, and I faced the problem that sometimes when you travel you don’t have internet access, so it is good to have the latest rate stored in your APP. React Native has a fantastic API, and of course, it manages local storage pretty well, it does it through AsyncStorage with two simple methods setItem and getItem.

The use of these two methods is pretty straightforward, to save something you define a key and a value, for example, if you want to save something you do this:

await AsyncStorage.setItem( "mykey", "myValue")

Pretty simple, right? And now if we want to get it back we just use getItem like this:

await AsyncStorage.getItem("mykey")

Storing objects, not just plain text

It is effortless if you want to store plain information, in my case I started storing only daily currency rates, then I tried to store more information like date, currency rate, and a general description. Now I needed this new data structure data stored locally into my app, so my users can access to a history of expenses without having internet available.

My final structure was something like this:

const product = { ‘date’ : ‘10/02/2018’ , ‘currencyRate’:’300’ , ’description’: ‘White T-shirt’ }

The constant “product” is an object, not plain text, and because I’ll have multiple of these products stored in my local storage, that means that I’ll need operations like add, delete, filter, etc. So, I’ll need to handle this as an array, since it is not supported by the API I’ll have to use some parsing tricks before setting new data to my local storage.

1. I have to define the product I want to store

const productToBeSaved = { ‘item’ : this.state.productDescription , ‘currencyRate’ : this.state.currencyRate , ‘date’ : this.state.date }

2. Then check for the existing products

const existingProducts = await AsyncStorage.getItem(‘products’)

3. Then I have to check if there are products in local storage if there are no products I have initialize the new product as an empty array.

Notice that I am using JSON.parse method to parse this string into an object, I am doing this because I have to perform a push operation over this array.

let newProduct = JSON.parse(existingProducts);
if( !newProduct ){
 newProduct = []
 }

4. Then push productToBeSaved to the new product array

newProduct.push( productToBeSaved )

5. Finally, I have to save my product again, but notice that I have to convert this to a string before I save it using AsyncStorage.setItem, to do that I am going to use JSON.stringify method like this:

await AsyncStorage.setItem(‘products’, JSON.stringify(newProduct) )
 .then( ()=>{
 console.log(‘It was saved successfully’)
 } )
 .catch( ()=>{
 console.log(‘There was an error saving the product’)
 } )

And that is it, now you can store objects using local storage in your users’ phone through AsyncStorage.

About handling currency in React Native

You can just use Int.NumberFormat or you can explore currency-formatter.

Links:
About Async/Await