React Native MMKV is a highly efficient key-value storage library for React Native apps.
The library implements the native C++ MMKV library, and JSI and Nitro Modules serve as the communication medium with native storage. Unlike most storage solutions for React Native, which use the React Native Bridge to communicate with the native code, MMKV is more efficient due to its direct contact with the actual native code.
This makes MMKV quite suitable for the storage of small local data that is often accessed, such as user preferences, authentication status of users, settings, and cached values for apps.
Key Features
1. High Performance
MMKV provides very fast native key-value storage.
Because the storage implementation is native and uses JSI/Nitro Modules, it avoids much of the overhead associated with the traditional React Native Bridge.
2. Synchronous API
MMKV provides a synchronous API.
You do not need to write:
await storage.get(...)or manage Promises for basic storage operations.
Instead, you can read values directly:
const token = storage.getString('auth.token');This makes the API simple and convenient for frequently accessed local data.
3. JSI Integration
As MMKV makes use of JSI, it can directly call native functionality.
This helps reduce the overhead of passing data through the traditional React Native Bridge and contributes to MMKV’s high performance.
4. Nitro Modules
Modern versions of React Native MMKV use the Nitro Modules architecture.
Nitro Modules is a modern module system for providing efficient communication between JS and native code in the React Native ecosystem.
5. String Storage
You can store text values such as names, tokens, IDs, and preferences.
Example:
storage.set('user.name', 'Navnit');Read the value:
const name = storage.getString('user.name');6. Number Storage
MMKV can store numeric values directly.
Example:
storage.set('cart.count', 5);Read the value:
const count = storage.getNumber('cart.count');7. Boolean Storage
Boolean values are useful for settings and feature flags.
Example:
storage.set('user.isLoggedIn', true);Read the value:
const isLoggedIn = storage.getBoolean('user.isLoggedIn');8. Object Storage
MMKV stores key-value data, so objects can be stored by serializing them to JSON.
Example:
const user = {
id: 101,
name: 'Navnit',
email: 'navnit@example.com',
};
storage.set('user', JSON.stringify(user));Read it back:
const storedUser = storage.getString('user');
const parsedUser = storedUser
? JSON.parse(storedUser)
: null;
console.log(parsedUser);9. Encryption
MMKV supports encrypted storage, which can be useful when storing sensitive local information.
You can create an encrypted MMKV instance:
export const secureStorage = createMMKV({
id: 'secure-storage',
encryptionKey: 'your-encryption-key',
encryptionType: 'AES-256',
});You can also encrypt an existing storage instance:
storage.encrypt('my-secret-key', 'AES-256');To remove encryption:
storage.decrypt();MMKV supports AES-128 by default and AES-256 when explicitly selected.
Important security note:
Do not hardcode a highly sensitive production encryption key directly in your source code.
For example, avoid treating this as a secure production solution:
encryptionKey: ‘123456’
Encryption protects the stored data, but the overall security of authentication tokens and other sensitive information should be considered as part of your application’s complete security model.
10. Multiple Storage Instances
You can create multiple MMKV instances with different IDs.
This can be useful when you want to separate different types of application data.
Example:
const userStorage = createMMKV({
id: 'user-storage',
});
const appStorage = createMMKV({
id: 'app-storage',
});Now user-related data and application-level data can be stored separately.
11. Key Management
MMKV provides simple APIs for managing keys.
Check whether a key exists:
const exists = storage.contains(‘auth.token’);
Get all keys:
const keys = storage.getAllKeys();
console.log(keys);
Remove a specific key:
storage.remove('auth.token');12. Clear Storage
You can remove all stored values from an MMKV instance:
storage.clearAll();Be careful with this operation because it removes all keys from that storage instance.
13. Storage Size
MMKV also provides functionality for checking the storage size.
This feature is very helpful when it comes to monitoring the amount of storage utilized by your application at all times.
14. ArrayBuffer and Binary Data
MMKV can work with ArrayBuffer values, making it possible to store binary data when required.
This can be useful for specific caching or application-level storage scenarios where using binary data would be more convenient than using plain text.
15. React Hooks
MMKV can offer hooks that would allow making the connection between storage values and React components easier.
This is useful when a UI needs to react to changes in persisted local state.
16. State Management Integration
MMKV can be used with popular state-management and persistence libraries.
Common examples include:
– Zustand
– Redux Persist
– React Query
– Jotai
This makes MMKV useful not only as a simple storage API but also as a persistence layer for application state.
17. Platform Support
React Native MMKV can be used across supported React Native platforms, including:
– iOS
– Android
– Web
Always check the library’s current documentation for the exact platform and React Native version requirements for your project.
18. Testing
MMKV can be used in projects that use testing tools such as Jest or Vitest.
When testing code that depends on native storage, make sure the storage layer is mocked or configured correctly for your test environment.
Conclusion
React Native MMKV is a speedy and effective local storage solution for modern React Native apps.
With its synchronous API, native implementation, JSI integration, Nitro Modules architecture, encryption support, and straightforward key-value API, MMKV can be utilized for many tasks that require local storage.
Whenever you are creating React Native applications that require fast key-value storage, MMKV is an option that you should keep in mind.
FAQ
1. What is React Native MMKV?
React Native MMKV is a high-performing key-value storage solution that is designed for React Native projects. The library operates using C++ MMKV in combination with JSI and Nitro Modules in order to offer smooth communication with native storage.
2. Does React Native MMKV provide a synchronous API?
Yes, MMKV provides a synchronous API that allows for reading and writing data directly rather than using async/await or Promises for basic storage tasks.
3. What type of data is React Native MMKV best suited for?
MMKV is primarily best for relatively small values that are accessed frequently, including app settings, user settings, authentication state, feature flags, etc.
