react-native-inapp-inspector 1.1.8 → 1.1.9

package/README.md

@@ -125,6 +125,32 @@ If no `storage` prop is passed, Android will fall back to an in-memory store (se
 
 ---
 
+## Navigation & Screen Tracking
+
+To group network requests, console logs, and analytics events by the specific navigation screen where they occurred, the inspector automatically hooks into React Navigation context.
+
+If you mount `<NetworkInspector />` globally at the root of your application (outside of the `<NavigationContainer>`), it won't have access to React Navigation's context. To enable accurate screen tracking in this setup, create a navigation ref and pass it to the `navigationRef` prop:
+
+```tsx
+import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
+import NetworkInspector from 'react-native-inapp-inspector';
+
+const navigationRef = createNavigationContainerRef();
+
+const App = () => {
+  return (
+    <>
+      <NavigationContainer ref={navigationRef}>
+        {/* Navigators / Screens */}
+      </NavigationContainer>
+      <NetworkInspector navigationRef={navigationRef} />
+    </>
+  );
+};
+```
+
+---
+
 ## Network Logging
 
 `setupNetworkLogger()` patches global `fetch`, the default axios instance, and future axios instances created with `axios.create()`.
@@ -272,8 +298,11 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
 | `clearAnalyticsEvents()`                            | function          | Clears captured analytics events.                                          |
 | `subscribeAnalyticsEvents(callback)`                | function          | Subscribes to analytics event updates and returns an unsubscribe function. |
 | `connectReduxStore(store)`                          | function          | Connects a Redux store for live state and action inspection.               |
+| `inspectorReduxMiddleware`                          | middleware        | Redux middleware to capture actions dispatched from thunks/sagas.          |
 | `getReduxState()`                                   | function          | Returns the latest captured Redux state.                                   |
 | `subscribeReduxState(callback)`                     | function          | Subscribes to Redux state updates and returns an unsubscribe function.     |
+| `getActionHistory()`                                | function          | Returns the recent dispatched Redux actions.                               |
+| `clearActionHistory()`                              | function          | Clears the Redux action history.                                           |
 | `WebView`                                           | component         | Instrumented WebView wrapper.                                              |
 | `getWebViewLogs()`                                  | function          | Returns captured WebView console logs.                                     |
 | `getWebViewNavHistory()`                            | function          | Returns captured WebView navigation history.                               |
@@ -300,11 +329,21 @@ npm run ios
 
 ---
 
-## Support
+## Contributing 🤝
+
+Contributions are welcome! Please check out our [Contributing Guidelines](CONTRIBUTING.md) to learn how to get started, set up the development environment, or request features.
+
+---
+
+## Support & Sponsoring 💖
+
+This library is a completely free, open-source utility maintained in the author's spare time. If this tool has saved you or your team hours of debugging, please consider supporting its continuous development.
+
+Sponsoring helps prioritize your bug fixes, maintain compatibility with new React Native versions, and support new features.
 
-If you find this project useful, consider sponsoring its development:
+👉 **[Sponsor @vengatmacuser on GitHub Sponsors](https://github.com/sponsors/vengatmacuser)**
 
-[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-@vengatmacuser-ea4aaa?logo=githubsponsors&logoColor=white)](https://github.com/sponsors/vengatmacuser)
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-@vengatmacuser-ea4aaa?logo=githubsponsors&logoColor=white&style=for-the-badge)](https://github.com/sponsors/vengatmacuser)
 
 ---
 

package/dist/commonjs/components/LogCard.js

@@ -43,6 +43,7 @@ const AppColors_1 = require("../styles/AppColors");
 const constants_1 = require("../constants");
 const helpers_1 = require("../helpers");
 const NetworkIcons_1 = require("./NetworkIcons");
+const AppFonts_1 = require("../styles/AppFonts");
 const styles_1 = __importDefault(require("../styles"));
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
@@ -74,6 +75,8 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
         }
     }, [isNew]);
     const path = (0, helpers_1.getPath)(item.url);
