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 ❤️
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
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)
Thank you for creating this! Amazing work and effort we really needed this solution 🙏💙
Very cool stuff!
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!
Hi! New developer here. Is this library persistent across closing and reopening the app?
I think the best option is react native async storage. github.com/react-native-async-stor...
Is like local storage.
It's slow
Yes it is across closing and reopening the app
Hi I get this error _reactNativeMmkvStorage.default.setString is not a function
The dependency is it compatible with Expo?
No Expo