Noteworthy Storage Options for React Native Apps!

You’re developing a phenomenal mobile app using the popular framework React Native! Sounds great! But have you devised a strategy for how to store, retrieve, and maintain data generated by your application? Well, data storage and management are crucial aspects of a mobile app that you need to consider during the app development process itself. And the fact that different features of a mobile app require different data storage mechanisms makes things complicated. To maintain an app’s spontaneity, you need to employ various storage methodologies as per the need. Some examples are offline storage, encrypted storage, auto-sync storage, service-oriented storage, and so on. Choosing the right data storage option is not that easy, and you are likely to get confused due to the availability of several options.

This article focuses on the various methods that you can use for storing your React Native application data. You’ll know the different React Native storage options and understand which option is perfect for your use case. 

React Native Data Storage Options

Async Storage

Async Storage is an asynchronous and persistent React Native storage option that enables data storage in the key-value pair format. This data storage system is offered by the React Native framework itself and is present in the RN documentation. You can access this globally on a React Native application. Async Storage allows developers to store small data chunks on users’ devices. And, as it’s built on top of the device’s native storage system, it is optimized for performance and reliability. You can store different types of data, including session data, user preferences, cached data, and authentication tokens.

Async Storage comes with an easy-going and intuitive API that enables you to store, delete, and also retrieve data effortlessly. The API supports asynchronous operations, so the app’s UI thread doesn’t get blocked. This leads to a smooth UX.

How To Store Data Using Async Storage

Step #1 

To implement Async Storage, React Native developers have to install the package named @react-native-async-storage/async-storage. Run this command in your project directory to install the AsyncStorage package: npm install @react-native-async-storage/async-storage

Step #2 

Next, import the packageAsyncStorage in your code from @react-native-async-storage/async-storage;

Step #3 

You can use APIs for carrying out different operations like setItem, getItem, getAllKeys, removeItem, clear, etc.

Take a look at a few examples of how the AsyncStorage API is used to store, delete, or retrieve data:

 Storing Data

try {

   await AsyncStorage.setItem('@MyApp:key', 'value');

} catch (error) {

   console.log(error);

}

Retrieving Data

try {

   const value = await AsyncStorage.getItem('@MyApp:key');

   if (value !== null) {

     console.log(value);

   }

} catch (error) {

   console.log(error);

}

Removing Data

try {

   await AsyncStorage.removeItem('@MyApp:key');

} catch (error) {

   console.log(error);

}

In the aforementioned examples, setItem has been used for storing a string value under the key named @MyApp:key. We’ve used getItem for retrieving the key’s value. We used removeItem to delete the key-value pair. Every asynchronous method returns a promise object, and hence, we’ve used await so that the operation completes before continuing.

You can also use other methods like getAllkeys that will allow you to obtain all the keys that are there in the storage, and clear will help you to clear all data present in the storage. 

Downsides

Async Storage comes with certain limitations. This platform is unencrypted and supports string values only. You need to create your synchronization classes and data backup mechanism if using Async Storage. Also, Async Storage is not a viable option for storing huge data chunks. Storing heavy data may lead to performance issues, and the app might slow down. So, if you wish to store large data files, you can consider other React Native storage options like Realm, SQLite, etc.  

MMKV Storage

This is a performance-oriented key-value storage framework for the iOS and Android operating systems. WeChat has developed MMKV storage and optimized it for efficiency and speed. It’s one of the aptest React Native storage options. Here are the reasons! 

MMKV is available for both iOS and Android platforms, making it suitable for cross-platform React Native applications. It offers quick and direct bindings to the native C++ library, and you can access it using a simple JavaScript API. Designed to be speedy, it comes with a write/read speed that’s quicker than SQLite and Async Storage. MMKV’s footprint is small, and it requires minimal overhead. So, it is one of the best options for use in resource-constrained environments. 

React Native apps require a data storage mechanism that will persist across application restarts or device reboots. This data can be anything like session data, user preferences, cached data, etc. MMKV supports multiple types of data. It also supports encryption leading to secure storage. MMKV storage supports multiple instances; this enables the separation of the user’s data and global data. Moreover, it offers stability and reliability and focuses on preventing the loss and corruption of data. The MMKV library allows you to store and retrieve data using a simple API. You can directly set maps, arrays, and strings; and retrieve them. MMKV syncs memory with a file using mmap and encodes or decodes values using protobuf. Furthermore, it’s easy to use as you don’t need any configurations, and it immediately saves every modification without needing any synchronize calls for it.

How To Use MMKV for Storing Data

Here are the key steps and commands you need to follow to install the MMKV storage in a React Native application. The react-native-mmkv-storage library is available on npm.

npm install react-native-mmkv-storage

After installation, use the following code for storing and retrieving data:

import MMKVStorage from 'react-native-mmkv-storage';

const storage = new MMKVStorage.Loader().initialize();

Store Data

await storage.set('myKey', 'myValue');

Retrieve Data

const value = await storage.get('myKey');