+    const baseUrl = (0, helpers_1.getBaseUrl)(item.url) || item.url;
+    const showPathRow = baseUrl !== item.url && path !== '/';
     const triggeredAt = (0, helpers_1.formatDateTime)(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale_1.default onPress={onPress} style={[
@@ -102,7 +105,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             </react_native_1.Text>
           </react_native_1.View>
 
-          <HighlightText_1.default text={path} search={searchStr} style={styles_1.default.urlPathText} highlightStyle={styles_1.default.highlight}/>
+          <HighlightText_1.default text={baseUrl} search={searchStr} style={styles_1.default.urlPathText} highlightStyle={styles_1.default.highlight} numberOfLines={0}/>
 
           {isJson && (<react_native_1.View style={[
                 styles_1.default.chip,
@@ -135,6 +138,16 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             </react_native_1.View>)}
         </react_native_1.View>
 
+        {showPathRow && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 3, marginBottom: 5, paddingLeft: 30, gap: 6 }}>
+            <react_native_1.Text style={{ color: AppColors_1.AppColors.grayTextWeak, fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, letterSpacing: 0.5, marginTop: 2.5 }}>PATH</react_native_1.Text>
+            <HighlightText_1.default text={path} search={searchStr} style={{
+                fontFamily: AppFonts_1.AppFonts.Sfprotext || 'System',
+                fontSize: 12,
+                color: AppColors_1.AppColors.grayText,
+                flex: 1,
+            }} highlightStyle={styles_1.default.highlight} numberOfLines={0}/>
+          </react_native_1.View>)}
+
         <react_native_1.View style={styles_1.default.cardBottomRow}>
           <react_native_1.View style={styles_1.default.cardDateRow}>
             <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.8";
+export declare const LIB_VERSION = "1.1.9";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.8';
+exports.LIB_VERSION = '1.1.9';

package/dist/commonjs/helpers/index.d.ts

@@ -6,6 +6,7 @@ export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
 export declare const copyToClipboard: (value: unknown, label: string) => void;
 export declare const getPath: (url: string) => string;
+export declare const getBaseUrl: (url: string) => string;
 export declare const getCurlCommand: (log: NetworkLog) => string;
 export declare const getFetchCommand: (log: NetworkLog) => string;
 export declare const deduplicateLogs: (raw: NetworkLog[]) => NetworkLog[];

package/dist/commonjs/helpers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatDateTime = exports.getDomainColor = void 0;
+exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatDateTime = exports.getDomainColor = void 0;
 const react_native_1 = require("react-native");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
@@ -83,6 +83,17 @@ const getPath = (url) => {
     }
 };
 exports.getPath = getPath;
+const getBaseUrl = (url) => {
+    try {
+        const u = new URL(url);
+        return `${u.protocol}//${u.host}`;
+    }
+    catch {
+        const match = url.match(/^(https?:\/\/[^/]+)/);
+        return match ? match[1] : '';
+    }
+};
+exports.getBaseUrl = getBaseUrl;
 const getCurlCommand = (log) => {
     let cmd = `curl -X ${log.method} "${log.url}"`;
     if (log.requestHeaders) {

package/dist/commonjs/index.js

@@ -152,7 +152,7 @@ const NavigationTracker = ({ onStateChange }) => {
 const animateNextLayout = () => {
     react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
 };
-const NetworkInspector = ({ enabled = true, storage, }) => {
+const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     // Set custom storage synchronously during render phase
     (0, settingsStore_1.setCustomStorage)(storage || null);
     const [isDark, setIsDark] = (0, react_1.useState)(false);
@@ -545,6 +545,36 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
             currentRouteRef.current = (0, helpers_1.getNavigationInfo)(navState);
         }
     }, [navState]);
+    (0, react_1.useEffect)(() => {
+        if (!navigationRef)
+            return;
+        const updateState = () => {
+            try {
+                if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
+                    const state = navigationRef.getRootState();
+                    if (state) {
+                        setNavState(state);
+                    }
+                }
+            }
+            catch (err) {
+                // Safe check
+            }
+        };
+        // Initialize state
+        updateState();
+        // Listen to changes
+        const unsubscribe = typeof navigationRef.addListener === 'function'
+            ? navigationRef.addListener('state', () => {
+                updateState();
+            })
+            : null;
+        return () => {
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
+    }, [navigationRef]);
     const logRouteMapRef = (0, react_1.useRef)(new Map());
     const prevLogIdsRef = (0, react_1.useRef)(new Set());
     const [newLogIds, setNewLogIds] = (0, react_1.useState)(new Set());

package/dist/commonjs/styles/index.d.ts

@@ -724,6 +724,9 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingVertical: number;
         borderRadius: number;
         marginRight: number;
+        minWidth: number;
+        alignItems: string;
+        justifyContent: string;
         shadowColor: string;
         shadowOffset: {
             width: number;

package/dist/commonjs/styles/index.js

@@ -689,10 +689,13 @@ const getRawStyles = (colors) => ({
         fontSize: 10,
     },
     methodBadge: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 8,
-        marginRight: 8,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 6,
+        marginRight: 6,
+        minWidth: 46,
+        alignItems: 'center',
+        justifyContent: 'center',
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.08,
@@ -701,8 +704,8 @@ const getRawStyles = (colors) => ({
     },
     methodBadgeText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        letterSpacing: 0.6,
+        fontSize: 9.5,
+        letterSpacing: 0.4,
     },
     timelineTrack: {
         height: 3,

package/dist/esm/components/LogCard.js

@@ -3,8 +3,9 @@ import { Animated, View, Pressable, Text, StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, getPath, formatDateTime, } from '../helpers';
+import { getStatusColor, getDurationColor, getPath, getBaseUrl, formatDateTime, } from '../helpers';
 import { CalendarIcon, ClockIcon } from './NetworkIcons';
+import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
@@ -36,6 +37,8 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
         }
     }, [isNew]);
     const path = getPath(item.url);
+    const baseUrl = getBaseUrl(item.url) || item.url;
+    const showPathRow = baseUrl !== item.url && path !== '/';
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
@@ -64,7 +67,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             </Text>
           </View>
 
-          <HighlightText text={path} search={searchStr} style={styles.urlPathText} highlightStyle={styles.highlight}/>
+          <HighlightText text={baseUrl} search={searchStr} style={styles.urlPathText} highlightStyle={styles.highlight} numberOfLines={0}/>
 
           {isJson && (<View style={[
                 styles.chip,
@@ -97,6 +100,16 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             </View>)}
         </View>
 
+        {showPathRow && (<View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 3, marginBottom: 5, paddingLeft: 30, gap: 6 }}>
+            <Text style={{ color: AppColors.grayTextWeak, fontSize: 9, fontFamily: AppFonts.interBold, letterSpacing: 0.5, marginTop: 2.5 }}>PATH</Text>
+            <HighlightText text={path} search={searchStr} style={{
+                fontFamily: AppFonts.Sfprotext || 'System',
+                fontSize: 12,
+                color: AppColors.grayText,
+                flex: 1,
+            }} highlightStyle={styles.highlight} numberOfLines={0}/>
+          </View>)}
+
         <View style={styles.cardBottomRow}>
           <View style={styles.cardDateRow}>
             <CalendarIcon color={AppColors.grayTextWeak} size={11}/>

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.8";
+export declare const LIB_VERSION = "1.1.9";

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 = '1.1.8';
+export const LIB_VERSION = '1.1.9';

package/dist/esm/helpers/index.d.ts

@@ -6,6 +6,7 @@ export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
 export declare const copyToClipboard: (value: unknown, label: string) => void;
 export declare const getPath: (url: string) => string;
+export declare const getBaseUrl: (url: string) => string;
 export declare const getCurlCommand: (log: NetworkLog) => string;
 export declare const getFetchCommand: (log: NetworkLog) => string;
 export declare const deduplicateLogs: (raw: NetworkLog[]) => NetworkLog[];

package/dist/esm/helpers/index.js

@@ -73,6 +73,16 @@ export const getPath = (url) => {
         return withoutDomain || '/';
     }
 };
+export const getBaseUrl = (url) => {
+    try {
+        const u = new URL(url);
+        return `${u.protocol}//${u.host}`;
+    }
+    catch {
+        const match = url.match(/^(https?:\/\/[^/]+)/);
+        return match ? match[1] : '';
+    }
+};
 export const getCurlCommand = (log) => {
     let cmd = `curl -X ${log.method} "${log.url}"`;
     if (log.requestHeaders) {

package/dist/esm/index.js

@@ -113,7 +113,7 @@ const NavigationTracker = ({ onStateChange }) => {
 const animateNextLayout = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 };
-const NetworkInspector = ({ enabled = true, storage, }) => {
+const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     // Set custom storage synchronously during render phase
     setCustomStorage(storage || null);
     const [isDark, setIsDark] = useState(false);
@@ -506,6 +506,36 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
             currentRouteRef.current = getNavigationInfo(navState);
         }
     }, [navState]);
+    useEffect(() => {
+        if (!navigationRef)
+            return;
+        const updateState = () => {
+            try {
+                if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
+                    const state = navigationRef.getRootState();
+                    if (state) {
+                        setNavState(state);
+                    }
+                }
+            }
+            catch (err) {
+                // Safe check
+            }
+        };
+        // Initialize state
+        updateState();
+        // Listen to changes
+        const unsubscribe = typeof navigationRef.addListener === 'function'
+            ? navigationRef.addListener('state', () => {
+                updateState();
+            })
+            : null;
+        return () => {
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
+    }, [navigationRef]);
     const logRouteMapRef = useRef(new Map());
     const prevLogIdsRef = useRef(new Set());
     const [newLogIds, setNewLogIds] = useState(new Set());

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

@@ -724,6 +724,9 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingVertical: number;
         borderRadius: number;
         marginRight: number;
+        minWidth: number;
+        alignItems: string;
+        justifyContent: string;
         shadowColor: string;
         shadowOffset: {
             width: number;

package/dist/esm/styles/index.js

@@ -653,10 +653,13 @@ export const getRawStyles = (colors) => ({
         fontSize: 10,
     },
     methodBadge: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 8,
-        marginRight: 8,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 6,
+        marginRight: 6,
+        minWidth: 46,
+        alignItems: 'center',
+        justifyContent: 'center',
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.08,
@@ -665,8 +668,8 @@ export const getRawStyles = (colors) => ({
     },
     methodBadgeText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        letterSpacing: 0.6,
+        fontSize: 9.5,
+        letterSpacing: 0.4,
     },
     timelineTrack: {
         height: 3,

package/example/App.tsx

@@ -9,7 +9,7 @@ import {
   useColorScheme,
 } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import axios from 'axios';
 import NetworkInspector, {
@@ -574,6 +574,7 @@ function WebViewScreen({ navigation }: any) {
 }
 
 const Stack = createNativeStackNavigator();
+const navigationRef = createNavigationContainerRef();
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
@@ -582,7 +583,7 @@ function App() {
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <ErrorBoundary>
-        <NavigationContainer>
+        <NavigationContainer ref={navigationRef}>
           <Stack.Navigator
             screenOptions={{
               headerShown: false,
@@ -597,7 +598,7 @@ function App() {
           </Stack.Navigator>
         </NavigationContainer>
         {/* Render inspector globally exactly once at the root level */}
-        <NetworkInspector />
+        <NetworkInspector navigationRef={navigationRef} />
       </ErrorBoundary>
     </SafeAreaProvider>
   );

package/example/package-lock.json

@@ -38,7 +38,7 @@
         "eslint": "^8.19.0",
         "jest": "^29.6.3",
         "prettier": "2.8.8",
-        "react-native-inapp-inspector": "^1.1.3",
+        "react-native-inapp-inspector": "^1.1.8",
         "react-test-renderer": "19.2.3",
         "typescript": "^5.8.3"
       },
@@ -10639,9 +10639,9 @@
       }
     },
     "node_modules/react-native-inapp-inspector": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/react-native-inapp-inspector/-/react-native-inapp-inspector-1.1.3.tgz",
-      "integrity": "sha512-lO7SxdsyClNNtfgvmVuhR1TXsruY0KGXEgjpyBFlSsmfP0HVWHkHFgOfgZGHzelBNqpALcg/OrlfGE/mPLSAWg==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/react-native-inapp-inspector/-/react-native-inapp-inspector-1.1.8.tgz",
+      "integrity": "sha512-YxmzhE/qRz/KgGva4d0hrL5CpZKmNfAtxrUSTxNM+tD2D5ch686RwG9C+KyqqJvpfIBIxkZyBqoTp31NVGVgjA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package/example/package.json

@@ -40,7 +40,7 @@
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
-    "react-native-inapp-inspector": "^1.1.3",
+    "react-native-inapp-inspector": "^1.1.8",
     "react-test-renderer": "19.2.3",
     "typescript": "^5.8.3"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",