DEV Community

Cover image for Best Data Storage Option for React Native Apps.
Ammar Ahmed
Ammar Ahmed

Posted on • Edited on

Best Data Storage Option for React Native Apps.

If you are creating even a simple todo app in React Native you will come across the problem of storing data to be retrieved later. The first and simplest option that comes to mind is AsyncStorage which is maintained by the React Native community. So using AsyncStorage you can set data as a string value.

      await AsyncStorage.setItem(key, value);
Enter fullscreen mode Exit fullscreen mode

And retrieve it later by:

      let value = await AsyncStorage.getItem(key);
Enter fullscreen mode Exit fullscreen mode

This is the case if you need to store simple string values but let's say you wanted to store complex objects or arrays then you would need to JSON.stringify(object) and then store it in the storage.

      let object = {foo:'foo', bar:'bar'};
      object = JSON.stringify(object);
      await AsyncStorage.setItem('myObject',object);
Enter fullscreen mode Exit fullscreen mode

And when you need to retrieve it back you have call JSON.parse() on the data:

      let object = await AsyncStorage.setItem('myObject');
      object = JSON.parse(object); // {foo:'foo', bar:'bar'}; 
Enter fullscreen mode Exit fullscreen mode

There must be a simpler way to do it right? why can't I just set an object directly to storage or an array, a boolean, or even an int value? So the question came to my mind that is that it? Isn't there a simple solution to this?

After some time of using AsyncStorage I needed a better solution. One that was as simple as AsyncStorage and faster. So I came across react-native-fast-storage which is a fast solution for storing data however it only allows you to set Strings to storage similar to AsyncStorage.

The problem with these solutions was that you had to push everything through JSON.stringify() and I did not want to do that anymore so finally I created a solution that is simple, fast and flexible.

react-native-mmkv-storage

Meet react-native-mmkv-storage, a simple, performance oriented key value storage for react native that supports maps, strings and arrays to be set directly & retrieved. It is basically based on react-native-fast-storage but is more flexible and supports multiple data types.

Under the hood, on Android and iOS it uses MMKV storage which as some attractive features:

Efficient: MMKV uses mmap to keep memory synced with file, and protobuf to encode/decode values, making the most of iOS/macOS to achieve best performance.

Easy-to-use: You can use MMKV as you go, no configurations needed. All changes are saved immediately, no synchronize calls needed.

Small: A handful of files: MMKV contains encode/decode helpers and mmap logics and nothing more. It's really tidy.
Less than 30K in binary size: MMKV adds less than 30K per architecture on App size, and much less when zipped (ipa).

Getting Started

The library is published on NPM so you can add it to your project as follows:

$ npm install react-native-mmkv-storage --save

or

$ yarn add react-native-mmkv-storage

API

I have kept everything as simple as possible, typescript definitions & JsDocs are added too.

So first after installing simply import the library:

    import MMKV from "react-native-mmkv-storage;
Enter fullscreen mode Exit fullscreen mode

MMKV.setString(key,value)

Sets a string value in storage for the given key.

await MMKV.setString('myString','helloworld');
Enter fullscreen mode Exit fullscreen mode

MMKV.getString(key)

Gets a string value for a given key.

let myString = await MMKV.getString('myString');
Enter fullscreen mode Exit fullscreen mode

MMKV.setMap(key,value)

Sets an object to storage for the given key.

let myObject = {foo:"foo",bar:"bar"};

await MMKV.setMap('myobject', myObject );
Enter fullscreen mode Exit fullscreen mode

MMKV.getMap(key)

Gets an object from storage.

let myObject = await MMKV.getMap('myobject');
Enter fullscreen mode Exit fullscreen mode

MMKV.setArray(key,value)

Sets an array to storage for the given key.

let myArray = ["foo", "bar"]

await MMKV.setArray('myArray', myArray);
Enter fullscreen mode Exit fullscreen mode

