react-native-inapp-inspector 1.1.6 → 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/components/NetworkIcons.d.ts

@@ -49,3 +49,4 @@ export declare const InfoCircleIcon: ({ color, size, }: any) => React.JSX.Elemen
 export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
+exports.MotionIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -386,3 +387,9 @@ const TrendingUpIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12,
     </react_native_svg_1.default>);
 };
 exports.TrendingUpIcon = TrendingUpIcon;
+const MotionIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M5 3l14 9-14 9V3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.MotionIcon = MotionIcon;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.6";
+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.6';
+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/helpers/settingsStore.d.ts

@@ -6,6 +6,7 @@ export declare function setCustomStorage(storage: InspectorStorage | null): void
 export interface PersistedSettings {
     isDark?: boolean;
     modalHeightPercent?: number;
+    modalAnimationType?: string;
     tabVisibility?: Record<string, boolean>;
     defaultTab?: string;
     maxNetworkLogs?: number;

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);
@@ -163,6 +163,8 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
     const [reduxLastActionMap, setReduxLastActionMap] = (0, react_1.useState)({});
     // Inspector panel height as a percentage of the screen (configurable in Settings).
     const [modalHeightPercent, setModalHeightPercent] = (0, react_1.useState)(90);
+    const [modalAnimationType, setModalAnimationType] = (0, react_1.useState)('slide');
+    const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     const [expandedReducers, setExpandedReducers] = (0, react_1.useState)({});
     const [logs, setLogs] = (0, react_1.useState)([]);
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -290,6 +292,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         setIsDark(false);
         (0, styles_1.toggleGlobalTheme)(false);
         setModalHeightPercent(90);
+        setModalAnimationType('slide');
         setTabVisibility({
             insights: true,
             apis: true,
@@ -327,6 +330,8 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
             }
             if (saved.modalHeightPercent != null)
                 setModalHeightPercent(saved.modalHeightPercent);
+            if (saved.modalAnimationType)
+                setModalAnimationType(saved.modalAnimationType);
             if (saved.tabVisibility)
                 setTabVisibility(prev => ({
                     ...prev,
@@ -381,6 +386,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         (0, settingsStore_1.saveSettings)({
             isDark,
             modalHeightPercent,
+            modalAnimationType,
             tabVisibility,
             defaultTab,
             maxNetworkLogs,
@@ -396,6 +402,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
     }, [
         isDark,
         modalHeightPercent,
+        modalAnimationType,
         tabVisibility,
         defaultTab,
         maxNetworkLogs,
@@ -538,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());
@@ -1362,7 +1399,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
             return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
           {/* Settings Header with back button */}
           <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
-            <react_native_1.SafeAreaView style={{ width: '100%' }}>
+            <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
               <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale_1.default onPress={() => {
                     animateNextLayout();
@@ -1411,7 +1448,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
-          </react_native_1.SafeAreaView>
+          </react_native_1.View>
         </react_native_linear_gradient_1.default>
 
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
@@ -1838,6 +1875,90 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                   </react_native_1.View>
                 </react_native_1.View>
 
+                {/* Divider */}
+                <react_native_1.View style={{
+                        height: 1,
+                        backgroundColor: AppColors_1.AppColors.dividerColor,
+                    }}/>
+
+                {/* Modal Animation */}
+                <react_native_1.View style={{
+                        paddingVertical: 12,
+                        paddingHorizontal: 14,
+                    }}>
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
+                    <react_native_1.View style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: 6,
+                        backgroundColor: AppColors_1.AppColors.purpleShade50,
+                        borderWidth: 1,
+                        borderColor: 'rgba(104,75,155,0.2)',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                      <NetworkIcons_1.MotionIcon color={AppColors_1.AppColors.purple} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 13,
+                        color: AppColors_1.AppColors.primaryBlack,
+                    }}>
+                        Modal Animation
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.grayText,
+                        marginTop: 1,
+                    }}>
+                        How the inspector panel enters and exits the screen
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {/* Segmented picker */}
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderRadius: 8,
+                        padding: 2.5,
+                        marginTop: 10,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                    }}>
+                    {([
+                        { key: 'slide', label: 'Slide Up' },
+                        { key: 'fade', label: 'Fade' },
+                        { key: 'none', label: 'None' },
+                    ]).map(opt => {
+                        const isActive = modalAnimationType === opt.key;
+                        return (<TouchableScale_1.default key={opt.key} onPress={() => setModalAnimationType(opt.key)} style={{
+                                flex: 1,
+                                paddingVertical: 6,
+                                alignItems: 'center',
+                                borderRadius: 6,
+                                backgroundColor: isActive
+                                    ? AppColors_1.AppColors.purple
+                                    : 'transparent',
+                            }}>
+                          <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 11,
+                                color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
+                            }}>
+                            {opt.label}
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>);
+                    })}
+                  </react_native_1.View>
+                </react_native_1.View>
+
                 {/* Divider */}
                 <react_native_1.View style={{
                         height: 1,
@@ -2679,7 +2800,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         }
         return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
         <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
-          <react_native_1.SafeAreaView style={{ width: '100%' }}>
+          <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
             <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
             <TouchableScale_1.default onPress={goBackToMain} hitSlop={12} style={{
                 padding: 8,
@@ -2726,7 +2847,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                 </react_native_1.Text>
               </react_native_1.View>) : null}
           </react_native_1.View>
-        </react_native_1.SafeAreaView>
+        </react_native_1.View>
       </react_native_linear_gradient_1.default>
         {content}
       </react_native_1.View>);
