DEV Community: Ammar Ahmed

Introducing Open Native: vendor unlock React Native

Ammar Ahmed — Wed, 09 Nov 2022 04:20:09 +0000

We all want to build apps in a way that's approachable to us, regardless of the target platform. Projects like React Native, Flutter, Capacitor, and NativeScript enable us to build native (e.g. iOS and Android) apps using alternative idioms such as JavaScript, Web tech, or platform-agnostic UI.

Each of these projects has a way to map platform APIs into their idiom (e.g. React Native has "native modules"), but none are completely mutually compatible. That is to say, a React Native native module cannot be used in a Flutter app as-is, and vice versa. This situation has led to a great amount of duplicated effort, and an isolation of communities.

Open Native to the rescue.

What is Open Native?

Open Native is the long overdue Rosetta Stone that allows native modules to be used cross-ecosystem. It handles all the necessary auto-linking, type marshalling and API-binding to allow you to choose the highest quality native module for your project, no matter what ecosystem it comes from.

For our first integration, we've enabled NativeScript to use React Native native modules exactly as documented for React Native.

How does it work?

Open Native implements just the native module API and auto-linking for a given ecosystem (e.g. React Native) without including any unnecessary core code or CLI tooling. It then exposes the native APIs in an ecosystem-agnostic manner that another framework (e.g. NativeScript) can provide a minimal adapter for.

Here's a real example using react-native-auth0.

Installation

Install both Open Native and the React Native native module of interest:

npm install --save @open-native/core react-native-auth0

Webpack configuration

Alter your NativeScript app's webpack config (see webpack-chain if this looks unfamiliar) as follows:

Mandatory: alias react-native to @open-native/core.
As required (see below): add a rule to process react-native-auth0 with metro-react-native-babel-preset via babel-loader.

webpack.chainWebpack((config) => {
  config.resolve.alias.set('react-native', '@open-native/core');

  config.module
    .rule('rnmodules')
    // For each React Native native module to be processed with Babel, add an
    // 'include' rule here that matches the filepath to its npm package.
    .include.add(/node_modules(.*[/\\])+react-native-auth0/)
    .end()
    .use('babel-loader')
    .before('ts-loader')
    .loader('babel-loader')
    .options({
      babelrc: false,
      presets: ['module:metro-react-native-babel-preset'],
    });
});

For many modules, step 2 can be omitted - only certain React Native native modules, distributed with Metro in mind, actually need Babel processing in practice. Simply try building without the rule first and if Webpack throws an errors, try with the rule instead.

Use the module in NativeScript exactly as you would in React Native:

import Auth0 from 'react-native-auth0';

const auth0 = new Auth0({ domain: 'domain', clientId: 'client_id' });

auth0.webAuth
  .authorize({ scope: 'openid profile email' })
  .then((credentials) => console.log(credentials))
  .catch((error) => console.error(error));

How feature complete is this?

Rather than a ground-up rewrite, we actually implemented the React Native native module APIs and auto-linking process using the very same code from the React Native and React Native Community CLI codebase. This ensures excellent consistency and also gives us broad feature coverage.

We are still testing out different native modules and filling in any gaps left. Broadly, we fully support bridge-based non-UI modules, and support for Turbo Modules, Codegen, and JSI is under development (and going well!).

UI modules pose some challenges, as they are distributed ultimately as React components and so could only practically be consumed by React-based apps. If there is interest, we may expose the underlying native UI module for non-React frameworks to create components with.

Performance

Performance of native modules running with Open Native mainly depend on the host runtime's performance. The implementation of native module API uses exactly the same code as the original implementation, however we have made some optimisations with careful consideration for even better performance.

In our first integration with NativeScript, bridge-based native modules perform almost 7-8 times faster compared to React Native on iOS (see benchmarks below). The difference is large due to the fact that NativeScript is able to call native APIs directly by default without a bridge unlike React Native.

We've also treated all bridge-based native modules as Turbo Modules, lazy-loading them until the first API call, so startup time should not be affected for NativeScript apps.

As for size, we've taken just the core code we need, which is only a small subset of React Native code that is sufficient to run native modules.

Is it production-ready?

