react-native-inapp-inspector 2.3.0 → 2.3.2

package/dist/esm/customHooks/storageInspector.js

@@ -255,34 +255,38 @@ export const calculateByteSize = (str) => {
     return str.length * 2;
 };
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export const analyzeStorageValue = (rawVal) => {
     if (rawVal === null || rawVal === undefined) {
         return { strVal: 'null', type: 'null', byteSize: 4 };
     }
     const strVal = typeof rawVal === 'string' ? rawVal : String(rawVal);
-    const byteSize = calculateByteSize(strVal);
+    const byteSize = strVal.length * 2;
     if (typeof rawVal === 'number') {
-        return { strVal, parsedVal: rawVal, type: 'number', byteSize };
+        return { strVal, parsedValue: rawVal, type: 'number', byteSize };
     }
     if (typeof rawVal === 'boolean') {
-        return { strVal, parsedVal: rawVal, type: 'boolean', byteSize };
+        return { strVal, parsedValue: rawVal, type: 'boolean', byteSize };
     }
     const trimmed = strVal.trim();
     if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
         (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
-        try {
-            const parsed = JSON.parse(trimmed);
-            return { strVal, parsedVal: parsed, type: 'json', byteSize };
+        // For small/medium JSON, parse eagerly; for huge payloads (>10KB), parse lazily on expand
+        if (trimmed.length < 10000) {
+            try {
+                const parsed = JSON.parse(trimmed);
+                return { strVal, parsedValue: parsed, type: 'json', byteSize };
+            }
+            catch { }
         }
-        catch { }
+        return { strVal, type: 'json', byteSize };
     }
     if (trimmed === 'true' || trimmed === 'false') {
-        return { strVal, parsedVal: trimmed === 'true', type: 'boolean', byteSize };
+        return { strVal, parsedValue: trimmed === 'true', type: 'boolean', byteSize };
     }
     if (!isNaN(Number(trimmed)) && trimmed !== '') {
-        return { strVal, parsedVal: Number(trimmed), type: 'number', byteSize };
+        return { strVal, parsedValue: Number(trimmed), type: 'number', byteSize };
     }
     return { strVal, type: 'string', byteSize };
 };
@@ -307,7 +311,7 @@ export const fetchStorageEntries = async (driver, instanceId) => {
                     entries.push({
                         key: k,
                         value: analysis.strVal,
-                        parsedValue: analysis.parsedVal,
+                        parsedValue: analysis.parsedValue,
                         type: analysis.type,
                         byteSize: analysis.byteSize,
                     });
@@ -320,7 +324,7 @@ export const fetchStorageEntries = async (driver, instanceId) => {
                     entries.push({
                         key: k,
                         value: analysis.strVal,
-                        parsedValue: analysis.parsedVal,
+                        parsedValue: analysis.parsedValue,
                         type: analysis.type,
                         byteSize: analysis.byteSize,
                     });
@@ -361,7 +365,7 @@ export const fetchStorageEntries = async (driver, instanceId) => {
                 entries.push({
                     key: k,
                     value: analysis.strVal,
-                    parsedValue: analysis.parsedVal,
+                    parsedValue: analysis.parsedValue,
                     type: analysis.type,
                     byteSize: analysis.byteSize,
                 });

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, PanResponder, Platform, UIManager, LogBox, InteractionManager, } from 'react-native';
+import { Alert, Animated, PanResponder, Platform, UIManager, LogBox, } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 // i18n
 import { I18nextProvider, i18n } from './i18n';
@@ -27,7 +27,7 @@ import { showNativeFloatingButton, hideNativeFloatingButton, setNativeFloatingBu
 import { LIB_VERSION } from './constants';
 // Stylesheet
 import { toggleGlobalTheme } from './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
     setCustomStorage(storage || null);
     const [isDark, setIsDark] = useState(false);
@@ -39,7 +39,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [modalHeightPercent, setModalHeightPercent] = useState(90);
     const [modalAnimationType, setModalAnimationType] = useState('slide');
     const [logs, setLogs] = useState([]);
-    const [visible, setVisible] = useState(initialVisible ?? controlledVisible ?? false);
+    const [visible, setVisible] = useState(controlledVisible ?? initialVisible ?? false);
     useEffect(() => {
         if (controlledVisible !== undefined) {
             setVisible(controlledVisible);
@@ -743,22 +743,26 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const useNativeFab = (Platform.OS === 'ios' || Platform.OS === 'android') && isNativeModule;
     // 100% Native Main-Thread Floating Button Lifecycle
     useEffect(() => {
-        if (!useNativeFab || !isEnabled || !enabled) {
+        if (!useNativeFab || !enabled) {
             if (useNativeFab) {
-                hideNativeFloatingButton();
+                hideNativeFloatingButton().catch(() => { });
             }
             return;
         }
         if (visible) {
-            hideNativeFloatingButton();
+            hideNativeFloatingButton().catch(() => { });
         }
         else {
-            showNativeFloatingButton();
-            setNativeFloatingButtonBadge(logs.length > 0 || analyticsEvents.length > 0);
+            showNativeFloatingButton().catch(() => { });
+            setNativeFloatingButtonBadge(logs.length > 0 || analyticsEvents.length > 0).catch(() => { });
         }
+        return () => {
+            if (useNativeFab) {
+                hideNativeFloatingButton().catch(() => { });
+            }
+        };
     }, [
         useNativeFab,
-        isEnabled,
         enabled,
         visible,
         logs.length,
@@ -817,20 +821,11 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             if (freshCrashes.length > 0) {
                 setCrashRecords(freshCrashes);
             }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-    useEffect(() => {
-        if (visible) {
-            const task = InteractionManager.runAfterInteractions(() => {
+            const frame = requestAnimationFrame(() => {
                 setIsReady(true);
             });
-            const fallbackTimer = setTimeout(() => {
-                setIsReady(true);
-            }, 350);
             return () => {
-                task.cancel();
-                clearTimeout(fallbackTimer);
+                cancelAnimationFrame(frame);
             };
         }
         else {
@@ -1666,7 +1661,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setVisible,
         closeModal,
         isReady,
-        isEnabled,
+        enabled,
+        isEnabled: enabled,
         appIcon,
         environment,
         modalHeightPercent,
@@ -1843,14 +1839,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     </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;
+    useEffect(() => {
+        if (!enabled) {
+            hideNativeFloatingButton().catch(() => { });
+        }
+        return () => {
+            hideNativeFloatingButton().catch(() => { });
+        };
+    }, [enabled]);
+    // If enabled is false, return null immediately with 0 overhead
+    if (!enabled) {
         return null;
     }
     return (<I18nextProvider i18n={i18n}>
       <ErrorBoundary fallbackType="inline">
-        <NetworkInspector {...props}/>
+        <NetworkInspector {...props} enabled={enabled}/>
       </ErrorBoundary>
     </I18nextProvider>);
 };

package/dist/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",

package/src/components/Inspector/MainScreen.tsx

@@ -21,6 +21,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';
@@ -51,7 +52,7 @@ const MainScreen = () => {
     settingsPage,
     activeTab,
     isReady,
-    isEnabled,
+    enabled,
     useNativeFab,
     hasNavigationContext,
     setNavState,
@@ -104,7 +105,7 @@ const MainScreen = () => {
   return (
     <>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
-        isEnabled &&
+        enabled &&
         !visible &&
         !useNativeFab && <FabLauncher />}
       <Modal
@@ -137,11 +138,11 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{flex: 1}}>
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
+                {!isDetailActive && <TabBar />}
+
                 {isReady ? (
                   <View style={{flex: 1}}>
-                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-                    {!isDetailActive && <TabBar />}
-
                     {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
                     <Animated.View
                       style={[
@@ -207,12 +208,7 @@ const MainScreen = () => {
                     )}
                   </View>
                 ) : (
-                  <View style={styles.empty}>
-                    <ActivityIndicator size="large" color={AppColors.purple} />
-                    <Text style={[styles.emptySub, {marginTop: 12}]}>
-                      Loading logs...
-                    </Text>
-                  </View>
+                  <SkeletonPlaceholder />
                 )}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}

package/src/components/Inspector/StorageTab.tsx

@@ -3,6 +3,7 @@ import {
   View,
   Text,
   ScrollView,
+  FlatList,
   TextInput,
   Modal,
   Alert,
@@ -43,6 +44,131 @@ import {
 import {copyToClipboard} from '../../helpers';
 import {showToast} from '../../helpers/toast';
 
+const getTypeBadge = (type: StorageEntry['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,
+}: {
+  entry: StorageEntry;
+  isExpanded: boolean;
+  onToggleExpand: (key: string) => void;
+  onCopy: (entry: StorageEntry) => void;
+  onEdit: (entry: StorageEntry) => void;
+  onDelete: (key: string) => void;
+  badge: {label: string; color: string; bg: string};
+}) {
+  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<StorageDriver>('asyncStorage');
@@ -235,20 +361,25 @@ export const StorageTab = React.memo(() => {
     return `${(totalBytes / (1024 * 1024)).toFixed(2)} MB`;
   }, [totalBytes]);
 
-  const getTypeBadge = (type: StorageEntry['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: StorageEntry) => {
+    copyToClipboard(entry.value, entry.key);
+    showToast(`Copied value of "${entry.key}"`);
+  }, []);
+
+  const renderItem = useCallback(
+    ({item}: {item: StorageEntry}) => (
+      <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'
@@ -423,110 +554,35 @@ export const StorageTab = React.memo(() => {
           <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
+        <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}>
-          {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>
+          showsVerticalScrollIndicator={false}
+          ListEmptyComponent={
+            <View style={styles.emptyContainer}>
+              <View style={styles.emptyIconWrap}>
+                <DatabaseIcon size={28} color={AppColors.grayTextWeak} />
               </View>
-            );
-          })}
-          <View style={{height: 60}} />
-        </ScrollView>
+              <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 ── */}