@@ -3563,7 +3684,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         </TouchableScale_1.default>
       </react_native_1.Animated.View>
 
-      <react_native_1.Modal visible={visible} animationType="slide" transparent>
+      <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent>
         {visible && (<ErrorBoundary_1.default onClose={closeModal}>
             <react_native_1.View style={styles_1.default.modalBackdrop}>
               <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
@@ -3574,7 +3695,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                 <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
                 <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
-                  <react_native_1.SafeAreaView style={{ width: '100%' }}>
+                  <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
                     <react_native_1.View style={styles_1.default.header}>
                     <react_native_1.View style={[
                 styles_1.default.headerLeft,
@@ -3912,7 +4033,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                       </TouchableScale_1.default>
                     </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.SafeAreaView>
+                </react_native_1.View>
               </react_native_linear_gradient_1.default>
 
                 {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
@@ -4037,8 +4158,25 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                         ? AppColors_1.AppColors.purple
                         : AppColors_1.AppColors.grayTextStrong} size={18}/>
                             </TouchableScale_1.default>
-                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            <TouchableScale_1.default style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 8,
+                        backgroundColor: 'rgba(255,46,87,0.06)',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,46,87,0.15)',
+                    }} onPress={handleDelete} hitSlop={6}>
+                              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={13}/>
+                              <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10.5,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                                Clear
+                              </react_native_1.Text>
                             </TouchableScale_1.default>
                           </react_native_1.View>)}
                       </react_native_1.View>
@@ -4264,13 +4402,27 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                               </react_native_1.View>
 
                               <react_native_1.View style={styles_1.default.toolbarRight}>
-                                <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
-                                  {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
-                                      <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                                        {selectedLogs.size}
-                                      </react_native_1.Text>
-                                    </react_native_1.View>)}
+                                <TouchableScale_1.default style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 8,
+                        backgroundColor: 'rgba(255,46,87,0.06)',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,46,87,0.15)',
+                    }} onPress={handleDelete} hitSlop={6}>
+                                  <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={13}/>
+                                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10.5,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                                    {selectedLogs.size > 0
+                        ? `Delete (${selectedLogs.size})`
+                        : 'Clear'}
+                                  </react_native_1.Text>
                                 </TouchableScale_1.default>
 
                                 <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
@@ -4438,8 +4590,25 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                             <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
                               <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
                             </TouchableScale_1.default>
-                            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                            <TouchableScale_1.default style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 8,
+                    backgroundColor: 'rgba(255,46,87,0.06)',
+                    borderWidth: 1,
+                    borderColor: 'rgba(255,46,87,0.15)',
+                }} onPress={handleDelete} hitSlop={6}>
+                              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={13}/>
+                              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.errorColor,
+                }}>
+                                Clear
+                              </react_native_1.Text>
                             </TouchableScale_1.default>
                           </react_native_1.View>
                         </react_native_1.View>

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/components/NetworkIcons.d.ts

@@ -49,3 +49,4 @@ export declare const InfoCircleIcon: ({ color, size, }: any) => React.JSX.Elemen
 export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -297,3 +297,8 @@ export const TrendingUpIcon = ({ color = AppColors.grayTextWeak, size = 12, }) =
       <Path d="M17 6h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const MotionIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M5 3l14 9-14 9V3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.6";
+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.6';
+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/helpers/settingsStore.d.ts

@@ -6,6 +6,7 @@ export declare function setCustomStorage(storage: InspectorStorage | null): void
 export interface PersistedSettings {
     isDark?: boolean;
     modalHeightPercent?: number;
+    modalAnimationType?: string;
     tabVisibility?: Record<string, boolean>;
     defaultTab?: string;
     maxNetworkLogs?: number;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, PanResponder, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, SafeAreaView, } from 'react-native';
