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);

And retrieve it later by:

      let value = await AsyncStorage.getItem(key);

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);

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'}; 

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;

MMKV.setString(key,value)

Sets a string value in storage for the given key.

await MMKV.setString('myString','helloworld');

MMKV.getString(key)

Gets a string value for a given key.

let myString = await MMKV.getString('myString');

MMKV.setMap(key,value)

Sets an object to storage for the given key.

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

await MMKV.setMap('myobject', myObject );

MMKV.getMap(key)

Gets an object from storage.

let myObject = await MMKV.getMap('myobject');

MMKV.setArray(key,value)

Sets an array to storage for the given key.

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

await MMKV.setArray('myArray', myArray);

MMKV.getArray(key)

Sets an array to storage for the given key.

let myArray = await MMKV.getArray('myArray');

MMKV.getMultipleItems([keys])

Retrieve multiple Objects for a given array of keys.

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

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.
}
})

MMKV.removeItem(key)

Remove an item for a given key.

await MMKV.removeItem(key);

MMKV.clearStore()

Clear the storage.

await MMKV.clearStore();

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 ❤️