Open Native is already in use in production by nStudio - it has enabled them to use react-native-auth0 in their NativeScript apps off-the-shelf to fill in some key Auth0 functionality that would otherwise have needed to be written for two platforms from scratch.

What's next?

Allowing React Native native modules to be used in additional ecosystems would be a relatively small task from here, as we've done most of the groundwork (implementing auto-linking and the bridge module API in an ecosystem-agnostic manner) already. Other ecosystems would mainly just need to contribute adapters for the final step, namely invoking APIs on the native modules from a non-native context.

Additional integrations can also be tackled in time, e.g. allowing Flutter platform channels, Capacitor plugins, and NativeScript plugins to be used in other ecosystems. Please do get in touch if you think you could be of help, as there's only so much we can tackle on our own!

For now, we're happy just to have pushed the first domino in allowing communities to work together on solving the same problems.

OpenNative / open-native

Open Native brings cross-platform communities together to help them collaborate and strengthen each other through development diversity.

Open Native is the long overdue Rosetta Stone that allows native modules to be used cross-ecosystem. It handles all the necessary autolinking, type marshalling and API-binding to allow you to choose the highest quality native module for your project, no…

View on GitHub

Getting Started with React Native JSI Modules

Ammar Ahmed — Mon, 28 Jun 2021 06:38:30 +0000

React Native JSI (Javascript Interface) is the new layer that helps in communication between Javascript and Native Platforms easier and faster. It is the core element in re-architecture of React Native with Fabric UI Layer and Turbo Modules.

How is JSI different?

JSI removes the need for a bridge between Native(Java/ObjC) and Javascript code. It also removes the requirement to serialize/deserialize all the information as JSON for communication between the two worlds. JSI is opening doors to new possibilities by bringing closes the javascript and the native worlds. Based on my understanding I am going to help you understand more about the JSI interface based on my knowledge.

Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.
The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code in Android.
Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++
On iOS writing this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use directly.
On android however we have to go an extra mile to do this through JNI.
These methods can be fully synchronous which means using async/await is not mandatory.

Now we are going to create a simple JSI Module which will help us understand everything even better.

Setting up our JSI Module

Open terminal in the desired directory where you want to create your library and run the following:

npx create-react-native-library react-native-simple-jsi

It will ask you some questions.

The important part is to choose C++ for iOS and Android when it asks for Which languages you want to use?

This will setup a basic module for us that uses C++ code. However note that this is not a JSI module. We need to change some parts of the code on Android and iOS to make it a JSI module.

Navigate to the react-native-simple-jsi folder that was just created and delete the example folder then create a new example in its place.

npx react-native init example.

It will also resolve all the other dependencies.

Configuring on Android

Now let's configure our library for android.

Prerequisite for android: Have NDK installed. Preferred version is 21.xx. Install Cmake 3.10.2. You can install both of these from SDK Manager in Android Studio

`CMakeLists.txt`

cmake_minimum_required(VERSION 3.9.0)

add_library(cpp
            SHARED
            ../cpp/example.cpp
            ./cpp-adapter.cpp
            ../../react-native/ReactCommon/jsi/jsi/jsi.cpp
)

include_directories(
            ../../react-native/React
            ../../react-native/React/Base
            ../../react-native/ReactCommon/jsi
            ../cpp
)

set_target_properties(
        cpp PROPERTIES
        CXX_STANDARD 17
        CXX_EXTENSIONS OFF
        POSITION_INDEPENDENT_CODE ON
)

target_link_libraries(
        cpp
        android
)

Okay, let's make this consumable. We are linking all the different libraries that we need for our jsi module here. We are telling CMake(Compiler for C++) how to compile our code and what directories to look for dependencies.

cmake_minimum_required: The minimum version of CMake required to compile our library.

add_library: We are telling the compiler, which libraries to add.

cpp is the name of our library.
SHARED means we are using shared c++ .so instead of compiling one to reduce size of our library.
We are including different files that we will need for our code to run. As you see, we have added path for jsi.cpp here too.

include_directories: Here we are telling the compiler to search for include files.

The remaining set_target_properties, find_library and target_link_libraries can be used as they are. Remember to change cpp to your desirable library name here.

`build.gradle`

