react-native-inapp-inspector 2.2.8 → 2.3.0

package/dist/esm/index.js

@@ -8,12 +8,12 @@ import ErrorBoundary from './components/ErrorBoundary';
 import MainScreen from './components/Inspector/MainScreen';
 import { InspectorContext, animateNextLayout, } from './components/Inspector/InspectorContext';
 // Helpers
-import { formatDisplayUrl, getNavigationInfo, deduplicateLogs, getDomainColor, getEventCategory, matchNetworkLogQuery, setupMemoryWarningHandler, } from './helpers';
+import { formatDisplayUrl, getNavigationInfo, getLogPageName, deduplicateLogs, getDomainColor, getEventCategory, matchNetworkLogQuery, setupMemoryWarningHandler, } from './helpers';
 // #5 — settings persistence
 import { loadSettings, saveSettings, setCustomStorage, clearPersistedSettings, calculateRamBasedLimits, } from './helpers/settingsStore';
 import { getNativeSystemMetrics, pushNativeLogRecord, fetchNativeCachedPage, } from './native/NativeInspector';
 // Network
-import { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, setNetworkModuleEnabled, setMaxNetworkLogsLimit, } from './customHooks/networkLogger';
+import { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, setNetworkModuleEnabled, setMaxNetworkLogsLimit, setRouteInfoProvider, } from './customHooks/networkLogger';
 // Console
 import { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, setConsoleModuleEnabled, } from './customHooks/consoleLogger';
 import { IGNORED_LOG_PREFIXES } from './customHooks/logFilters';
@@ -183,8 +183,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         bundle: false,
         performance: false,
         crash: false,
-        device: true,
-        storage: true,
+        device: false,
+        storage: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = useState(100);
     const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(75);
@@ -239,8 +239,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             bundle: false,
             performance: false,
             crash: false,
-            device: true,
-            storage: true,
+            device: false,
+            storage: false,
         });
         setDefaultTab('apis');
         setIsAutoRamLimitEnabled(true);
@@ -314,6 +314,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                         bundle: false,
                         performance: false,
                         crash: false,
+                        device: false,
+                        storage: false,
                     },
                     ...(saved.tabVisibility || {}),
                     apis: true,
@@ -539,12 +541,21 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const navigationContext = React.useContext(NavigationContext);
     const hasNavigationContext = navigationContext !== undefined;
     const currentRouteRef = useRef({
-        path: 'Navigators',
+        path: '',
         params: null,
     });