+import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, PanResponder, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 import LinearGradient from 'react-native-linear-gradient';
 import { useNavigationState, NavigationContext } from '@react-navigation/native';
@@ -26,7 +26,7 @@ import { formatDateTime, getStatusColor, getNavigationInfo, deduplicateLogs, get
 // #5 — settings persistence
 import { loadSettings, saveSettings, setCustomStorage, isPersistentStorageAvailable, clearPersistedSettings, } from './helpers/settingsStore';
 // Assets
-import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, BrandSquareIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, ChevronIcon, WipeIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, TrendingUpIcon, } from './components/NetworkIcons';
+import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, BrandSquareIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, ChevronIcon, WipeIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, TrendingUpIcon, MotionIcon, } from './components/NetworkIcons';
 import ErrorBoundary from './components/ErrorBoundary';
 // Stylesheet
 import { AppColors } from './styles/AppColors';
@@ -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);
@@ -124,6 +124,8 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
     const [reduxLastActionMap, setReduxLastActionMap] = useState({});
     // Inspector panel height as a percentage of the screen (configurable in Settings).
     const [modalHeightPercent, setModalHeightPercent] = useState(90);
+    const [modalAnimationType, setModalAnimationType] = useState('slide');
+    const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     const [expandedReducers, setExpandedReducers] = useState({});
     const [logs, setLogs] = useState([]);
     const [visible, setVisible] = useState(false);
@@ -251,6 +253,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         setIsDark(false);
         toggleGlobalTheme(false);
         setModalHeightPercent(90);