Specify the minimum version of CMake to use while compiling c++ code.

  externalNativeBuild {
    cmake {
      path "./CMakeLists.txt"
      version "3.8.0+"
    }
  }

Step 3: Installing JSI Bindings

Run yarn add ../ inside the example folder to add our library to the example project.

Open example/android folder in Android Studio and wait for gradle to complete building your project.

If everything went as planned you should now see this in the Sidebar in Android Studio.

`SimpleJsiModule.java`

From the Sidebar navigate to react-native-simple-jsi/android/java/com.reactnativesimplejsi/SimpleJsiModule.java and replace it with the following code:

package com.reactnativesimplejsi;

import android.util.Log;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.JavaScriptContextHolder;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.module.annotations.ReactModule;

@ReactModule(name = SimpleJsiModule.NAME)
public class SimpleJsiModule extends ReactContextBaseJavaModule {
  public static final String NAME = "SimpleJsi";

  static {
    try {
      // Used to load the 'native-lib' library on application startup.
      System.loadLibrary("cpp");
    } catch (Exception ignored) {
    }
  }

  public SimpleJsiModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  @NonNull
  public String getName() {
    return NAME;
  }

  private native void nativeInstall(long jsi);

  public void installLib(JavaScriptContextHolder reactContext) {

    if (reactContext.get() != 0) {
      this.nativeInstall(
        reactContext.get()
      );
    } else {
      Log.e("SimpleJsiModule", "JSI Runtime is not available in debug mode");
    }

  }

}

As you see, there are no @ReactMethod etc here. Two things are happening in this class.

We are loading our c++ library using System.loadLibrary.
We have an installLib method here which is basically looking for javascript runtime memory reference. The get method basically returns a long value. This value is passed over to JNI where we will install our bindings.

But we have an error, the nativeInstall function is not present in JNI.

Just click on Create JNI function for nativeInstall in the tooltip that shows when you move cursor over the method.

Now if you open cpp-adapter.cpp file. You will see a Java_com_reactnativesimplejsi_SimpleJsiModule_nativeInstall function added.

`SimpleJsiModulePackage.java`

This file does not exist. You have to create this java class.

Create a new java class and name it SimpleJsiModulePackage.

Replace with the following code:

package com.reactnativesimplejsi;

import com.facebook.react.bridge.JSIModulePackage;
import com.facebook.react.bridge.JSIModuleSpec;
import com.facebook.react.bridge.JavaScriptContextHolder;
import com.facebook.react.bridge.ReactApplicationContext;
import java.util.Collections;
import java.util.List;



public class SimpleJsiModulePackage implements JSIModulePackage {
  @Override
  public List<JSIModuleSpec> getJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {

    reactApplicationContext.getNativeModule(SimpleJsiModule.class).installLib(jsContext);

    return Collections.emptyList();
  }
}

In this class we are overriding the getJSIModules method and installing our jsi bindings.

At this point our module is registered and running. So we are getting the module from react context and then calling installLib function to install our library.

While we could do this directly in our native module when it loads, it would not be safe because it is possible that the runtime is not loaded when the native module is ready. This package gives us more control and makes sure that runtime is available when we call installLib.

To call this method and install library we have to modify our app's MainApplication.java.

....

import com.facebook.react.bridge.JSIModulePackage;
import com.reactnativesimplejsi.SimpleJsiModulePackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for SimpleJsiExample:
          // packages.add(new MyReactNativePackage());
          return packages;
        }


        @Override
        protected JSIModulePackage getJSIModulePackage() {
          return new SimpleJsiModulePackage();
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };
.....

We are importing JSIModulePackage
We are registering our SimpleJsiModulePackage as a JSI Module so that when JS Runtime loads, our jsi bindings are also installed. Inside our instance of ReactNativeHost we are overriding getJSIModulePackage method and returning an new instance of SimpleJsiModulePackage.

`cpp-adapter.cpp`

This is our Java Native Interface (JNI) adapter which allows for two way communication between java and native c++ code. We can call c++ code from java and java code from c++.

Here is how our adapter looks like.

#include <jni.h>
#include "example.h"

