react-native-mmkv-explorer

An interactive in-app dev tool for exploring react-native-mmkv storage at runtime.

Features

• Browse and search all keys with type badges and value previews
• Full CRUD - create, read, update, and delete key-value pairs
• Multiple instances - switch between named MMKV storage instances
• Import/Export - JSON export with clipboard/share, import with conflict modes (merge/overwrite/replace)
• Themeable - dark theme by default, fully customizable colors
• Dev-only - designed to be conditionally included with __DEV__

Installation

npm install react-native-mmkv-explorer

Peer dependencies

This package requires the following peer dependencies:

npm install react react-native react-native-mmkv

Quick Start

import { MMKV } from 'react-native-mmkv';
import { MMKVExplorer } from 'react-native-mmkv-explorer';
import { useState } from 'react';

const storage = new MMKV();
const userStorage = new MMKV({ id: 'user-settings' });

function App() {
  const [explorerVisible, setExplorerVisible] = useState(false);

  return (
    <>
      {/* Your app content */}
      <Button title="Open Storage Explorer" onPress={() => setExplorerVisible(true)} />

      {/* Only include in development */}
      {__DEV__ && (
        <MMKVExplorer
          instances={[
            { name: 'Default', storage },
            { name: 'User Settings', storage: userStorage },
          ]}
          visible={explorerVisible}
          onClose={() => setExplorerVisible(false)}
        />
      )}
    </>
  );
}

Dev Menu Integration

Instead of adding a button to your UI, you can launch the explorer from React Native's built-in dev menu or Expo Dev Menu:

import { useEffect } from 'react';
import { DevSettings } from 'react-native';
import { registerDevMenuItems } from 'expo-dev-menu';
import { MMKVExplorer, useMmkvExplorerVisible, showMmkvExplorer, hideMmkvExplorer } from 'react-native-mmkv-explorer';

export function DevMmkvExplorer() {
  const visible = useMmkvExplorerVisible();

  useEffect(() => {
    if (!__DEV__) return;

    // React Native dev menu (shake or Cmd+D)
    DevSettings.addMenuItem('MMKV Explorer', showMmkvExplorer);

    // Expo Dev Menu (if using expo-dev-client)
    registerDevMenuItems([{ name: 'MMKV Explorer', callback: showMmkvExplorer }]);
  }, []);

  return (
    <MMKVExplorer
      instances={mmkvInstances}
      visible={visible}
      onClose={hideMmkvExplorer}
    />
  );
}

You can use either or both depending on your setup:

• DevSettings.addMenuItem — adds an entry to the standard React Native dev menu (shake gesture or ⌘D)
• registerDevMenuItems — adds an entry to the Expo Dev Menu (requires expo-dev-client)

Props

Prop	Type	Required	Description
instances	InstanceDescriptor[]	Yes	Array of { name: string; storage: MMKV } objects
visible	boolean	Yes	Controls modal visibility
onClose	() => void	Yes	Called when the user closes the explorer
theme	ThemeOverrides	No	Partial theme object to override default colors

InstanceDescriptor

interface InstanceDescriptor {
  name: string;    // Human-readable label shown in the instance picker
  storage: MMKV;   // MMKV instance to explore
}

Theming

Override any color from the default dark theme:

<MMKVExplorer
  instances={instances}
  visible={visible}
  onClose={onClose}
  theme={{
    background: '#0d1117',
    primary: '#58a6ff',
    danger: '#f85149',
  }}
/>

Available theme colors

Key	Default	Description
background	#1a1a2e	Main background
surface	#16213e	Card/modal background
surfaceHighlight	#1f2b47	Highlighted surface
text	#e0e0e0	Primary text
textSecondary	#a0a0b0	Secondary text
textMuted	#606070	Muted text
border	#2a2a4a	Border color
primary	#4a9eff	Primary action color
danger	#ff4a6a	Destructive action color
badgeString	#4ade80	String type badge
badgeNumber	#60a5fa	Number type badge
badgeBoolean	#f59e0b	Boolean type badge
badgeBinary	#a78bfa	Binary type badge

Import/Export Format

The export format is a versioned JSON envelope:

{
  "version": 1,
  "instanceName": "user-settings",
  "exportedAt": "2026-04-30T03:34:00.000Z",
  "entries": {
    "username": { "type": "string", "value": "alice" },
    "loginCount": { "type": "number", "value": 42 },
    "darkMode": { "type": "boolean", "value": true },
    "avatar": { "type": "binary", "value": "base64encodeddata==" }
  }
}

Import conflict modes

Mode	Behavior
Overwrite (default)	Update existing keys + add new keys
Merge	Only add keys that don't already exist
Replace All	Clear all existing keys, then import

A preview showing the number of new, updated, and unchanged keys is displayed before applying.

Interactions

• Tap a key to view its full value
• Long-press a key to delete it (with confirmation)
• Pull down to refresh the key list
• Search to filter keys by name
• + Add Key to create a new key-value pair with explicit type selection

Type Detection

MMKV does not expose value types directly. The explorer detects types by trying each getter in order: getString, getNumber, getBoolean, getBuffer. The first to return a non-undefined value determines the type. When editing, you can explicitly select the type.

License

MIT