feat(storage-plugin): add storage plugin

.changeset/bright-toes-share.md

@@ -0,0 +1,12 @@
+---
+"@rozenite/storage-plugin": minor
+---
+
+Introduce `@rozenite/storage-plugin` as a generic storage inspector for React Native devtools.
+
+User-facing changes:
+- Add `useRozeniteStoragePlugin({ storages })` API for registering one or more adapters.
+- Support named storages across adapters so multiple independent stores can be inspected in a single plugin panel.
+- Provide built-in adapters for MMKV, AsyncStorage (including v2 and v3-style usage), and Expo SecureStore.
+- Improve entry workflows in the panel by prefilling the key when an entry is selected, making update/delete actions faster.
+- Add official documentation for the new Storage plugin and guide users from MMKV docs toward the generic plugin path.

apps/playground/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^3.0.1",
     "@react-navigation/bottom-tabs": "^7.4.7",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.17",
@@ -28,6 +29,7 @@
     "@rozenite/react-navigation-plugin": "workspace:*",
     "@rozenite/redux-devtools-plugin": "workspace:*",
     "@rozenite/require-profiler-plugin": "workspace:*",
+    "@rozenite/storage-plugin": "workspace:*",
     "@rozenite/tanstack-query-plugin": "workspace:*",
     "@rozenite/web": "workspace:*",
     "@tanstack/react-query": "^5.81.5",
@@ -38,6 +40,7 @@
     "expo-image": "~55.0.3",
     "expo-linking": "~55.0.4",
     "expo-router": "~55.0.0-preview.7",
+    "expo-secure-store": "^55.0.8",
     "expo-splash-screen": "~55.0.5",
     "expo-status-bar": "~55.0.2",
     "expo-symbols": "~55.0.3",

apps/playground/src/app/App.tsx

@@ -4,9 +4,10 @@
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useMMKVDevTools } from '@rozenite/mmkv-plugin';
 import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
 import { usePerformanceMonitorDevTools } from '@rozenite/performance-monitor-plugin';
 import { useReactNavigationDevTools } from '@rozenite/react-navigation-plugin';
+import { useRozeniteStoragePlugin } from '@rozenite/storage-plugin';
 import { useTanStackQueryDevTools } from '@rozenite/tanstack-query-plugin';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRef } from 'react';
@@ -25,9 +26,11 @@
 import { ReduxTestScreen } from './screens/ReduxTestScreen';
 import { RequestBodyTestScreen } from './screens/RequestBodyTestScreen';
 import { RequireProfilerTestScreen } from './screens/RequireProfilerTestScreen';
+import { StoragePluginScreen } from './screens/StoragePluginScreen';
+import { storagePluginAdapters } from './storage-plugin-adapters';
 import { primaryStore } from './store';
 import { useRequireProfilerDevTools } from '@rozenite/require-profiler-plugin';
 import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
 import { RozeniteOverlay } from '@rozenite/overlay-plugin';
 
 withOnBootNetworkActivityRecording();
@@ -47,6 +50,9 @@
     storages: mmkvStorages,
     blacklist: /user-storage:sensitiveToken/,
   });
+  useRozeniteStoragePlugin({
+    storages: storagePluginAdapters,
+  });
   usePerformanceMonitorDevTools();
   useRequireProfilerDevTools();
 
@@ -60,6 +66,7 @@
     >
       <Stack.Screen name="Landing" component={LandingScreen} />
       <Stack.Screen name="MMKVPlugin" component={MMKVPluginScreen} />
+      <Stack.Screen name="StoragePlugin" component={StoragePluginScreen} />
       <Stack.Screen name="NetworkTest" component={NetworkTestScreen} />
       <Stack.Screen name="RequestBodyTest" component={RequestBodyTestScreen} />
       <Stack.Screen name="ReduxTest" component={ReduxTestScreen} />
@@ -104,6 +111,7 @@
     screens: {
       Landing: '',
       MMKVPlugin: 'mmkv',
+      StoragePlugin: 'storage',
       NetworkTest: 'network',
       ReduxTest: 'redux',
       PerformanceMonitor: 'performance',

apps/playground/src/app/navigation/types.ts

@@ -3,6 +3,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 export type RootStackParamList = {
   Landing: undefined;
   MMKVPlugin: undefined;
+  StoragePlugin: undefined;
   NetworkTest: undefined;
   RequestBodyTest: undefined;
   ReduxTest: undefined;

apps/playground/src/app/screens/LandingScreen.tsx

@@ -30,6 +30,13 @@ export const LandingScreen = () => {
               <Text style={styles.buttonText}>MMKV Plugin</Text>
             </TouchableOpacity>
 
+            <TouchableOpacity
+              style={styles.navigationButton}
+              onPress={() => navigation.navigate('StoragePlugin' as never)}
+            >
+              <Text style={styles.buttonText}>Storage Plugin</Text>
+            </TouchableOpacity>
+
             <TouchableOpacity
               style={styles.navigationButton}
               onPress={() => navigation.navigate('NetworkTest' as never)}