extern "C"
JNIEXPORT void JNICALL
Java_com_reactnativesimplejsi_SimpleJsiModule_nativeInstall(JNIEnv *env, jobject thiz, jlong jsi) {
    // TODO: implement nativeInstall()
}

Let's add JSI Bindings now assuming that example includes our install function which I will explain later.

#include <jni.h>
#include "example.h"

extern "C"
JNIEXPORT void JNICALL
Java_com_reactnativesimplejsi_SimpleJsiModule_nativeInstall(JNIEnv *env, jobject thiz, jlong jsi) {

    auto runtime = reinterpret_cast<facebook::jsi::Runtime *>(jsi);


    if (runtime) {
        example::install(*runtime);
    }
}

We are calling example::install from our nativeInstall function which is called from java code.

Java_com_reactnativesimplejsi_SimpleJsiModule_nativeInstall(JNIEnv *env, jobject thiz, jlong jsi)

JNIEnv: A JNI interface pointer
jobject: The java class from which the function is called.
long value of our runtime memory reference.

We are reinterpreting the runtime class with auto runtime = reinterpret_cast<jsi::Runtime *>(jsi); and then calling install(*runtime); to install our bindings.

Configuring on iOS

Configuration on iOS is easier than android and includes a few simple step.

Run pod install in example/ios and open example.xcworkspace in xcode.

`SimpleJsi.mm`

Navigate to Pods > Development Pods > react-native-simple-jsi > ios and open SimpleJsi.mm.

Replace it with following code:

#import "SimpleJsi.h"
#import <React/RCTBridge+Private.h>
#import <React/RCTUtils.h>
#import <jsi/jsi.h>
#import "example.h"

@implementation SimpleJsi

@synthesize bridge = _bridge;
@synthesize methodQueue = _methodQueue;

RCT_EXPORT_MODULE()

+ (BOOL)requiresMainQueueSetup {

    return YES;
}

- (void)setBridge:(RCTBridge *)bridge {
    _bridge = bridge;
    _setBridgeOnMainQueue = RCTIsMainQueue();
    [self installLibrary];
}

- (void)installLibrary {

    RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;

    if (!cxxBridge.runtime) {

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC),
                       dispatch_get_main_queue(), ^{
            /**
             When refreshing the app while debugging, the setBridge
             method is called too soon. The runtime is not ready yet
             quite often. We need to install library as soon as runtime
             becomes available.
             */
            [self installLibrary];
        });
        return;
    }

    example::install(*(facebook::jsi::Runtime *)cxxBridge.runtime);
}

@end

At the top we are synthesising the bridge and methodQueue.
We are telling React that our module requires setup on Main Queue.
We are getting an instance of bridge which we will use to get the runtime and install our jsi bindings. Inside it we are checking if bridge.runtime exists or not. If it does not, we are waiting for sometime and then trying again until the bridge.runtime becomes available.

`SimpleJsi.h`

#import <React/RCTBridgeModule.h>

@interface SimpleJsi : NSObject <RCTBridgeModule>

@property (nonatomic, assign) BOOL setBridgeOnMainQueue;

@end

We are adding a property here, `setBridgeOnMainQueue` which tells React to set the bridge on main queue. This results in `setBridge` being called in our module with the `bridge`.

So this is how we configure JSI for both android and iOS. Now let's see what is happening in example.cpp where our installfunction is present.

#include "example.h"
#include <jsi/jsi.h>

using namespace facebook::jsi;
using namespace std;

namespace example {

void install(Runtime &jsiRuntime) {

    auto helloWorld = Function::createFromHostFunction(jsiRuntime,
                                                       PropNameID::forAscii(jsiRuntime,
                                                                            "helloWorld"),
                                                       0,
                                                       [](Runtime &runtime,
                                                          const Value &thisValue,
                                                          const Value *arguments,
                                                          size_t count) -> Value {
        string helloworld = "helloworld";


        return Value(runtime,
                     String::createFromUtf8(
                                            runtime,
                                            helloworld));

    });

    jsiRuntime.global().setProperty(jsiRuntime, "helloWorld", move(helloWorld));
}

}

Okay let's make this consumable.

