Best Data Storage Option for React Native Apps.
Tags: reactnative, android, showdev, ios
Published: 2020-03-18 05:39:34

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.

```jsx
	  await AsyncStorage.setItem(key, value);
```


And retrieve it later by: 

```jsx
	  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.

```jsx
	  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:

```jsx
	  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](https://github.com/FidMe/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](https://github.com/ammarahm-ed/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](https://github.com/FidMe/react-native-fast-storage) but is more flexible and supports multiple data types.

Under the hood, on Android and iOS it uses [MMKV](https://github.com/Tencent/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:
```jsx
	import MMKV from "react-native-mmkv-storage;
```

### `MMKV.setString(key,value)`
Sets a string value in storage for the given key.
```jsx
await MMKV.setString('myString','helloworld');
```
### `MMKV.getString(key)`
Gets a string value for a given key.
```jsx
let myString = await MMKV.getString('myString');
```
### `MMKV.setMap(key,value)`
Sets an object to storage for the given key.
```jsx
let myObject = {foo:"foo",bar:"bar"};

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

### `MMKV.getMap(key)`
Gets an object from storage.

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

### `MMKV.setArray(key,value)`
Sets an array to storage for the given key.
```jsx
let myArray = ["foo", "bar"]

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

### `MMKV.getArray(key)`
Sets an array to storage for the given key.
```jsx
let myArray = await MMKV.getArray('myArray');
```


### `MMKV.getMultipleItems([keys])`
Retrieve multiple Objects for a given array of keys. 

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

### `MMKV.hasKey(key)`
Check if a key exists in the storage.

```jsx
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.
```jsx
await MMKV.removeItem(key);
```


### `MMKV.clearStore()`
Clear the storage.

```jsx
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](https://github.com/ammarahm-ed/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](https://github.com/ammarahm-ed/react-native-mmkv-storage/issues/1) open at the repo where you can put your valuable suggestions. 

I am working on a really amazing [private notes app](https://notesnook.com) that uses this library on Android and iOS.

**Love to you and Stay Safe ❤️**

{% github ammarahm-ed/react-native-mmkv-storage %}