+    useEffect(() => {
+        setRouteInfoProvider(() => currentRouteRef.current);
+        return () => {
+            setRouteInfoProvider(null);
+        };
+    }, []);
     useEffect(() => {
         if (navState) {
-            currentRouteRef.current = getNavigationInfo(navState);
+            const info = getNavigationInfo(navState);
+            if (info?.path) {
+                currentRouteRef.current = info;
+            }
         }
     }, [navState]);
     useEffect(() => {
@@ -553,9 +564,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         const updateState = () => {
             try {
                 if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
+                    const currentRoute = typeof navigationRef.getCurrentRoute === 'function'
+                        ? navigationRef.getCurrentRoute()
+                        : null;
+                    if (currentRoute?.name) {
+                        currentRouteRef.current = {
+                            path: currentRoute.name,
+                            params: currentRoute.params || null,
+                        };
+                    }
                     const state = navigationRef.getRootState();
                     if (state) {
                         setNavState(state);
+                        const routeInfo = getNavigationInfo(state);
+                        if (routeInfo?.path) {
+                            currentRouteRef.current = routeInfo;
+                        }
                     }
                 }
             }
@@ -867,7 +891,9 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (freshIds.size > 0) {
                     freshIds.forEach(id => {
                         if (!logRouteMapRef.current.has(id)) {
-                            logRouteMapRef.current.set(id, currentRouteRef.current);
+                            const matchedLog = deduped.find(l => l.id === id);
+                            const resolvedRoute = matchedLog?.routeInfo || currentRouteRef.current;
+                            logRouteMapRef.current.set(id, resolvedRoute);
                         }
                     });
                     setNewLogIds(freshIds);
@@ -880,6 +906,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 const deduped = deduplicateLogs(raw);
                 const incoming = new Set(deduped.map(l => l.id));
                 prevLogIdsRef.current = incoming;
+                deduped.forEach(l => {
+                    if (!logRouteMapRef.current.has(l.id)) {
+                        const resolvedRoute = l?.routeInfo || currentRouteRef.current;
+                        logRouteMapRef.current.set(l.id, resolvedRoute);
+                    }
+                });
                 setLogs(deduped);
             }
             else {
@@ -1151,8 +1183,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         const groups = [];
         for (let i = 0; i < filteredLogs.length; i++) {
             const log = filteredLogs[i];
-            const routeInfo = logRouteMapRef.current.get(log.id);
-            const pageName = routeInfo?.path || 'Navigators';
+            const routeInfo = logRouteMapRef.current.get(log.id) || log?.routeInfo;
+            const pageName = getLogPageName(log, routeInfo);
             if (groups.length === 0 ||
                 groups[groups.length - 1].pageName !== pageName) {
                 groups.push({ pageName, color: getDomainColor(pageName), logs: [] });
@@ -1405,7 +1437,28 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                     log.type || '',
                     log.sourceMethod || '',
                 ].join(' ').toLowerCase();
-                return queryTokens.every(token => searchTarget.includes(token));
+                return queryTokens.every(token => {
+                    if (token.startsWith('level:') || token.startsWith('is:') || token.startsWith('type:')) {
+                        const flag = token.replace(/^(level:|is:|type:)/, '').trim();
+                        if (flag === 'error' || flag === 'err')
+                            return log.type === 'error';
+                        if (flag === 'warn' || flag === 'warning')
+                            return log.type === 'warn';
+                        if (flag === 'info')
+                            return log.type === 'info';
+                        if (flag === 'log')
+                            return log.sourceMethod === 'log';
+                        if (flag === 'analytics')
+                            return (log.message || '').toLowerCase().includes('[analytics');
+                    }
+                    if (token === 'error' || token === 'err') {
+                        return log.type === 'error' || searchTarget.includes(token);
+                    }
+                    if (token === 'warn' || token === 'warning') {
+                        return log.type === 'warn' || searchTarget.includes(token);
+                    }
+                    return searchTarget.includes(token);
+                });
             });
         }
         // #7 — apply sort order (newest/oldest first)
@@ -1824,3 +1877,6 @@ export { setMaxPerformanceEventsLimit, getMaxPerformanceEventsLimit, prunePerfor
 export { BrandSquareIcon, BrandCircleIcon, } from './components/NetworkIcons';
 export { connectAsyncStorage, connectMMKV, isAsyncStorageConnected, isMMKVConnected, getRegisteredMMKVInstanceIds, fetchStorageEntries, setStorageEntry, removeStorageEntry, clearStorageDriver, subscribeToStorageChanges, } from './customHooks/storageInspector';
 export { ActiveTab, Method, StatusFilter, SortOrder, LocalFilter, ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, ConsoleLogType, AnalyticsEventSource, GAEventCategory, StackFrameType, DiffResultType, BundleSubTab, PerformanceSubTab, CrashType, CrashExportFormat, CrashDetailSubTab, CrashFilterType, BreadcrumbType, } from './types';
+export { AppFonts, setAppFonts, } from './styles/AppFonts';
+export { AppColors, setAppColors, getThemeColors, updateAppColorsTheme, } from './styles/AppColors';
+export { t, i18n, useTranslation, setLanguage, addTranslations, setTranslations, I18nextProvider, } from './i18n';

package/dist/esm/native/NativeInspector.js

@@ -138,6 +138,19 @@ export const subscribeNativeFloatingButtonPress = (callback) => {
         }
         catch (e) { }
     }
+    // Active Bridgeless / TurboModule tap detection
+    const interval = setInterval(async () => {
+        if (NativeModule && NativeModule.checkFloatingButtonPress) {
+            try {
+                const pressed = await NativeModule.checkFloatingButtonPress();
+                if (pressed) {
+                    callback();
+                }
+            }
+            catch (e) { }
+        }
+    }, 180);
+    cleanups.push(() => clearInterval(interval));
     return () => {
         cleanups.forEach(fn => {
             try {

package/dist/esm/native/NativeNetworkInspector.d.ts

@@ -14,7 +14,7 @@ export interface Spec extends TurboModule {
     triggerHaptic(style: string): Promise<boolean>;
     getNativeSystemMetrics(): Promise<Object>;
     pushNativeLogRecord(pageKey: string, jsonPayload: string): Promise<boolean>;
-    getNativeCachedPage(pageKey: string, offset: number, limit: number, query: string): Promise<string>;
+    checkFloatingButtonPress(): Promise<boolean>;
     addListener(eventName: string): void;
     removeListeners(count: number): void;
 }

package/dist/esm/styles/AppColors.d.ts

@@ -344,4 +344,8 @@ export declare const getThemeColors: (isDark: boolean) => {
 };
 export declare const AppColors: typeof LightColors;
 export declare const updateAppColorsTheme: (isDark: boolean) => void;
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+export declare const setAppColors: (customColors: Partial<typeof LightColors>) => void;
 export default AppColors;

package/dist/esm/styles/AppColors.js

@@ -384,4 +384,13 @@ Object.assign(AppColors, LightColors);
 export const updateAppColorsTheme = (isDark) => {
     Object.assign(AppColors, getThemeColors(isDark));
 };
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+export const setAppColors = (customColors) => {
+    if (!customColors || typeof customColors !== 'object')
+        return;
+    Object.assign(AppColors, customColors);
+    Object.assign(LightColors, customColors);
+};
 export default AppColors;

package/dist/esm/styles/AppFonts.d.ts

@@ -1,7 +1,18 @@
+export interface AppFontConfig {
+    interRegular?: string;
+    interMedium?: string;
+    interBold?: string;
+    Sfprotext?: string;
+}
 export declare const AppFonts: {
     interRegular: string;
     interMedium: string;
     interBold: string;
     Sfprotext: string;
 };
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+export declare const setAppFonts: (customFonts: Partial<typeof AppFonts>) => void;
 export default AppFonts;

package/dist/esm/styles/AppFonts.js

@@ -4,4 +4,13 @@ export const AppFonts = {
     interBold: 'Inter-Bold',
     Sfprotext: 'Inter-Regular',
 };
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+export const setAppFonts = (customFonts) => {
+    if (!customFonts || typeof customFonts !== 'object')
+        return;
+    Object.assign(AppFonts, customFonts);
+};
 export default AppFonts;

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

@@ -106,6 +106,7 @@ export interface NetworkLog {
     /** Client identifier: axios, fetch, xhr, apollo, etc. */
     client?: 'axios' | 'fetch' | 'xhr' | 'apollo' | 'graphql' | string;
     caller?: string;
+    routeInfo?: RouteInfo;
 }
 export interface RouteInfo {
     path: string;

package/ios/NetworkInspectorModule.mm

@@ -5,6 +5,7 @@
 
 static NetworkInspectorModule *sharedInstance = nil;
 static NSUncaughtExceptionHandler *previousUncaughtExceptionHandler = NULL;
+static BOOL g_floatingButtonPressed = NO;
 
 @interface InAppInspectorFloatingView : UIView
 @property (nonatomic, copy) void (^onTapBlock)(void);
@@ -410,6 +411,7 @@ RCT_EXPORT_MODULE(NetworkInspectorModule);
 
 - (void)safeSendEvent:(NSString *)eventName body:(id)body {
     if (!hasListeners) return;
+    if (self.bridge == nil) return;
     @try {
         [self sendEventWithName:eventName body:body];
     } @catch (NSException *ex) {
@@ -598,8 +600,9 @@ RCT_EXPORT_METHOD(showFloatingButton:(NSDictionary *)options
 
         __weak NetworkInspectorModule *weakSelf = self;
         floatingButtonView.onTapBlock = ^{
+            g_floatingButtonPressed = YES;
             NetworkInspectorModule *strongSelf = weakSelf ?: sharedInstance;
-            if (strongSelf) {
+            if (strongSelf && strongSelf.bridge != nil) {
                 [strongSelf safeSendEvent:@"onFloatingButtonPress" body:@{}];
             }
         };
@@ -674,6 +677,13 @@ RCT_EXPORT_METHOD(setFloatingButtonPosition:(double)x y:(double)y
     });
 }
 
+RCT_EXPORT_METHOD(checkFloatingButtonPress:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject) {
+    BOOL pressed = g_floatingButtonPressed;
+    g_floatingButtonPressed = NO;
+    resolve(@(pressed));
+}
+
 RCT_EXPORT_METHOD(startFpsMonitoring:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject) {
     dispatch_async(dispatch_get_main_queue(), ^{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "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/AppHeaderLogo.tsx

@@ -34,8 +34,12 @@ export const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({
       return (
         <View
           style={[
-            logoStyles.container,
-            {width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28)},
+            logoStyles.svgContainer,
+            {
+              width: size,
+              height: size,
+              borderRadius: Math.round(size * 0.23),
+            },
           ]}>
           {clonedIcon}
         </View>
@@ -44,8 +48,12 @@ export const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({
     return (
       <View
         style={[
-          logoStyles.container,
-          {width: size, height: size, borderRadius: Math.round(size * 0.28)},
+          logoStyles.imageContainer,
+          {
+            width: size,
+            height: size,
+            borderRadius: Math.round(size * 0.23),
+          },
         ]}>
         <Image
           source={customIcon as ImageSourcePropType}
@@ -65,7 +73,15 @@ export const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({
     });
 
     return (
-      <View style={[logoStyles.container, {width: size, height: size}]}>
+      <View
+        style={[
+          logoStyles.imageContainer,
+          {
+            width: size,
+            height: size,
+            borderRadius: Math.round(size * 0.23),
+          },
+        ]}>
         <Image
           source={nativeSource}
           style={logoStyles.image}
@@ -80,8 +96,12 @@ export const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({
   return (
     <View
       style={[
-        logoStyles.container,
-        {width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28)},
+        logoStyles.svgContainer,
+        {
+          width: size,
+          height: size,
+          borderRadius: Math.round(size * 0.23),
+        },
       ]}>
       <BrandSquareIcon size={size} />
     </View>
@@ -89,20 +109,34 @@ export const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({
 };
 
 const logoStyles = StyleSheet.create({
-  container: {
-    borderRadius: 10,
+  svgContainer: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  imageContainer: {
     overflow: 'hidden',
     backgroundColor: 'rgba(255, 255, 255, 0.15)',
     borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.28)',
-    padding: 2.5,
+    borderColor: 'rgba(255, 255, 255, 0.35)',
+    padding: 2,
     alignItems: 'center',
     justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
   },
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: 7.5,
+    borderRadius: 8,
   },
 });