At the top, you see that we have included jsi include files.
The using namespace facebook etc helps us not write facebook:: over and over.
install function takes one parameter and that is our JS runtime. Inside this function we are registering a method by name helloWorld which will return a hello world string when we call it from javascript code.
Function::createFromHostFunction is a method creates a function which, when invoked, calls C++ code.
jsiRuntime.global().setProperty is where we bind our function with the javascript runtime global object.

Function::createFromHostFunction(Runtime, PropNameID, paramCount, function)

Runtime: Represents a JS runtime where our javascript code is running
PropNameID: An identifier to find our function. It is a simple string.
paramCount: Number of parameters this function will have. In our case it's 0.
function: A function that will be invoked when we call global.helloWorld() from javascript.

Our function has also 4 parameters.

Runtime: Represents a JS runtime where our javascript code is running
Value &thisValue: It is a reference to Value class instance which is used to pass JS values to and from javascript code.
Value *arguments: The arguments for this function coming from Javascript.
size_t count: Total number of arguments.

Inside the function we are creating a simple string hello world.

Then we are returning Value. The String::createFromUtf8 function helps us convert c++ string(std::string) to a Javascript String (jsi::String) value.

Calling our function in Javascript

Now we can call our function helloWorld in javascript code. This should show helloworld at the center of screen.

export default function App() {
  const [result, setResult] = React.useState<number | undefined>();

  React.useEffect(() => {
    setResult(global.helloWorld())
  }, []);

  return (
    <View style={styles.container}>
      <Text>Result: {result}</Text>
    </View>
  );
}

From here onwards, there are unlimited possibilities to what you can do.

Calling function with multiple arguments

In example.cpp add this new function. It's a simple function that does multiplication of two numbers

   auto multiply = Function::createFromHostFunction(jsiRuntime,
                                                       PropNameID::forAscii(jsiRuntime,
                                                                            "multiply"),
                                                       2,
                                                       [](Runtime &runtime,
                                                          const Value &thisValue,
                                                          const Value *arguments,
                                                          size_t count) -> Value {
        int x = arguments[0].getNumber();
        int y = arguments[1].getNumber();

        return Value(x * y);

    });

    jsiRuntime.global().setProperty(jsiRuntime, "multiply", move(multiply));

Notice now that we have set paramCount to 2 because we have two arguments.

In Javascript we can call

global.multiply(2,4) // 8

Calling a JS Callback from C++

Here we are doing the same multiplication but not returning its value. Instead we are calling a JS function.

    auto multiplyWithCallback = Function::createFromHostFunction(jsiRuntime,
                                                       PropNameID::forAscii(jsiRuntime,
                                                                            "multiplyWithCallback"),
                                                       3,
                                                       [](Runtime &runtime,
                                                          const Value &thisValue, 
                                                          const Value *arguments,
                                                          size_t count) -> Value {
        int x = arguments[0].getNumber();
        int y = arguments[1].getNumber();

        arguments[2].getObject(runtime).getFunction(runtime).call(runtime, x * y);

        return Value();

    });

    jsiRuntime.global().setProperty(jsiRuntime, "multiplyWithCallback", move(multiplyWithCallback));

While in javascript, we can call the function like this:

  global.multiplyWithCallback(2,4,(a) => {
    console.log(a); // 8
  })

`Value`

A Value can be undefined, null, boolean, number, symbol, string, or object.

Conclusion

JSI is a game changer for React Native and and it is transforming the way React Native works. Today we have learnt how to build a simple JSI module. In the next blog, I will explain how we can convert any native module to a JSI module using some simple steps.

The complete code of the library and example app can be found on Github.

If you use Async Storage in your React Native App, you should give react-native-mmkv-storage a try. The fastest storage library for react native built with JSI.

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

Install the library

npm install react-native-mmkv-storage

For expo bare workflow

expo prebuild

Get Started with Documentation

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

Learn how to build your own module with JSI on my blog

0.9.0 Breaking change

Works only with react native 0.71.0 and above. If you are on older version of react native, keep using 0.8.x.

Features

Written in C++ using JSI

Starting from v0.5.0…

View on GitHub

Best Data Storage Option for React Native Apps.

Ammar Ahmed — Wed, 18 Mar 2020 05:39:34 +0000

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

$ 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

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

View on GitHub