react-native-inapp-inspector 2.2.9 → 2.3.0

package/src/components/Inspector/NetworkTab.tsx

@@ -665,7 +665,7 @@ const NetworkTab = React.memo(() => {
                       style={{
                         backgroundColor: `${AppColors.purple}20`,
                         borderRadius: 10,
-                        paddingHorizontal: 5,
+                        paddingHorizontal: 6,
                         paddingVertical: 1.5,
                       }}>
                       <Text
@@ -759,19 +759,130 @@ const NetworkTab = React.memo(() => {
                       styles.toolbarBtnActive,
                   ]}
                   onPress={filtersAccordion.toggleOpen}
-                  hitSlop={10}>
+                  hitSlop={6}>
                   <FilterIcon
                     color={
                       filtersAccordion.isOpen
                         ? AppColors.purple
                         : AppColors.grayTextStrong
                     }
-                    size={18}
+                    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
@@ -1138,8 +1249,22 @@ const NetworkTab = React.memo(() => {
         ListEmptyComponent={
           <EmptyState
             isSearch={
-              search.length > 0 || statusFilters.size > 0
+              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={

package/src/components/Inspector/ReduxTab.tsx

@@ -548,14 +548,32 @@ const ReduxTab = React.memo(() => {
               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>
+              <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>
 

package/src/components/Inspector/SettingsPanel.tsx

@@ -207,8 +207,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
@@ -221,8 +221,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]);
 

package/src/components/Inspector/StorageTab.tsx

@@ -357,9 +357,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>
 

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/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.0';

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),
     });

package/src/helpers/index.ts

@@ -198,16 +198,37 @@ export const getNavigationInfo = (
   state: any,
   path: string[] = [],
 ): RouteInfo => {
-  if (!state?.routes) {
+  if (!state) {
     return {
-      path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+      path: path.length > 0 ? path.join(' ➔ ') : '',
       params: null,
     };
   }
-  const route = state.routes[state.index ?? 0];
+  if (state.name && !state.routes) {
+    const fullPath =
+      path.length > 0 ? [...path, state.name].join(' ➔ ') : state.name;
+    return {path: fullPath, params: state.params || null};
+  }
+  if (
+    !state.routes ||
+    !Array.isArray(state.routes) ||
+    state.routes.length === 0
+  ) {
+    return {
+      path: path.length > 0 ? path.join(' ➔ ') : '',
+      params: null,
+    };
+  }
+  const index =
+    typeof state.index === 'number' &&
+    state.index >= 0 &&
+    state.index < state.routes.length
+      ? state.index
+      : 0;
+  const route = state.routes[index];
   if (!route) {
     return {
-      path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+      path: path.length > 0 ? path.join(' ➔ ') : '',
       params: null,
     };
   }
@@ -217,10 +238,96 @@ export const getNavigationInfo = (
     return getNavigationInfo(route.state, currentPath);
   }
   const resolved =
-    currentPath.length > 0 ? currentPath.join(' ➔ ') : 'Navigators';
+    currentPath.length > 0 ? currentPath.join(' ➔ ') : route.name || '';
   return {path: resolved, params: route.params || null};
 };
 
+export const getLogPageName = (
+  log: NetworkLog,
+  routeInfo?: RouteInfo | null,
+): string => {
+  // 1. If routeInfo has a valid path, resolve the leaf screen name
+  const effectiveRoute = routeInfo || (log as any)?.routeInfo;
+  if (
+    effectiveRoute &&
+    effectiveRoute.path &&
+    effectiveRoute.path !== 'Navigators'
+  ) {
+    const parts = effectiveRoute.path
+      .split(' ➔ ')
+      .map((s: string) => s.trim())
+      .filter(Boolean);
+    if (parts.length > 0) {
+      return parts[parts.length - 1]; // Leaf screen name, e.g. "HomeScreen", "ProfileScreen"
+    }
+    return effectiveRoute.path;
+  }
+
+  // 2. Extract screen / component name from log.caller stack trace
+  if (log.caller && log.caller !== 'Unknown') {
+    try {
+      const match = log.caller.match(/([^/\\]+)\.(tsx|jsx|ts|js)/i);
+      if (match && match[1]) {
+        const file = match[1];
+        const ignored = [
+          'networklogger',
+          'fetch',
+          'axios',
+          'apiclient',
+          'request',
+          'http',
+          'index',
+          'nativeinspector',
+          'inappinspector',
+          'bundleanalyzer',
+        ];
+        if (!ignored.includes(file.toLowerCase())) {
+          return file;
+        }
+      }
+    } catch (e) {}
+  }
+
+  // 3. Fallback to API resource / endpoint category from URL
+  if (log.url) {
+    try {
+      const cleanUrl = log.url.split('?')[0].split('#')[0];
+      const withoutProto = cleanUrl.replace(/^https?:\/\//i, '');
+      const slashIdx = withoutProto.indexOf('/');
+      if (slashIdx !== -1) {
+        const pathSegments = withoutProto
+          .substring(slashIdx + 1)
+          .split('/')
+          .filter(Boolean);
+        const ignoredSegments = [
+          'api',
+          'v1',
+          'v2',
+          'v3',
+          'v4',
+          'rest',
+          'graphql',
+          'json',
+          'data',
+          'service',
+          'app',
+        ];
+        const meaningful = pathSegments.filter(
+          s => !ignoredSegments.includes(s.toLowerCase()),
+        );
+        if (meaningful.length > 0) {
+          const seg = meaningful[0];
+          return seg.charAt(0).toUpperCase() + seg.slice(1);
+        }
+      }
+      const host = withoutProto.split('/')[0];
+      if (host) return host;
+    } catch (e) {}
+  }
+
+  return 'General';
+};
+
 export const flattenObject = (obj: any, prefix = ''): Record<string, any> => {
   let result: Record<string, any> = {};
   if (typeof obj === 'object' && obj !== null) {
@@ -409,6 +516,107 @@ export const getAppName = (): string => {
   return 'App';
 };
 
+export const getAppVersionAndBuild = (): {
+  version: string;
+  build: string;
+  formatted: string;
+} => {
+  let version = '';
+  let build = '';
+
+  // 1. Try ExpoApplication / ExponentConstants
+  const ExpoApplication = NativeModules.ExpoApplication;
+  if (ExpoApplication) {
+    if (typeof ExpoApplication.nativeAppVersion === 'string') {
+      version = ExpoApplication.nativeAppVersion;
+    }
+    if (typeof ExpoApplication.nativeBuildVersion === 'string') {
+      build = ExpoApplication.nativeBuildVersion;
+    }
+  }
+
+  const ExponentConstants = NativeModules.ExponentConstants;
+  if (ExponentConstants) {
+    const manifest = ExponentConstants.manifest || ExponentConstants.expoConfig;
+    if (manifest) {
+      if (!version && manifest.version) {
+        version = String(manifest.version);
+      }
+      if (!build) {
+        if (manifest.ios?.buildNumber) {
+          build = String(manifest.ios.buildNumber);
+        } else if (manifest.android?.versionCode) {
+          build = String(manifest.android.versionCode);
+        }
+      }
+    }
+  }
+
+  // 2. Try react-native-device-info
+  const RNDeviceInfo = NativeModules.RNDeviceInfo;
+  if (RNDeviceInfo) {
+    if (!version) {
+      if (typeof RNDeviceInfo.appVersion === 'string') {
+        version = RNDeviceInfo.appVersion;
+      } else if (typeof RNDeviceInfo.getVersion === 'function') {
+        try {
+          version = RNDeviceInfo.getVersion();
+        } catch (e) {}
+      }
+    }
+    if (!build) {
+      if (typeof RNDeviceInfo.buildNumber === 'string') {
+        build = RNDeviceInfo.buildNumber;
+      } else if (typeof RNDeviceInfo.getBuildNumber === 'function') {
+        try {
+          build = RNDeviceInfo.getBuildNumber();
+        } catch (e) {}
+      }
+    }
+  }
+
+  // 3. Try PlatformConstants / Platform.constants
+  const constants =
+    (Platform.constants as any) || NativeModules.PlatformConstants;
+  if (constants) {
+    if (
+      !version &&
+      constants.Version &&
+      typeof constants.Version === 'string' &&
+      constants.Version.includes('.')
+    ) {
+      version = constants.Version;
+    }
+    if (!version && constants.reactNativeVersion) {
+      const rnv = constants.reactNativeVersion;
+      if (rnv.major !== undefined) {
+        version = `${rnv.major}.${rnv.minor}.${rnv.patch}`;
+      }
+    }
+  }
+
+  // 4. Try Android AppInfo
+  const AppInfo = NativeModules.AppInfo;
+  if (AppInfo) {
+    if (!version && typeof AppInfo.versionName === 'string') {
+      version = AppInfo.versionName;
+    }
+    if (!build && typeof AppInfo.versionCode === 'string') {
+      build = AppInfo.versionCode;
+    }
+  }
+
+  // Fallbacks
+  if (!version) version = '1.0.0';
+  if (!build) build = '1';
+
+  return {
+    version,
+    build,
+    formatted: `${version} (${build})`,
+  };
+};
+
 export const handleOpenExternalLink = (url: string): void => {
   if (!url) return;
   const openUrl = formatDisplayUrl(url);