rn-backstage 1.2.0 → 1.3.0

package/lib/typescript/types.d.ts

@@ -58,6 +58,16 @@ export interface FeatureFlag {
     /** Optional description shown below the label */
     description?: string;
 }
+export interface StorageAdapter {
+    /** Return all stored keys */
+    getAllKeys: () => Promise<string[]>;
+    /** Get value for a key. Return null if not found */
+    getItem: (key: string) => Promise<string | null>;
+    /** Set a value for a key */
+    setItem: (key: string, value: string) => Promise<void>;
+    /** Remove an entry by key */
+    removeItem: (key: string) => Promise<void>;
+}
 export interface BackstageTab {
     key: string;
     title: string;
@@ -87,6 +97,8 @@ export interface BackstageTheme {
 export interface BackstageProps {
     /** Whether the floating pill trigger is visible. Default: true */
     visible?: boolean;
+    /** Theme preference: 'light', 'dark', or 'auto' (follows device setting). Default: 'auto' */
+    theme?: 'light' | 'dark' | 'auto';
     /** App version string (e.g., "1.2.3") */
     appVersion?: string;
     /** Build number (e.g., "42") */
@@ -103,6 +115,8 @@ export interface BackstageProps {
     featureFlags?: FeatureFlag[];
     /** Callback when a feature flag is toggled */
     onToggleFeatureFlag?: (key: string, value: boolean) => void;
+    /** Storage adapter for the Storage Viewer tab (AsyncStorage, MMKV, etc.) */
+    storageAdapter?: StorageAdapter;
     /** Maximum number of logs to retain in memory. Default: 500 */
     maxLogs?: number;
     /** Log messages containing these strings will be excluded */
@@ -121,6 +135,10 @@ export interface BackstageProps {
     initialY?: number;
     /** Text displayed on the floating pill. Defaults to appVersion or "DEV" */
     pillText?: string;
+    /** Width of the floating pill. Default: 60 */
+    pillWidth?: number;
+    /** Height of the floating pill. Default: 32 */
+    pillHeight?: number;
     /** Whether to enable network request interception. Default: true */
     enableNetworkInspector?: boolean;
     /** Maximum number of network entries to retain in memory. Default: 500 */
@@ -131,6 +149,8 @@ export interface BackstageProps {
     networkFilters?: string[];
     /** Auto-filter console.logs from network callbacks (e.g., Axios interceptors) out of the Logs tab. Default: true */
     autoFilterNetworkLogs?: boolean;
+    /** Max nesting depth for JSON tree views (state tree, log data, network bodies). Default: 10 */
+    jsonMaxDepth?: number;
 }
 export interface BackstageStyleOverrides {
     pillStyle?: StyleProp<ViewStyle>;

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-backstage",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A zero-dependency developer/QA debug panel for React Native apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -16,6 +16,8 @@
     "!**/.*"
   ],
   "scripts": {
+    "example:ios": "cd example && npx expo run:ios",
+    "example:android": "cd example && npx expo run:android",
     "typecheck": "tsc --noEmit",
     "lint": "prettier --write \"**/*.{js,ts,tsx}\" && eslint \"**/*.{js,ts,tsx}\"",
     "prepack": "bob build",
@@ -44,12 +46,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/react": "~18.3.0",
+    "@types/react": "~19.2.10",
     "del-cli": "^6.0.0",
     "eslint": "^9.0.0",
     "prettier": "^3.0.0",
-    "react": "18.3.1",
-    "react-native": "^0.78.0",
+    "react": "19.2.0",
+    "react-native": "0.83.4",
     "react-native-builder-bob": "^0.35.0",
     "release-it": "^18.0.0",
     "typescript": "^5.0.0",

package/src/Backstage.tsx

@@ -16,6 +16,7 @@ import {
 } from './network-interceptor'
 import { FloatingPill } from './components/FloatingPill'
 import { BackstagePanel } from './components/BackstagePanel'
+import { BackstageThemeProvider } from './ThemeContext'
 import type { BackstageProps, BackstageRef, LogEntry, NetworkEntry } from './types'
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -24,6 +25,7 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
   (
     {
       visible = true,
+      theme: themePreference = 'auto',
       appVersion,
       buildNumber,
       bundleId,
@@ -32,6 +34,7 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       quickActions,
       featureFlags,
       onToggleFeatureFlag,
+      storageAdapter,
       maxLogs = DEFAULT_MAX_LOGS,
       logFilters,
       onCopyLogs,
@@ -41,11 +44,14 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       initialX,
       initialY,
       pillText,
+      pillWidth,
+      pillHeight,
       enableNetworkInspector = true,
       maxNetworkEntries = DEFAULT_MAX_NETWORK_ENTRIES,
       maxNetworkBodySize,
       networkFilters,
       autoFilterNetworkLogs = true,
+      jsonMaxDepth,
     },
     ref,
   ) => {
@@ -153,39 +159,45 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
     const displayText = pillText || (appVersion ? `v${appVersion}` : 'DEV')
 
     return (
-      <View style={styles.container} pointerEvents="box-none">
-        <FloatingPill
-          text={displayText}
-          hasError={hasError}
-          onPress={openPanel}
-          initialX={initialX}
-          initialY={initialY}
-          styles={propStyles}
-        />
-        <BackstagePanel
-          visible={panelVisible}
-          onClose={closePanel}
-          appVersion={appVersion}
-          buildNumber={buildNumber}
-          bundleId={bundleId}
-          deviceInfo={deviceInfo}
-          state={state}
-          quickActions={quickActions}
-          featureFlags={featureFlags}
-          onToggleFeatureFlag={onToggleFeatureFlag}
-          logs={logs}
-          onRefreshLogs={refreshLogs}
-          onCopyLogs={onCopyLogs}
-          networkEntries={networkEntries}
-          onRefreshNetwork={refreshNetwork}
-          onClearNetwork={clearNetwork}
-          onCopyNetwork={onCopyLogs}
-          extraTabs={extraTabs}
-          styles={propStyles}
-        >
-          {children}
-        </BackstagePanel>
-      </View>
+      <BackstageThemeProvider preference={themePreference}>
+        <View style={styles.container} pointerEvents="box-none">
+          <FloatingPill
+            text={displayText}
+            hasError={hasError}
+            onPress={openPanel}
+            initialX={initialX}
+            initialY={initialY}
+            pillWidth={pillWidth}
+            pillHeight={pillHeight}
+            styles={propStyles}
+          />
+          <BackstagePanel
+            visible={panelVisible}
+            onClose={closePanel}
+            appVersion={appVersion}
+            buildNumber={buildNumber}
+            bundleId={bundleId}
+            deviceInfo={deviceInfo}
+            state={state}
+            quickActions={quickActions}
+            featureFlags={featureFlags}
+            onToggleFeatureFlag={onToggleFeatureFlag}
+            logs={logs}
+            onRefreshLogs={refreshLogs}
+            onCopyLogs={onCopyLogs}
+            networkEntries={networkEntries}
+            onRefreshNetwork={refreshNetwork}
+            onClearNetwork={clearNetwork}
+            onCopyNetwork={onCopyLogs}
+            extraTabs={extraTabs}
+            jsonMaxDepth={jsonMaxDepth}
+            storageAdapter={storageAdapter}
+            styles={propStyles}
+          >
+            {children}
+          </BackstagePanel>
+        </View>
+      </BackstageThemeProvider>
     )
   },
 )

package/src/ThemeContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useMemo } from 'react'
+import { useColorScheme } from 'react-native'
+import { DarkTheme, LightTheme } from './constants'
+import type { BackstageTheme } from './types'
+
+// ─── Theme Preference ────────────────────────────────────────────────────────
+
+export type ThemePreference = 'light' | 'dark' | 'auto'
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+const ThemeContext = createContext<BackstageTheme>(DarkTheme)
+
+// ─── Provider ────────────────────────────────────────────────────────────────
+
+interface ThemeProviderProps {
+  preference: ThemePreference
+  children: React.ReactNode
+}
+
+export const BackstageThemeProvider: React.FC<ThemeProviderProps> = ({ preference, children }) => {
+  const systemScheme = useColorScheme()
+
+  const theme = useMemo(() => {
+    if (preference === 'light') return LightTheme
+    if (preference === 'dark') return DarkTheme
+    // 'auto' — follow system, fallback to dark
+    return systemScheme === 'light' ? LightTheme : DarkTheme
+  }, [preference, systemScheme])
+
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────────────
+
+export function useBackstageTheme(): BackstageTheme {
+  return useContext(ThemeContext)
+}

package/src/components/BackstagePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import {
   Modal,
   SafeAreaView,
@@ -8,12 +8,14 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import { DarkTheme, MonospaceFont, TestIDs } from '../constants'
+import { MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
 import { TabBar } from './TabBar'
 import { InfoTab } from './InfoTab'
 import { LogsTab } from './LogsTab'
 import { NetworkTab } from './NetworkTab'
 import { FlagsTab } from './FlagsTab'
+import { StorageTab } from './StorageTab'
 import type {
   AppInfoItem,
   BackstageStyleOverrides,
@@ -22,6 +24,7 @@ import type {
   LogEntry,
   NetworkEntry,
   QuickAction,
+  StorageAdapter,
 } from '../types'
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -54,6 +57,12 @@ interface BackstagePanelProps {
   // Extensibility
   extraTabs?: BackstageTab[]
 
+  // JSON tree
+  jsonMaxDepth?: number
+
+  // Storage
+  storageAdapter?: StorageAdapter
+
   // Styling
   styles?: BackstageStyleOverrides
   children?: React.ReactNode
@@ -68,6 +77,8 @@ const ALWAYS_ON_TABS = [
 
 const FLAGS_TAB = { key: 'flags', title: 'Flags', icon: '🎚' }
 
+const STORAGE_TAB = { key: 'storage', title: 'Storage', icon: '🗄' }
+
 const LOGS_TAB = { key: 'logs', title: 'Logs', icon: '📋' }
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -91,16 +102,22 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
   onClearNetwork,
   onCopyNetwork,
   extraTabs = [],
+  jsonMaxDepth,
+  storageAdapter,
   styles: propStyles,
   children,
 }) => {
   const [activeTab, setActiveTab] = useState('info')
+  const theme = useBackstageTheme()
+  const styles = useMemo(() => createStyles(theme), [theme])
 
   // Compose all tabs: built-in (conditionally including Flags) + extra
   const hasFlags = featureFlags && featureFlags.length > 0
+  const hasStorage = !!storageAdapter
   const allTabs = [
     ...ALWAYS_ON_TABS,
     ...(hasFlags ? [FLAGS_TAB] : []),
+    ...(hasStorage ? [STORAGE_TAB] : []),
     LOGS_TAB,
     ...extraTabs.map(t => ({ key: t.key, title: t.title, icon: t.icon })),
   ]
@@ -117,6 +134,7 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
             deviceInfo={deviceInfo}
             state={state}
             quickActions={quickActions}
+            jsonMaxDepth={jsonMaxDepth}
             onClosePanel={onClose}
             styles={propStyles}
           >
@@ -124,12 +142,11 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
           </InfoTab>
         )
       case 'flags':
-        return (
-          <FlagsTab
-            flags={featureFlags ?? []}
-            onToggle={onToggleFeatureFlag}
-          />
-        )
+        return <FlagsTab flags={featureFlags ?? []} onToggle={onToggleFeatureFlag} />
+      case 'storage':
+        return storageAdapter ? (
+          <StorageTab adapter={storageAdapter} jsonMaxDepth={jsonMaxDepth} />
+        ) : null
       case 'network':
         return (
           <NetworkTab
@@ -137,6 +154,7 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
             onRefresh={onRefreshNetwork}
             onClear={onClearNetwork}
             onCopy={onCopyNetwork}
+            jsonMaxDepth={jsonMaxDepth}
           />
         )
       case 'logs':
@@ -145,6 +163,7 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
             logs={logs}
             onRefresh={onRefreshLogs}
             onCopyLogs={onCopyLogs}
+            jsonMaxDepth={jsonMaxDepth}
             styles={propStyles}
           />
         )
@@ -161,20 +180,28 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
 
   return (
     <Modal
-      testID={TestIDs.panel}
+      testID={TestIDs.panelModal}
       animationType="slide"
       transparent={false}
       visible={visible}
       onRequestClose={onClose}
       statusBarTranslucent
     >
-      <StatusBar barStyle="light-content" backgroundColor={DarkTheme.background} />
-      <SafeAreaView style={[styles.safeArea, propStyles?.panelStyle]}>
+      <StatusBar
+        barStyle={theme.background < '#888' ? 'light-content' : 'dark-content'}
+        backgroundColor={theme.background}
+      />
+      <SafeAreaView testID={TestIDs.panel} style={[styles.safeArea, propStyles?.panelStyle]}>
         {/* ── Header ──────────────────────────────────────────── */}
-        <View style={styles.header}>
+        <View testID={TestIDs.header.container} style={styles.header}>
           <View style={styles.headerLeft}>
             <Text style={styles.headerBrand}>⚙</Text>
-            <Text style={[styles.headerTitle, propStyles?.headerTitleStyle]}>Backstage</Text>
+            <Text
+              testID={TestIDs.header.title}
+              style={[styles.headerTitle, propStyles?.headerTitleStyle]}
+            >
+              Backstage
+            </Text>
           </View>
           <TouchableOpacity
             testID={TestIDs.header.closeButton}
@@ -199,51 +226,52 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
 
 // ─── Styles ──────────────────────────────────────────────────────────────────
 
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: DarkTheme.background,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: DarkTheme.border,
-  },
-  headerLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  headerBrand: {
-    fontSize: 20,
-    marginRight: 8,
-  },
-  headerTitle: {
-    fontFamily: MonospaceFont,
-    fontSize: 18,
-    fontWeight: '800',
-    color: DarkTheme.text,
-    letterSpacing: 1,
-  },
-  closeButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: DarkTheme.surfaceElevated,
-    borderWidth: 1,
-    borderColor: DarkTheme.border,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  closeButtonText: {
-    fontSize: 14,
-    color: DarkTheme.textSecondary,
-    fontWeight: '700',
-  },
-  content: {
-    flex: 1,
-  },
-})
+const createStyles = (t: import('../types').BackstageTheme) =>
+  StyleSheet.create({
+    safeArea: {
+      flex: 1,
+      backgroundColor: t.background,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: t.border,
+    },
+    headerLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    headerBrand: {
+      fontSize: 20,
+      marginRight: 8,
+    },
+    headerTitle: {
+      fontFamily: MonospaceFont,
+      fontSize: 18,
+      fontWeight: '800',
+      color: t.text,
+      letterSpacing: 1,
+    },
+    closeButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      backgroundColor: t.surfaceElevated,
+      borderWidth: 1,
+      borderColor: t.border,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    closeButtonText: {
+      fontSize: 14,
+      color: t.textSecondary,
+      fontWeight: '700',
+    },
+    content: {
+      flex: 1,
+    },
+  })