+        setModalAnimationType('slide');
         setTabVisibility({
             insights: true,
             apis: true,
@@ -288,6 +291,8 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
             }
             if (saved.modalHeightPercent != null)
                 setModalHeightPercent(saved.modalHeightPercent);
+            if (saved.modalAnimationType)
+                setModalAnimationType(saved.modalAnimationType);
             if (saved.tabVisibility)
                 setTabVisibility(prev => ({
                     ...prev,
@@ -342,6 +347,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         saveSettings({
             isDark,
             modalHeightPercent,
+            modalAnimationType,
             tabVisibility,
             defaultTab,
             maxNetworkLogs,
@@ -357,6 +363,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
     }, [
         isDark,
         modalHeightPercent,
+        modalAnimationType,
         tabVisibility,
         defaultTab,
         maxNetworkLogs,
@@ -499,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());
@@ -1323,7 +1360,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
             return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
           {/* Settings Header with back button */}
           <LinearGradient colors={[AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
-            <SafeAreaView style={{ width: '100%' }}>
+            <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
               <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale onPress={() => {
                     animateNextLayout();
@@ -1372,7 +1409,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                 </Text>
               </View>
             </View>
-          </SafeAreaView>
+          </View>
         </LinearGradient>
 
           <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
@@ -1799,6 +1836,90 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                   </View>
                 </View>
 
+                {/* Divider */}
+                <View style={{
+                        height: 1,
+                        backgroundColor: AppColors.dividerColor,
+                    }}/>
+
+                {/* Modal Animation */}
+                <View style={{
+                        paddingVertical: 12,
+                        paddingHorizontal: 14,
+                    }}>
+                  <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
+                    <View style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: 6,
+                        backgroundColor: AppColors.purpleShade50,
+                        borderWidth: 1,
+                        borderColor: 'rgba(104,75,155,0.2)',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                      <MotionIcon color={AppColors.purple} size={11}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 13,
+                        color: AppColors.primaryBlack,
+                    }}>
+                        Modal Animation
+                      </Text>
+                      <Text style={{
+                        fontFamily: AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors.grayText,
+                        marginTop: 1,
+                    }}>
+                        How the inspector panel enters and exits the screen
+                      </Text>
+                    </View>
+                  </View>
+
+                  {/* Segmented picker */}
+                  <View style={{
+                        flexDirection: 'row',
+                        backgroundColor: AppColors.grayBackground,
+                        borderRadius: 8,
+                        padding: 2.5,
+                        marginTop: 10,
+                        borderWidth: 1,
+                        borderColor: AppColors.dividerColor,
+                    }}>
+                    {([
+                        { key: 'slide', label: 'Slide Up' },
+                        { key: 'fade', label: 'Fade' },
+                        { key: 'none', label: 'None' },
+                    ]).map(opt => {
+                        const isActive = modalAnimationType === opt.key;
+                        return (<TouchableScale key={opt.key} onPress={() => setModalAnimationType(opt.key)} style={{
+                                flex: 1,
+                                paddingVertical: 6,
+                                alignItems: 'center',
+                                borderRadius: 6,
+                                backgroundColor: isActive
+                                    ? AppColors.purple
+                                    : 'transparent',
+                            }}>
+                          <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 11,
+                                color: isActive ? '#FFFFFF' : AppColors.grayText,
+                            }}>
+                            {opt.label}
+                          </Text>
+                        </TouchableScale>);
+                    })}
+                  </View>
+                </View>
+
                 {/* Divider */}
                 <View style={{
                         height: 1,
@@ -2640,7 +2761,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         }
         return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
         <LinearGradient colors={[AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
-          <SafeAreaView style={{ width: '100%' }}>
+          <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
             <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
             <TouchableScale onPress={goBackToMain} hitSlop={12} style={{
                 padding: 8,
@@ -2687,7 +2808,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                 </Text>
               </View>) : null}
           </View>
-        </SafeAreaView>
+        </View>
       </LinearGradient>
         {content}
       </View>);
@@ -3524,7 +3645,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
         </TouchableScale>
       </Animated.View>
 
-      <Modal visible={visible} animationType="slide" transparent>
+      <Modal visible={visible} animationType={modalAnimationType} transparent>
         {visible && (<ErrorBoundary onClose={closeModal}>
             <View style={styles.modalBackdrop}>
               <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
@@ -3535,7 +3656,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                 <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
                 <LinearGradient colors={[AppColors.purple, '#6B4EFF']} style={styles.headerGradient}>
-                  <SafeAreaView style={{ width: '100%' }}>
+                  <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
                     <View style={styles.header}>
                     <View style={[
                 styles.headerLeft,
@@ -3873,7 +3994,7 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                       </TouchableScale>
                     </View>
                   </View>
-                </SafeAreaView>
+                </View>
               </LinearGradient>
 
                 {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
@@ -3998,8 +4119,25 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                         ? AppColors.purple
                         : AppColors.grayTextStrong} size={18}/>
                             </TouchableScale>
-                            <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                              <TrashIcon color={AppColors.grayTextStrong} size={18}/>
+                            <TouchableScale style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 8,
+                        backgroundColor: 'rgba(255,46,87,0.06)',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,46,87,0.15)',
+                    }} onPress={handleDelete} hitSlop={6}>
+                              <WipeIcon color={AppColors.errorColor} size={13}/>
+                              <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10.5,
+                        color: AppColors.errorColor,
+                    }}>
+                                Clear
+                              </Text>
                             </TouchableScale>
                           </View>)}
                       </View>
@@ -4225,13 +4363,27 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                               </View>
 
                               <View style={styles.toolbarRight}>
-                                <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                                  <TrashIcon color={AppColors.grayTextStrong} size={18}/>
-                                  {selectedLogs.size > 0 && (<View style={styles.trashBadge}>
-                                      <Text style={styles.trashBadgeText}>
-                                        {selectedLogs.size}
-                                      </Text>
-                                    </View>)}
+                                <TouchableScale style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 8,
+                        backgroundColor: 'rgba(255,46,87,0.06)',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,46,87,0.15)',
+                    }} onPress={handleDelete} hitSlop={6}>
+                                  <WipeIcon color={AppColors.errorColor} size={13}/>
+                                  <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10.5,
+                        color: AppColors.errorColor,
+                    }}>
+                                    {selectedLogs.size > 0
+                        ? `Delete (${selectedLogs.size})`
+                        : 'Clear'}
+                                  </Text>
                                 </TouchableScale>
 
                                 <TouchableScale style={styles.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
@@ -4399,8 +4551,25 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
                             <TouchableScale style={styles.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
                               <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
                             </TouchableScale>
-                            <TouchableScale style={styles.toolbarBtn} onPress={handleDelete} hitSlop={10}>
-                              <TrashIcon color={AppColors.grayTextStrong} size={18}/>
+                            <TouchableScale style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 8,
+                    backgroundColor: 'rgba(255,46,87,0.06)',
+                    borderWidth: 1,
+                    borderColor: 'rgba(255,46,87,0.15)',
+                }} onPress={handleDelete} hitSlop={6}>
+                              <WipeIcon color={AppColors.errorColor} size={13}/>
+                              <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors.errorColor,
+                }}>
+                                Clear
+                              </Text>
                             </TouchableScale>
                           </View>
                         </View>

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.6",
+  "version": "1.1.9",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",