react-native-inapp-inspector 2.2.9 → 2.3.1

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'
@@ -357,9 +488,27 @@ export const StorageTab = React.memo(() => {
             clearButtonMode="while-editing"
           />
           {search.length > 0 && (
-            <TouchableScale onPress={() => setSearch('')} hitSlop={8}>
-              <ClearIcon size={13} color={AppColors.grayTextWeak} />
-            </TouchableScale>
+            <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>
 
@@ -405,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 ── */}

package/src/components/JsonViewer.tsx

@@ -6,6 +6,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
@@ -260,6 +261,7 @@ const JsonViewer = React.memo(({
               setMode(key as 'pretty' | 'raw' | 'table')
             }
           />
+          <CopyButton value={data} label="JSON" />
         </View>
       )}
 

package/src/components/MetaAccordion.tsx

@@ -27,6 +27,7 @@ import {
 
 // Components
 import TouchableScale from './TouchableScale';
+import CopyButton from './CopyButton';
 
 // Stylesheet
 import {AppColors} from '../styles/AppColors';
@@ -97,9 +98,23 @@ const MetaAccordion = ({
       <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/src/components/SkeletonPlaceholder.tsx

@@ -0,0 +1,206 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {AppColors} from '../styles/AppColors';
+
+interface SkeletonPlaceholderProps {
+  cardCount?: number;
+}
+
+const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({
+  cardCount = 4,
+}: SkeletonPlaceholderProps) {
+  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/src/constants/version.ts

@@ -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.2.9';
+export const LIB_VERSION = '2.3.1';

package/src/customHooks/networkLogger.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
 import {setupGlobalCrashHandler} from "./crashHandler";
+import {RouteInfo} from "../types";
 
 type NetworkLog = {
   id: number;
@@ -14,12 +15,20 @@ type NetworkLog = {
   client?: string; // ✅ Captures request client: axios, fetch, xhr, apollo, etc.
   requestHeaders?: Record<string, string>;
   responseHeaders?: Record<string, string>;
+  routeInfo?: RouteInfo;
 };
 
 let logs: NetworkLog[] = [];
 let listeners: ((logs: NetworkLog[]) => void)[] = [];
 let counter = 0;
 let isNetworkModuleEnabled = true;
+let currentRouteProvider: (() => RouteInfo | null) | null = null;
+
+export const setRouteInfoProvider = (
+  provider: (() => RouteInfo | null) | null,
+) => {
+  currentRouteProvider = provider;
+};
 
 export const setNetworkModuleEnabled = (enabled: boolean) => {
   isNetworkModuleEnabled = enabled;
@@ -232,6 +241,8 @@ export const setupNetworkLogger = () => {
           client = 'axios';
         }
 
+        const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
+
         addOrUpdateLog({
           id,
           url: finalUrl,
@@ -239,6 +250,7 @@ export const setupNetworkLogger = () => {
           startTime: start,
           caller,
           client,
+          routeInfo: currentRoute || undefined,
           request: method === "GET" ? undefined : parseRequestData(options?.body),
           requestHeaders,
         });
@@ -347,6 +359,8 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
     config.__logStart = start;
     config.__logCaller = caller;
 
+    const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
+
     addOrUpdateLog({
       id,
       url,
@@ -354,6 +368,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
       startTime: start,
       caller,
       client: 'axios',
+      routeInfo: currentRoute || undefined,
       request: method === "GET" ? undefined : parseRequestData(config.data),
       requestHeaders: normaliseHeaders(config.headers),
     });