SQLite

This is a relational database that allows you to store data in a structured way and perform complex queries. It’s lightweight and easy to use. It is one of those databases for React Native that comes with a sound balance of performance and features. SQLite is one of the most viable React Native storage options to consider for storing large chunks of data like user-generated content.  

How To Use SQLite in React Native Apps

Step #1

Employ the react-native-sqlite-storage library that is specifically designed for React Native apps. The library offers a simple API that interacts with SQLite databases. Install react-native-sqlite-storage library using yarn or npm. Use any of the below-mentioned codes (Java) for installation.

npm install --save react-native-sqlite-storage

OR

yarn add react-native-sqlite-storage

Step #2

After installing the library, use the library to create a new database and tables. You can also insert data and perform queries. Take a look at an example of how to create a new database and insert data using the react-native-sqlite-storage library. Use the following JavaScript code.

import SQLite from react-native-sqlite-storage;

Open a Database

const db = SQLite.openDatabase({name: 'mydb.db', location: 'default'}); 

Create a Table

db.transaction((tx) => {

   tx.executeSql(

     'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, quantity INTEGER)',

     [],

     () => {

       console.log('Table created successfully');

     },

     (error) => {

       console.log('Error creating table: ' + error.message);

     },

   );

});

Insert Data into the Table

db.transaction((tx) => {

   tx.executeSql(

     'INSERT INTO items (name, quantity) VALUES (?, ?)',

     ['Apples', 10],

     () => {

       console.log('Data inserted successfully');

     },

     (error) => {

       console.log('Error inserting data: ' + error.message);

     },

   );

});

The aforementioned example is a basic one. You can also use the react-native-sqlite-storage library for carrying out more advanced queries and operations. Remember that since SQLite is a relational database, you will have to design your queries and tables accordingly. 

Realm

This is a cross-platform mobile database solution that you can use to store React Native application data. Realm is effective and speedy. It provides a simple and effective way of storing and retrieving data. It comes with a simple API that enables you to store and query data. This is one of the best React Native storage options for applications that involve real-time synchronization between various devices. 

Realm is available on Android as well as iOS, so it becomes easier to use it with cross-platform apps like React Native. It has a reactive architecture. Hence, an application can automatically update its UI when data is modified. Realm utilizes memory mapping technology for providing speedier access to data as compared to several other traditional databases that depend on file I/O. Its support for offline data storage and synchronization; comes in handy to address connectivity issues in mobile apps. 

How To Use Realm in React Native Apps

Install the realm package from npm and import it to your React Native app development project. Then create a new Realm instance and use it for storing and retrieving data.

This is how you can create a new Realm instance in React Native development.

import Realm from realm;

const realm = new Realm({

   schema: [{ name: 'Person', properties: { name: 'string' } }],

});

 

realm.write(() => {

   realm.create('Person', { name: 'John' });

});

 

const people = realm.objects('Person');

 

console.log(people);

In the aforesaid example, we have created a new Realm instance using a schema that defines a Person object with a name property. Thereafter, we wrote a new object to the database using the method write(). We retrieved all the Person objects using the method objects(). Lastly, we logged the array of Person objects to the console.

Firebase Realtime Database

This is a cloud-hosted database that facilitates real-time data synchronization between devices. You can store data and sync this data across multiple clients. Firebase offers a simple API that enables you to store and query data. This is one of the most popular React Native storage options for applications that involve real-time synchronization between various devices and supports offline access to data. 

How To Use Firebase Realtime Database

Install the Firebase SDK and configure a project in the Firebase console. Then, use the Realtime Database API in your React Native application. Check out the steps you need to follow for getting started. 

Step #1

To start with, install the Firebase SDK in your React Native project using npm.

npm install firebase

Step #2

Now, initialize Firebase in your React Native app. For this, you need to create a new Firebase app and configure it with the credentials of your Firebase project. Carry out this step in a separate file named firebase.js:

import firebase from firebase; 

const firebaseConfig = {

   // your Firebase project config goes here };

firebase.initializeApp(firebaseConfig);

export default firebase;

Step #3

After initializing Firebase in your app, begin to use the Realtime Database API for reading and writing data. For instance, you can use the set() method for writing data to the database. Use the following JavaScript code to execute the process.

import firebase from './firebase';

Write Data to the Database

firebase.database().ref('users/1').set({

   name: 'John Doe',

   email: 'johndoe@example.com',

});

Step #4

Use the method on() for reading data from the database and listening for any modifications to a specific data path. Use this JS code.
 import firebase from './firebase';

Listen for Changes to a Particular Data Path

firebase.database().ref('users/1').on('value', (snapshot) => {

   const user = snapshot.val();

   console.log(user);

});

Besides this basic example, you can also use other methods for using Firebase Realtime in React Native apps. Go through Firebase’s documentation to explore the other features and methods available in the API.

The aforementioned React Native storage options are the most popular among developers. Each one of these options is best suited to particular React Native app use cases.