MMKV.getArray(key)

Sets an array to storage for the given key.

let myArray = await MMKV.getArray('myArray');
Enter fullscreen mode Exit fullscreen mode

MMKV.getMultipleItems([keys])

Retrieve multiple Objects for a given array of keys.

let multipleItems = await MMKV.getMultipleItems(["foo","bar","loo"]);
Enter fullscreen mode Exit fullscreen mode

MMKV.hasKey(key)

Check if a key exists in the storage.

MMKV.hasKey(key).then(result => {
if (result) {
    // if true do this.
} else {
    // if false do this.
}
})
Enter fullscreen mode Exit fullscreen mode

MMKV.removeItem(key)

Remove an item for a given key.

await MMKV.removeItem(key);
Enter fullscreen mode Exit fullscreen mode

MMKV.clearStore()

Clear the storage.

await MMKV.clearStore();
Enter fullscreen mode Exit fullscreen mode

Final Note

The great thing about MMKV is that its very simple and easy to use. Also it is very fast, so I am thinking of maintaining this library here in long term which means if you are using it you don't have to worry because I will be fixing things on the way. So here is the list of things that need to be implemented if someone is interested in contributing.

  • Support to set int and boolean data types (Coming Soon)
  • Encryption (AES-256)
  • Multiple instances of database, for example, an encrypted instance with everything important and a normal one such as app settings or something that you are storing.
  • Add some hacky optimizations to give further performance boost.

Anything is possible, we just need to keep trying. If you like what I have made, support me by joining stargazers for react-native-mmkv-storage and give me a follow.

And I am always open to ideas so if you have one, there is an issue open at the repo where you can put your valuable suggestions.

I am working on a really amazing private notes app that uses this library on Android and iOS.

Love to you and Stay Safe ❤️

GitHub logo ammarahm-ed / react-native-mmkv-storage

An ultra fast (0.0002s read/write), small & encrypted mobile key-value storage framework for React Native written in C++ using JSI

react-native-mmkv-storage

License: MIT Android iOS

An efficient, small & encrypted mobile key-value storage framework for React Native written in C++ using JSI

What it is

This library aims to provide a fast & reliable solution for you data storage needs in react-native apps. It uses MMKV by Tencent under the hood on Android and iOS both that is used by their WeChat app(more than 1 Billion users). Unlike other storage solutions for React Native, this library lets you store any kind of data type, in any number of database instances, with or without encryption in a very fast and efficient way. Read about it on this blog post I wrote on dev.to

Features

  • Written in C++ using JSI Starting from v0.5.0 the library has been rewritten in C++ on Android and iOS both. It employs React Native JSI making it the fastest storage option for React Native.
  • Simple and lightweight (~ 50K Android/30K iOS)…

Top comments (9)

Collapse
 
kashmiry profile image
Kash

Thank you for creating this! Amazing work and effort we really needed this solution 🙏💙

Collapse
 
danondso profile image
Dublin Anondson

Very cool stuff!

Collapse
 
thecodrr profile image
Abdullah Atta

Wonderful. I have been looking for a fast and reliable storage option on react-native for sometime. This has a lot of potential! Thanks for sharing! Keep it up!

Collapse
 
reaganshirk profile image
Reagan Shirk

Hi! New developer here. Is this library persistent across closing and reopening the app?

Collapse
 
richicodes profile image
richi.codes

I think the best option is react native async storage. github.com/react-native-async-stor...

Is like local storage.

Collapse
 
ammarahmed profile image
Ammar Ahmed

It's slow

Collapse
 
ammarahmed profile image
Ammar Ahmed

Yes it is across closing and reopening the app

Collapse
 
webuijorgegl profile image
Jorge Suarez

Hi I get this error _reactNativeMmkvStorage.default.setString is not a function

The dependency is it compatible with Expo?

Collapse
 
truongnguyen012 profile image
TruongNguyen012

No Expo