react-native-inapp-inspector 2.3.0 → 2.3.2

package/dist/commonjs/index.js

@@ -68,7 +68,7 @@ const NativeInspector_2 = require("./native/NativeInspector");
 const constants_1 = require("./constants");
 // Stylesheet
 const styles_1 = require("./styles");
-const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigationRef, appIcon, environment, initialVisible, visible: controlledVisible, }) => {
+const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, environment, initialVisible = false, visible: controlledVisible, }) => {
     // Set custom storage synchronously during render phase
     (0, settingsStore_1.setCustomStorage)(storage || null);
     const [isDark, setIsDark] = (0, react_1.useState)(false);
@@ -80,7 +80,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [modalHeightPercent, setModalHeightPercent] = (0, react_1.useState)(90);
     const [modalAnimationType, setModalAnimationType] = (0, react_1.useState)('slide');
     const [logs, setLogs] = (0, react_1.useState)([]);
-    const [visible, setVisible] = (0, react_1.useState)(initialVisible ?? controlledVisible ?? false);
+    const [visible, setVisible] = (0, react_1.useState)(controlledVisible ?? initialVisible ?? false);
     (0, react_1.useEffect)(() => {
         if (controlledVisible !== undefined) {
             setVisible(controlledVisible);
@@ -784,22 +784,26 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const useNativeFab = (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isNativeModule;
     // 100% Native Main-Thread Floating Button Lifecycle
     (0, react_1.useEffect)(() => {
-        if (!useNativeFab || !isEnabled || !enabled) {
+        if (!useNativeFab || !enabled) {
             if (useNativeFab) {
-                (0, NativeInspector_2.hideNativeFloatingButton)();
+                (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
             }
             return;
         }
         if (visible) {
-            (0, NativeInspector_2.hideNativeFloatingButton)();
+            (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
         }
         else {
-            (0, NativeInspector_2.showNativeFloatingButton)();
-            (0, NativeInspector_2.setNativeFloatingButtonBadge)(logs.length > 0 || analyticsEvents.length > 0);
+            (0, NativeInspector_2.showNativeFloatingButton)().catch(() => { });
+            (0, NativeInspector_2.setNativeFloatingButtonBadge)(logs.length > 0 || analyticsEvents.length > 0).catch(() => { });
         }
+        return () => {
+            if (useNativeFab) {
+                (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
+            }
+        };
     }, [
         useNativeFab,
-        isEnabled,
         enabled,
         visible,
         logs.length,
@@ -858,20 +862,11 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             if (freshCrashes.length > 0) {
                 setCrashRecords(freshCrashes);
             }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-    (0, react_1.useEffect)(() => {
-        if (visible) {
-            const task = react_native_1.InteractionManager.runAfterInteractions(() => {
+            const frame = requestAnimationFrame(() => {
                 setIsReady(true);
             });
-            const fallbackTimer = setTimeout(() => {
-                setIsReady(true);
-            }, 350);
             return () => {
-                task.cancel();
-                clearTimeout(fallbackTimer);
+                cancelAnimationFrame(frame);
             };
         }
         else {
@@ -1707,7 +1702,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setVisible,
         closeModal,
         isReady,
-        isEnabled,
+        enabled,
+        isEnabled: enabled,
         appIcon,
         environment,
         modalHeightPercent,
@@ -1884,14 +1880,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     </InspectorContext_1.InspectorContext.Provider>);
 };
 const NetworkInspectorWrapper = (props) => {
-    // If running in production release build and not explicitly force-enabled (e.g. for QA builds),
-    // return null immediately for 0-overhead production stubbing.
-    if (typeof __DEV__ !== 'undefined' && !__DEV__ && !props?.forceEnable) {
+    const enabled = props?.enabled ?? true;
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
+        }
+        return () => {
+            (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
+        };
+    }, [enabled]);
+    // If enabled is false, return null immediately with 0 overhead
+    if (!enabled) {
         return null;
     }
     return (<i18n_1.I18nextProvider i18n={i18n_1.i18n}>
       <ErrorBoundary_1.default fallbackType="inline">
-        <NetworkInspector {...props}/>
+        <NetworkInspector {...props} enabled={enabled}/>
       </ErrorBoundary_1.default>
     </i18n_1.I18nextProvider>);
 };

package/dist/commonjs/types/interfaces.d.ts

@@ -157,8 +157,6 @@ export interface PersistedSettings {
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
-    isEnabled?: boolean;
-    forceEnable?: boolean;
     storage?: InspectorStorage;
     navigationRef?: any;
     appIcon?: any;
@@ -174,6 +172,7 @@ export interface InspectorContextValue {
     setVisible: React.Dispatch<React.SetStateAction<boolean>>;
     closeModal: () => void;
     isReady: boolean;
+    enabled: boolean;
     isEnabled: boolean;
     appIcon?: any;
     environment?: string;

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/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();
@@ -295,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/SkeletonPlaceholder.d.ts

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

package/dist/esm/components/SkeletonPlaceholder.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
+    const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(shimmerAnim, {
+                toValue: 0.85,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shimmerAnim, {
+                toValue: 0.35,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [shimmerAnim]);
+    return (<View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View style={[
+            skeletonStyles.searchBarSkeleton,
+            { opacity: shimmerAnim },
+        ]}/>
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({ length: cardCount }).map((_, i) => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          {/* Top row: Status pill + Method + Time */}
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton}/>
+              <View style={skeletonStyles.methodBadgeSkeleton}/>
+            </View>
+            <View style={skeletonStyles.timeSkeleton}/>
+          </View>
+
+          {/* Middle row: URL lines */}
+          <View style={skeletonStyles.urlLineLong}/>
+          <View style={skeletonStyles.urlLineShort}/>
+
+          {/* Bottom row: Latency & Size */}
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+          </View>
+        </Animated.View>))}
+    </View>);
+});
+const skeletonStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 12,
+        paddingTop: 8,
+    },
+    toolbarSkeleton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 8,
+    },
+    searchBarSkeleton: {
+        flex: 1,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    actionButtonsRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    iconButtonSkeleton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    chipStripSkeleton: {
+        flexDirection: 'row',
+        gap: 6,
+        marginBottom: 10,
+    },
+    chipSkeleton: {
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    cardSkeleton: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    cardTopRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    badgeGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    statusBadgeSkeleton: {
+        width: 38,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    methodBadgeSkeleton: {
+        width: 44,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    timeSkeleton: {
+        width: 48,
+        height: 12,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    urlLineLong: {
+        height: 13,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 5,
+        width: '90%',
+    },
+    urlLineShort: {
+        height: 11,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 8,
+        width: '55%',
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 2,
+    },
+    metaPillSkeleton: {
+        width: 52,
+        height: 14,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+});
+export default SkeletonPlaceholder;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.0";
+export declare const LIB_VERSION = "2.3.2";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.0';
+export const LIB_VERSION = '2.3.2';

package/dist/esm/customHooks/storageInspector.d.ts

@@ -37,11 +37,11 @@ export declare const getRegisteredMMKVInstanceIds: () => string[];
  */
 export declare const calculateByteSize: (str: string) => number;
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export declare const analyzeStorageValue: (rawVal: any) => {
     strVal: string;
-    parsedVal?: any;
+    parsedValue?: any;
     type: "json" | "string" | "number" | "boolean" | "null";
     byteSize: number;
 };