react-native-inapp-inspector 2.2.9 → 2.3.1

package/dist/esm/components/Inspector/InspectorHeader.js

@@ -9,12 +9,27 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
-import { getStatusColor, getAppName, formatTime, getSize } from '../../helpers';
+import { getStatusColor, getAppName, formatTime, getSize, getAppVersionAndBuild, } from '../../helpers';
+import { getNativeDeviceMetrics } from '../../native/NativeInspector';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
     const [showUpdateModal, setShowUpdateModal] = React.useState(false);
+    const [appVersionString, setAppVersionString] = React.useState(() => {
+        return getAppVersionAndBuild().formatted;
+    });
+    React.useEffect(() => {
+        getNativeDeviceMetrics()
+            .then(metrics => {
+            if (metrics?.appVersion) {
+                const v = metrics.appVersion;
+                const b = metrics.appBuild || '1';
+                setAppVersionString(`${v} (${b})`);
+            }
+        })
+            .catch(() => { });
+    }, []);
     const envConfig = useMemo(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -265,9 +280,7 @@ const InspectorHeader = React.memo(() => {
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
-                        {Platform.OS === 'ios'
-                ? `iOS ${Platform.Version}`
-                : `Android ${Platform.Version}`}
+                        {appVersionString}
                       </Text>
                     </View>
 

package/dist/esm/components/Inspector/MainScreen.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { ActivityIndicator, Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
+import { Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -11,6 +11,7 @@ import LogDetail from './LogDetail';
 import ConsoleTab from './ConsoleTab';
 import AnalyticsTab from './AnalyticsTab';
 import AnalyticsDetail from '../AnalyticsDetail';
+import SkeletonPlaceholder from '../SkeletonPlaceholder';
 import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
@@ -26,7 +27,7 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -68,7 +69,7 @@ const MainScreen = () => {
     }, [activeTab]);
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
-            isEnabled &&
+            enabled &&
             !visible &&
             !useNativeFab && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
@@ -88,10 +89,10 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{ flex: 1 }}>
-                {isReady ? (<View style={{ flex: 1 }}>
-                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-                    {!isDetailActive && <TabBar />}
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
+                {!isDetailActive && <TabBar />}
 
+                {isReady ? (<View style={{ flex: 1 }}>
                     {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
                     <Animated.View style={[
                     {
@@ -143,12 +144,7 @@ const MainScreen = () => {
                         {activeTab === 'redux' && <ReduxDetail />}
                         {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
                       </Animated.View>)}
-                  </View>) : (<View style={styles.empty}>
-                    <ActivityIndicator size="large" color={AppColors.purple}/>
-                    <Text style={[styles.emptySub, { marginTop: 12 }]}>
-                      Loading logs...
-                    </Text>
-                  </View>)}
+                  </View>) : (<SkeletonPlaceholder />)}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
                 {settingsPage !== null && (<Animated.View style={[

package/dist/esm/components/Inspector/NetworkDetail.js

@@ -396,8 +396,9 @@ const NetworkDetail = React.memo(() => {
                 selected.responseHeaders?.['Content-Type']} url={selected.url}/>
 
             {(() => {
-                const routeInfo = logRouteMapRef.current.get(selected.id);
-                if (!routeInfo || routeInfo.path === 'Navigators')
+                const routeInfo = logRouteMapRef.current.get(selected.id) ||
+                    selected?.routeInfo;
+                if (!routeInfo || !routeInfo.path || routeInfo.path === 'Navigators')
                     return null;
                 return <SourcePageCard routeInfo={routeInfo}/>;
             })()}

package/dist/esm/components/Inspector/NetworkTab.js

@@ -469,7 +469,7 @@ const NetworkTab = React.memo(() => {
                     <View style={{
                     backgroundColor: `${AppColors.purple}20`,
                     borderRadius: 10,
-                    paddingHorizontal: 5,
+                    paddingHorizontal: 6,
                     paddingVertical: 1.5,
                 }}>
                       <Text style={{
@@ -522,14 +522,104 @@ const NetworkTab = React.memo(() => {
                 styles.toolbarBtn,
                 filtersAccordion.isOpen &&
                     styles.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
                   <FilterIcon color={filtersAccordion.isOpen
                 ? AppColors.purple
-                : AppColors.grayTextStrong} size={18}/>
+                : AppColors.grayTextStrong} size={16}/>
+                  {(statusFilters.size > 0 ||
+                methodFilters.size > 0) && (<View style={styles.activeFilterDot}/>)}
                 </TouchableScale>
               </View>
             </View>
 
+            {/* Quick Search Scope & Filter Tags Row */}
+            <View style={{ paddingBottom: 4 }}>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+                paddingVertical: 2,
+            }}>
+                {/* Search Scopes */}
+                {SEARCH_SCOPES.map(s => {
+                const isActive = searchScope === s.id;
+                return (<TouchableScale key={`scope_${s.id}`} onPress={() => setSearchScope(s.id)} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 3.5,
+                        paddingHorizontal: 7.5,
+                        paddingVertical: 3.5,
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? AppColors.purple
+                            : AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors.purple
+                            : AppColors.grayBorderSecondary,
+                    }}>
+                      {s.icon(isActive ? AppColors.white : AppColors.grayTextWeak)}
+                      <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: isActive ? AppColors.white : AppColors.grayText,
+                    }}>
+                        {s.label}
+                      </Text>
+                    </TouchableScale>);
+            })}
+
+                <View style={{
+                width: 1,
+                height: 14,
+                backgroundColor: AppColors.dividerColor,
+                marginHorizontal: 3,
+            }}/>
+
+                {/* Quick Query Suggestions */}
+                {QUICK_API_QUERY_TAGS.map(q => {
+                const isActive = search.includes(q.query);
+                return (<TouchableScale key={`quick_${q.query}`} onPress={() => {
+                        setSearch(prev => {
+                            if (prev.includes(q.query)) {
+                                return prev
+                                    .replace(q.query, '')
+                                    .replace(/\s+/g, ' ')
+                                    .trim();
+                            }
+                            return `${prev} ${q.query}`.trim();
+                        });
+                    }} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 3.5,
+                        paddingHorizontal: 7.5,
+                        paddingVertical: 3.5,
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? `${AppColors.purple}20`
+                            : AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors.purple
+                            : AppColors.grayBorderSecondary,
+                    }}>
+                      {q.icon(isActive ? AppColors.purple : AppColors.grayTextWeak)}
+                      <Text style={{
+                        fontFamily: AppFonts.interMedium,
+                        fontSize: 10,
+                        color: isActive
+                            ? AppColors.purple
+                            : AppColors.grayText,
+                    }}>
+                        {q.label}
+                      </Text>
+                    </TouchableScale>);
+            })}
+              </ScrollView>
+            </View>
+
             {/* Quick Filter Horizontal Chips Bar with Live Counts */}
             <View style={{ marginBottom: 8 }}>
               <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
@@ -815,7 +905,16 @@ const NetworkTab = React.memo(() => {
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </Text>)}
-          </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 || statusFilters.size > 0}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
+          </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
+                statusFilters.size > 0 ||
+                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                ? 'No matching API requests'
+                : 'No network activity'} onClearSearch={() => {
+                setSearch('');
+                setStatusFilters(new Set());
+                setMethodFilters(new Set());
+                setSearchScope('all');
+            }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

package/dist/esm/components/Inspector/ReduxTab.js

@@ -396,9 +396,25 @@ const ReduxTab = React.memo(() => {
           <View style={styles.searchContainer}>
             <SearchIcon color={AppColors.grayTextWeak} size={15}/>
             <TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search Redux slices or actions" accessibilityHint="Type to filter state slices in real time" placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-              </Pressable>)}
+            {reduxSearch.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <View style={{
+                backgroundColor: `${AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                  <Text style={{
+                color: AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts.interBold,
+            }}>
+                    {filteredSlices.length}
+                  </Text>
+                </View>
+                <Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
+                  <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                </Pressable>
+              </View>)}
           </View>
 
           {/* Pause / Resume Live Updates Button */}

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -108,8 +108,8 @@ const SettingsPanel = () => {
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
-        device: Boolean(tabVisibility?.device ?? true),
-        storage: Boolean(tabVisibility?.storage ?? true),
+        device: Boolean(tabVisibility?.device),
+        storage: Boolean(tabVisibility?.storage),
     }));
     // Synchronize staged state with tabVisibility when tabVisibility updates
     useEffect(() => {
@@ -121,8 +121,8 @@ const SettingsPanel = () => {
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
-            device: Boolean(tabVisibility?.device ?? true),
-            storage: Boolean(tabVisibility?.storage ?? true),
+            device: Boolean(tabVisibility?.device),
+            storage: Boolean(tabVisibility?.storage),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = useMemo(() => {

package/dist/esm/components/Inspector/StorageTab.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { View, Text, ScrollView, TextInput, Modal, Alert, StyleSheet, ActivityIndicator, Platform, } from 'react-native';
+import { View, Text, ScrollView, FlatList, TextInput, Modal, Alert, StyleSheet, ActivityIndicator, Platform, } from 'react-native';
 import TouchableScale from '../TouchableScale';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
@@ -8,6 +8,92 @@ import { DatabaseIcon, SearchIcon, ClearIcon, PlusIcon, PencilIcon, TrashIcon, C
 import { fetchStorageEntries, setStorageEntry, removeStorageEntry, clearStorageDriver, isAsyncStorageConnected, isMMKVConnected, getRegisteredMMKVInstanceIds, subscribeToStorageChanges, } from '../../customHooks/storageInspector';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
+const getTypeBadge = (type) => {
+    switch (type) {
+        case 'json':
+            return { label: 'JSON', color: AppColors.purple, bg: `${AppColors.purple}16` };
+        case 'number':
+            return { label: 'NUM', color: AppColors.warningIconGold, bg: `${AppColors.warningIconGold}16` };
+        case 'boolean':
+            return { label: 'BOOL', color: AppColors.emerald500, bg: `${AppColors.emerald500}16` };
+        case 'null':
+            return { label: 'NULL', color: AppColors.grayTextWeak, bg: `${AppColors.grayTextWeak}16` };
+        default:
+            return { label: 'STR', color: AppColors.blue500, bg: `${AppColors.blue500}16` };
+    }
+};
+const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpanded, onToggleExpand, onCopy, onEdit, onDelete, badge, }) {
+    const formattedBytes = useMemo(() => {
+        return entry.byteSize < 1024
+            ? `${entry.byteSize} B`
+            : `${(entry.byteSize / 1024).toFixed(1)} KB`;
+    }, [entry.byteSize]);
+    // Lazy compute displayed value to avoid layout thrashing on large JSON strings
+    const displayValue = useMemo(() => {
+        if (!isExpanded) {
+            if (entry.value.length > 250) {
+                return entry.value.slice(0, 250) + '...';
+            }
+            return entry.value;
+        }
+        if (entry.type === 'json') {
+            try {
+                const parsed = entry.parsedValue ?? JSON.parse(entry.value);
+                return JSON.stringify(parsed, null, 2);
+            }
+            catch {
+                return entry.value;
+            }
+        }
+        return entry.value;
+    }, [isExpanded, entry.value, entry.type, entry.parsedValue]);
+    return (<View style={styles.entryCard}>
+      {/* Entry Header: Key name, Type Badge, Size, Actions */}
+      <View style={styles.entryHeader}>
+        <View style={{ flex: 1, marginRight: 8 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+            <Text style={styles.entryKey} numberOfLines={1} selectable>
+              {entry.key}
+            </Text>
+            <View style={[
+            styles.typeBadge,
+            { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
+        ]}>
+              <Text style={[styles.typeBadgeText, { color: badge.color }]}>
+                {badge.label}
+              </Text>
+            </View>
+            <Text style={styles.sizeText}>{formattedBytes}</Text>
+          </View>
+        </View>
+
+        {/* Actions: Copy, Edit, Delete */}
+        <View style={styles.entryActions}>
+          <TouchableScale hitSlop={6} onPress={() => onCopy(entry)} style={styles.entryActionBtn}>
+            <CopyIcon size={12} color={AppColors.grayText}/>
+          </TouchableScale>
+
+          <TouchableScale hitSlop={6} onPress={() => onEdit(entry)} style={styles.entryActionBtn}>
+            <PencilIcon size={12} color={AppColors.purple}/>
+          </TouchableScale>
+
+          <TouchableScale hitSlop={6} onPress={() => onDelete(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors.errorColor}12` }]}>
+            <TrashIcon size={12} color={AppColors.errorColor}/>
+          </TouchableScale>
+        </View>
+      </View>
+
+      {/* Entry Value Preview / Viewer */}
+      <TouchableScale onPress={() => onToggleExpand(entry.key)} style={styles.valuePreviewBox}>
+        <Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
+          {displayValue}
+        </Text>
+        {entry.value.length > 80 && (<Text style={styles.expandHint}>
+            {isExpanded ? '▲ Collapse' : '▼ Expand'}
+          </Text>)}
+      </TouchableScale>
+    </View>);
+});
 export const StorageTab = React.memo(() => {
     const { t } = useTranslation();
     const [activeDriver, setActiveDriver] = useState('asyncStorage');
@@ -166,20 +252,11 @@ export const StorageTab = React.memo(() => {
             return `${(totalBytes / 1024).toFixed(1)} KB`;
         return `${(totalBytes / (1024 * 1024)).toFixed(2)} MB`;
     }, [totalBytes]);
-    const getTypeBadge = (type) => {
-        switch (type) {
-            case 'json':
-                return { label: 'JSON', color: AppColors.purple, bg: `${AppColors.purple}16` };
-            case 'number':
-                return { label: 'NUM', color: AppColors.warningIconGold, bg: `${AppColors.warningIconGold}16` };
-            case 'boolean':
-                return { label: 'BOOL', color: AppColors.emerald500, bg: `${AppColors.emerald500}16` };
-            case 'null':
-                return { label: 'NULL', color: AppColors.grayTextWeak, bg: `${AppColors.grayTextWeak}16` };
-            default:
-                return { label: 'STR', color: AppColors.blue500, bg: `${AppColors.blue500}16` };
-        }
-    };
+    const handleCopyEntry = useCallback((entry) => {
+        copyToClipboard(entry.value, entry.key);
+        showToast(`Copied value of "${entry.key}"`);
+    }, []);
+    const renderItem = useCallback(({ item }) => (<StorageEntryCard entry={item} isExpanded={Boolean(expandedKeys[item.key])} onToggleExpand={toggleExpand} onCopy={handleCopyEntry} onEdit={handleOpenEdit} onDelete={handleDeleteKey} badge={getTypeBadge(item.type)}/>), [expandedKeys, handleCopyEntry]);
     const isConnected = activeDriver === 'asyncStorage'
         ? isAsyncStorageConnected()
         : isMMKVConnected();
@@ -245,9 +322,25 @@ export const StorageTab = React.memo(() => {
         <View style={styles.searchBar}>
           <SearchIcon size={14} color={AppColors.grayTextWeak}/>
           <TextInput value={search} onChangeText={setSearch} placeholder={`Search ${entries.length} keys & values...`} placeholderTextColor={AppColors.grayTextWeak} style={styles.searchInput} clearButtonMode="while-editing"/>
-          {search.length > 0 && (<TouchableScale onPress={() => setSearch('')} hitSlop={8}>
-              <ClearIcon size={13} color={AppColors.grayTextWeak}/>
-            </TouchableScale>)}
+          {search.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <View style={{
+                backgroundColor: `${AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                <Text style={{
+                color: AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts.interBold,
+            }}>
+                  {filteredEntries.length}
+                </Text>
+              </View>
+              <TouchableScale onPress={() => setSearch('')} hitSlop={8}>
+                <ClearIcon size={13} color={AppColors.grayTextWeak}/>
+              </TouchableScale>
+            </View>)}
         </View>
 
         {/* Action Buttons: Add Key & Refresh */}
@@ -279,81 +372,19 @@ export const StorageTab = React.memo(() => {
       {isLoading ? (<View style={styles.loadingContainer}>
           <ActivityIndicator size="small" color={AppColors.purple}/>
           <Text style={styles.loadingText}>Loading storage entries...</Text>
-        </View>) : filteredEntries.length === 0 ? (<ScrollView contentContainerStyle={styles.emptyContainer} showsVerticalScrollIndicator={false}>
-          <View style={styles.emptyIconWrap}>
-            <DatabaseIcon size={28} color={AppColors.grayTextWeak}/>
-          </View>
-          <Text style={styles.emptyTitle}>
-            {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
-          </Text>
-          <Text style={styles.emptySubtitle}>
-            {search
-                ? 'Try modifying your search query'
-                : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
-          </Text>
-        </ScrollView>) : (<ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-          {filteredEntries.map(entry => {
-                const isExpanded = Boolean(expandedKeys[entry.key]);
-                const badge = getTypeBadge(entry.type);
-                const formattedBytes = entry.byteSize < 1024
-                    ? `${entry.byteSize} B`
-                    : `${(entry.byteSize / 1024).toFixed(1)} KB`;
-                return (<View key={entry.key} style={styles.entryCard}>
-                {/* Entry Header: Key name, Type Badge, Size, Actions */}
-                <View style={styles.entryHeader}>
-                  <View style={{ flex: 1, marginRight: 8 }}>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                      <Text style={styles.entryKey} numberOfLines={1} selectable>
-                        {entry.key}
-                      </Text>
-                      <View style={[
-                        styles.typeBadge,
-                        { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
-                    ]}>
-                        <Text style={[styles.typeBadgeText, { color: badge.color }]}>
-                          {badge.label}
-                        </Text>
-                      </View>
-                      <Text style={styles.sizeText}>{formattedBytes}</Text>
-                    </View>
-                  </View>
-
-                  {/* Actions: Copy, Edit, Delete */}
-                  <View style={styles.entryActions}>
-                    <TouchableScale hitSlop={6} onPress={() => {
-                        copyToClipboard(entry.value, entry.key);
-                        showToast(`Copied value of "${entry.key}"`);
-                    }} style={styles.entryActionBtn}>
-                      <CopyIcon size={12} color={AppColors.grayText}/>
-                    </TouchableScale>
-
-                    <TouchableScale hitSlop={6} onPress={() => handleOpenEdit(entry)} style={styles.entryActionBtn}>
-                      <PencilIcon size={12} color={AppColors.purple}/>
-                    </TouchableScale>
-
-                    <TouchableScale hitSlop={6} onPress={() => handleDeleteKey(entry.key)} style={[styles.entryActionBtn, { backgroundColor: `${AppColors.errorColor}12` }]}>
-                      <TrashIcon size={12} color={AppColors.errorColor}/>
-                    </TouchableScale>
-                  </View>
-                </View>
-
-                {/* Entry Value Preview / Viewer */}
-                <TouchableScale onPress={() => toggleExpand(entry.key)} style={styles.valuePreviewBox}>
-                  <Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable>
-                    {entry.type === 'json' && entry.parsedValue
-                        ? isExpanded
-                            ? JSON.stringify(entry.parsedValue, null, 2)
-                            : entry.value
-                        : entry.value}
-                  </Text>
-                  {entry.value.length > 80 && (<Text style={styles.expandHint}>
-                      {isExpanded ? '▲ Collapse' : '▼ Expand'}
-                    </Text>)}
-                </TouchableScale>
-              </View>);
-            })}
-          <View style={{ height: 60 }}/>
-        </ScrollView>)}
+        </View>) : (<FlatList data={filteredEntries} keyExtractor={item => item.key} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} ListEmptyComponent={<View style={styles.emptyContainer}>
+              <View style={styles.emptyIconWrap}>
+                <DatabaseIcon size={28} color={AppColors.grayTextWeak}/>
+              </View>
+              <Text style={styles.emptyTitle}>
+                {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+              </Text>
+              <Text style={styles.emptySubtitle}>
+                {search
+                    ? 'Try modifying your search query'
+                    : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
+              </Text>
+            </View>} ListFooterComponent={<View style={{ height: 60 }}/>}/>)}
 
       {/* ── Create / Edit Key Modal ── */}
       <Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>

package/dist/esm/components/JsonViewer.js

@@ -5,6 +5,7 @@ import { useTranslation } from '../i18n';
 import TreeNode from './TreeNode';
 import SegmentedTabs from './SegmentedTabs';
 import HighlightText from './HighlightText';
+import CopyButton from './CopyButton';
 import { PrettyIcon, RawIcon, TableIcon } from './NetworkIcons';
 // Styles
 import { AppColors } from '../styles/AppColors';
@@ -151,6 +152,7 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
                     icon: (isActive) => (<TableIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
                 },
             ]} activeKey={mode} onChange={key => setMode(key)}/>
+          <CopyButton value={data} label="JSON"/>
         </View>)}
 
       {/* ── Main View Content Area (Royal Monospace Theme) ── */}

package/dist/esm/components/MetaAccordion.js

@@ -11,6 +11,7 @@ import { getDurationColor, handleOpenExternalLink } from '../helpers';
 import { ChevronIcon, CalendarIcon, StatusIcon, ClockIcon, SizeIcon, TerminalIcon, GlobeIcon, } from './NetworkIcons';
 // Components
 import TouchableScale from './TouchableScale';
+import CopyButton from './CopyButton';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
@@ -60,9 +61,20 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
       <Pressable onPress={toggleOpen} hitSlop={12}>
         <View style={styles.metaHeader}>
           <Text style={styles.metaTitle}>Metadata</Text>
-          <Animated.View style={chevronStyle}>
-            <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
-          </Animated.View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <CopyButton value={{
+            status: status ?? 0,
+            duration: duration != null ? `${duration} ms` : '—',
+            size: size || '—',
+            triggeredAt: triggeredAt || '',
+            method: method || 'GET',
+            contentType: contentType || 'application/json',
+            url: url || '',
+        }} label="Metadata"/>
+            <Animated.View style={chevronStyle}>
+              <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
+            </Animated.View>
+          </View>
         </View>
       </Pressable>
 

package/dist/esm/components/SkeletonPlaceholder.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SkeletonPlaceholderProps {
+    cardCount?: number;
+}
+declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;
+export default SkeletonPlaceholder;