Enhance React Native Security and Performance: with MMKV Storage

Using MMKV as a replacement for Async Storage in React Native is a great way to enhance performance and security, especially if you need to store sensitive data like a PIN. MMKV offers fast and efficient storage with built-in support for encryption, making it a strong candidate for secure data storage.

Features

- Get and set strings, booleans and numbers
- Fully synchronous calls, no async/await, no Promises, no Bridge.
- Encryption support (secure storage)
- Multiple instances support (separate user-data with global data)
- Customize storage location
- High performance because everything is written in C++
- ~30x faster than AsyncStorage
- Uses JSI instead of the "old" Bridge
- iOS, Android and Web support
- Easy to use React Hooks API

Here's a guide on how to replace Async Storage with MMKV, including encryption:

1. Install the MMKV Library

First, you'll need to install the react-native-mmkv library:

npm install react-native-mmkv

Or with Yarn:

yarn add react-native-mmkv

2. Install iOS Dependencies

If you're working on an iOS project, navigate to the ios directory and run pod install:

cd ios
pod install

3. Set Up MMKV

Initialize MMKV in your project with encryption as needed. Create the following folder structure and files in your project:

service/
│
└───localStorageServiceMMKV/
    │   index.js
    │   storageConstructor.config.js

Create the storageConstructor.config.js file and paste the following code:

import { MMKV } from 'react-native-mmkv';

const secureParams = {
  id: 'mmkv.default',
  encryptionKey: 'my-encryption-key!', // Replace with your encryption key
};
export const LocalStorage = new MMKV(secureParams);

Create the index.js file and paste the following code:

import { LocalStorage } from './storageConstructor.config';

export default class LocalStorageMMKVService {
  static setItem(key, value) {
    return LocalStorage.set(key, JSON.stringify(value));
  }

  static async getItem(key) {
    const value = LocalStorage.getString(key);
    return value ? JSON.parse(value) : null;
  }

  static removeItem(key) {
    return LocalStorage.delete(key);
  }

  static removeAll() {
    return LocalStorage.clearAll();
  }

  static getItemAlt(key) {
    const value = LocalStorage.getString(key);
    return value ? JSON.parse(value) : null;
  }
}

Note:
Make sure that the storageConstructor.config.js file is properly linked in your App.js. Here’s how you can update your App.js to include this import statement:

// Import MMKV storage configuration
import 'scr/service/localStorageServiceMMKV/storageConstructor.config';

4. Handling Secure Storage

Since MMKV supports encryption, you can securely store sensitive data like a PIN:

Encrypting and Storing Data

const pin = '1234';
LocalStorageMMKVService.setItem('userPin', pin); // MMKV automatically encrypts the data if encryptionKey is provided

Retrieving and Decrypting Data

const encryptedPin = await LocalStorageMMKVService.getItem('userPin');
console.log('Encrypted PIN:', encryptedPin); // The data is automatically decrypted

By following these steps, you’ll transition smoothly from Async Storage to MMKV, leveraging enhanced performance and security features for your React Native application.