Skip to main content

[React Native 11] AsyncStorage and Realm DB for In-App Database Tutorial

· 2 min read
Kobkrit Viriyayudhakorn
Kobkrit Viriyayudhakorn
CEO, iApp Technology

1

We are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and Realm Database (Like CoreData, SQLite in both iOS and Android).

Lecture Note​

AsyncStorage​

When you are develop the app, at one point, you will need to store information permanently for an application (it does not gone after the forced close and re-open). For faster loading time, Line app use a local database to remember all of your conversations. For caching propose, Facebook app use a local database to record all of the previously loaded news feed.

React Native AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android,React Native AsyncStorage will use either RocksDB or SQLite based on what is available.

To use AsyncStorage, you don’t need to installation any extra library. It comes with React Native by default. AsyncStorage uses key-value pairs so to save data, as show in the following example.

import { AsyncStorage } from 'react-native';  
AsyncStorage.setItem('myKey', myValue);

To loaded the saved data, you can do like this…

AsyncStorage.getItem('myKey').then((myValue) => {  
  this.setState({'myKey':myValue});  
});

Since loading data is a time consuming task, It is designed to be a asynchronous operation. So getItem returned the promise, which will invoke the call back function when the read operation is completed.

More information, please see on Slide. TK We are adding soon.