react-native-inapp-inspector 2.2.8 → 2.3.0

package/dist/commonjs/components/Inspector/DeviceInfoTab.js

@@ -60,9 +60,9 @@ const InfoRow = react_1.default.memo(({ label, value, copyable = true, badge, su
             styles.infoRow,
             isLast && { borderBottomWidth: 0 },
         ]}>
-        <react_native_1.View style={{ flex: 1, paddingRight: 8 }}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <react_native_1.Text style={styles.infoLabel}>{label}</react_native_1.Text>
+        <react_native_1.View style={{ flex: 1, paddingRight: 8, minWidth: 0 }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+            <react_native_1.Text style={styles.infoLabel} numberOfLines={2}>{label}</react_native_1.Text>
             {badge && (<react_native_1.View style={[
                 styles.infoBadge,
                 { backgroundColor: badge.bg, borderColor: `${badge.color}33` },
@@ -72,15 +72,22 @@ const InfoRow = react_1.default.memo(({ label, value, copyable = true, badge, su
                 </react_native_1.Text>
               </react_native_1.View>)}
           </react_native_1.View>
-          {subtext && <react_native_1.Text style={styles.infoSubtext}>{subtext}</react_native_1.Text>}
+          {subtext && <react_native_1.Text style={styles.infoSubtext} numberOfLines={2}>{subtext}</react_native_1.Text>}
         </react_native_1.View>
-        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            flexShrink: 0,
+            maxWidth: '58%',
+            justifyContent: 'flex-end',
+        }}>
           <react_native_1.Text style={[
             styles.infoValue,
             typeof value === 'boolean' && {
                 color: value ? AppColors_1.AppColors.emerald500 : AppColors_1.AppColors.errorColor,
             },
-        ]} numberOfLines={2} selectable>
+        ]} numberOfLines={3} selectable>
             {displayValue}
           </react_native_1.Text>
           {copyable && value !== null && value !== undefined && (<TouchableScale_1.default hitSlop={8} onPress={() => {
@@ -387,6 +394,14 @@ exports.DeviceInfoTab = react_1.default.memo(() => {
             return true;
         return text.toLowerCase().includes(search.toLowerCase().trim());
     };
+    const hasAnyMatch = (0, react_1.useMemo)(() => {
+        if (!search.trim())
+            return true;
+        const query = search.toLowerCase().trim();
+        return (JSON.stringify(fullDeviceData).toLowerCase().includes(query) ||
+            ipAddress.toLowerCase().includes(query) ||
+            pseudoUDID.toLowerCase().includes(query));
+    }, [search, fullDeviceData, ipAddress, pseudoUDID]);
     return (<react_native_1.View style={styles.container}>
       {/* ─── Top Sub-Tabs Navigation Bar ─── */}
       <react_native_1.View style={styles.subTabsWrapper}>
@@ -436,11 +451,11 @@ exports.DeviceInfoTab = react_1.default.memo(() => {
             <react_native_1.View style={styles.heroIconWrap}>
               {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon size={20} color={AppColors_1.AppColors.white}/>) : (<NetworkIcons_1.AndroidIcon size={20} color={AppColors_1.AppColors.white}/>)}
             </react_native_1.View>
-            <react_native_1.View style={{ flex: 1 }}>
-              <react_native_1.Text style={styles.heroTitle}>
+            <react_native_1.View style={{ flex: 1, minWidth: 0 }}>
+              <react_native_1.Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
                 {deviceMetrics?.deviceModel || react_native_1.Platform.constants?.Model || (react_native_1.Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
               </react_native_1.Text>
-              <react_native_1.Text style={styles.heroSubtitle}>
+              <react_native_1.Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
                 {react_native_1.Platform.OS === 'ios' ? `iOS ${react_native_1.Platform.Version}` : `Android ${react_native_1.Platform.Version} (API ${deviceMetrics?.apiLevel || react_native_1.Platform.Version})`}
               </react_native_1.Text>
             </react_native_1.View>
@@ -453,22 +468,22 @@ exports.DeviceInfoTab = react_1.default.memo(() => {
           {/* Quick Metrics Strip */}
           <react_native_1.View style={styles.heroMetricsStrip}>
             <react_native_1.View style={styles.heroMetricItem}>
-              <react_native_1.Text style={styles.heroMetricLabel}>IP ADDRESS</react_native_1.Text>
-              <react_native_1.Text style={styles.heroMetricValue} numberOfLines={1}>
+              <react_native_1.Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">IP ADDRESS</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {ipAddress}
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={styles.heroMetricDivider}/>
             <react_native_1.View style={styles.heroMetricItem}>
-              <react_native_1.Text style={styles.heroMetricLabel}>RAM (USED/TOTAL)</react_native_1.Text>
-              <react_native_1.Text style={styles.heroMetricValue}>
+              <react_native_1.Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">RAM (USED/TOTAL)</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {usedRamMb}/{totalRamMb} MB
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={styles.heroMetricDivider}/>
             <react_native_1.View style={styles.heroMetricItem}>
-              <react_native_1.Text style={styles.heroMetricLabel}>UPTIME</react_native_1.Text>
-              <react_native_1.Text style={styles.heroMetricValue}>{deviceUptime}</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">UPTIME</react_native_1.Text>
+              <react_native_1.Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
@@ -581,6 +596,18 @@ exports.DeviceInfoTab = react_1.default.memo(() => {
             {isMatch('Sandbox Integrity') && (<InfoRow label="App Sandbox File Isolation" value="Enforced by OS Kernel" isLast/>)}
           </react_native_1.View>)}
 
+        {/* Empty search results state */}
+        {search.trim().length > 0 && !hasAnyMatch && (<react_native_1.View style={styles.emptySearchCard}>
+            <NetworkIcons_1.SearchIcon size={26} color={AppColors_1.AppColors.grayTextWeak}/>
+            <react_native_1.Text style={styles.emptySearchTitle}>No matching device specifications</react_native_1.Text>
+            <react_native_1.Text style={styles.emptySearchSubtitle}>
+              No properties matched &ldquo;{search}&rdquo;
+            </react_native_1.Text>
+            <TouchableScale_1.default onPress={() => setSearch('')} style={styles.clearSearchBtn}>
+              <react_native_1.Text style={styles.clearSearchBtnText}>Clear Search</react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>)}
+
         <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>
     </react_native_1.View>);
@@ -752,6 +779,8 @@ const styles = react_native_1.StyleSheet.create({
     heroMetricItem: {
         flex: 1,
         alignItems: 'center',
+        paddingHorizontal: 2,
+        minWidth: 0,
     },
     heroMetricLabel: {
         fontFamily: AppFonts_1.AppFonts.interBold,
@@ -823,7 +852,7 @@ const styles = react_native_1.StyleSheet.create({
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 12,
         color: AppColors_1.AppColors.primaryBlack,
-        maxWidth: 180,
+        flexShrink: 1,
         textAlign: 'right',
     },
     rowCopyBtn: {
@@ -831,5 +860,40 @@ const styles = react_native_1.StyleSheet.create({
         borderRadius: 4,
         backgroundColor: AppColors_1.AppColors.grayBackground,
     },
+    emptySearchCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        marginTop: 8,
+    },
+    emptySearchTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        textAlign: 'center',
+    },
+    emptySearchSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textAlign: 'center',
+    },
+    clearSearchBtn: {
+        marginTop: 6,
+        paddingHorizontal: 14,
+        paddingVertical: 6.5,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    clearSearchBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.white,
+    },
 });
 exports.default = exports.DeviceInfoTab;

package/dist/commonjs/components/Inspector/InspectorHeader.js

@@ -48,11 +48,26 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
+const NativeInspector_1 = require("../../native/NativeInspector");
 const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
+    const [appVersionString, setAppVersionString] = react_1.default.useState(() => {
+        return (0, helpers_1.getAppVersionAndBuild)().formatted;
+    });
+    react_1.default.useEffect(() => {
+        (0, NativeInspector_1.getNativeDeviceMetrics)()
+            .then(metrics => {
+            if (metrics?.appVersion) {
+                const v = metrics.appVersion;
+                const b = metrics.appBuild || '1';
+                setAppVersionString(`${v} (${b})`);
+            }
+        })
+            .catch(() => { });
+    }, []);
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -303,9 +318,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
-                        {react_native_1.Platform.OS === 'ios'
-                ? `iOS ${react_native_1.Platform.Version}`
-                : `Android ${react_native_1.Platform.Version}`}
+                        {appVersionString}
                       </react_native_1.Text>
                     </react_native_1.View>
 

package/dist/commonjs/components/Inspector/NetworkDetail.js

@@ -401,8 +401,9 @@ const NetworkDetail = react_1.default.memo(() => {
                 selected.responseHeaders?.['Content-Type']} url={selected.url}/>
 
             {(() => {
-                const routeInfo = logRouteMapRef.current.get(selected.id);
-                if (!routeInfo || routeInfo.path === 'Navigators')
+                const routeInfo = logRouteMapRef.current.get(selected.id) ||
+                    selected?.routeInfo;
+                if (!routeInfo || !routeInfo.path || routeInfo.path === 'Navigators')
                     return null;
                 return <SourcePageCard_1.default routeInfo={routeInfo}/>;
             })()}

package/dist/commonjs/components/Inspector/NetworkTab.js

@@ -507,7 +507,7 @@ const NetworkTab = react_1.default.memo(() => {
                     <react_native_1.View style={{
                     backgroundColor: `${AppColors_1.AppColors.purple}20`,
                     borderRadius: 10,
-                    paddingHorizontal: 5,
+                    paddingHorizontal: 6,
                     paddingVertical: 1.5,
                 }}>
                       <react_native_1.Text style={{
@@ -560,14 +560,104 @@ const NetworkTab = react_1.default.memo(() => {
                 styles_1.default.toolbarBtn,
                 filtersAccordion.isOpen &&
                     styles_1.default.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
                   <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
                 ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                : AppColors_1.AppColors.grayTextStrong} size={16}/>
+                  {(statusFilters.size > 0 ||
+                methodFilters.size > 0) && (<react_native_1.View style={styles_1.default.activeFilterDot}/>)}
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
 
+            {/* Quick Search Scope & Filter Tags Row */}
+            <react_native_1.View style={{ paddingBottom: 4 }}>
+              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+                paddingVertical: 2,
+            }}>
+                {/* Search Scopes */}
+                {SEARCH_SCOPES.map(s => {
+                const isActive = searchScope === s.id;
+                return (<TouchableScale_1.default key={`scope_${s.id}`} onPress={() => setSearchScope(s.id)} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 3.5,
+                        paddingHorizontal: 7.5,
+                        paddingVertical: 3.5,
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                      {s.icon(isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak)}
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                    }}>
+                        {s.label}
+                      </react_native_1.Text>
+                    </TouchableScale_1.default>);
+            })}
+
+                <react_native_1.View style={{
+                width: 1,
+                height: 14,
+                backgroundColor: AppColors_1.AppColors.dividerColor,
+                marginHorizontal: 3,
+            }}/>
+
+                {/* Quick Query Suggestions */}
+                {QUICK_API_QUERY_TAGS.map(q => {
+                const isActive = search.includes(q.query);
+                return (<TouchableScale_1.default key={`quick_${q.query}`} onPress={() => {
+                        setSearch(prev => {
+                            if (prev.includes(q.query)) {
+                                return prev
+                                    .replace(q.query, '')
+                                    .replace(/\s+/g, ' ')
+                                    .trim();
+                            }
+                            return `${prev} ${q.query}`.trim();
+                        });
+                    }} hitSlop={6} style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 3.5,
+                        paddingHorizontal: 7.5,
+                        paddingVertical: 3.5,
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? `${AppColors_1.AppColors.purple}20`
+                            : AppColors_1.AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                      {q.icon(isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak)}
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 10,
+                        color: isActive
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayText,
+                    }}>
+                        {q.label}
+                      </react_native_1.Text>
+                    </TouchableScale_1.default>);
+            })}
+              </react_native_1.ScrollView>
+            </react_native_1.View>
+
             {/* Quick Filter Horizontal Chips Bar with Live Counts */}
             <react_native_1.View style={{ marginBottom: 8 }}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
@@ -853,7 +943,16 @@ const NetworkTab = react_1.default.memo(() => {
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </react_native_1.Text>)}
-          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
+          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
+                statusFilters.size > 0 ||
+                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                ? 'No matching API requests'
+                : 'No network activity'} onClearSearch={() => {
+                setSearch('');
+                setStatusFilters(new Set());
+                setMethodFilters(new Set());
+                setSearchScope('all');
+            }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

package/dist/commonjs/components/Inspector/ReduxTab.js

@@ -434,9 +434,25 @@ const ReduxTab = react_1.default.memo(() => {
           <react_native_1.View style={styles_1.default.searchContainer}>
             <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
             <react_native_1.TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search Redux slices or actions" accessibilityHint="Type to filter state slices in real time" placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </react_native_1.Pressable>)}
+            {reduxSearch.length > 0 && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                  <react_native_1.Text style={{
+                color: AppColors_1.AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            }}>
+                    {filteredSlices.length}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
+                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                </react_native_1.Pressable>
+              </react_native_1.View>)}
           </react_native_1.View>
 
           {/* Pause / Resume Live Updates Button */}

package/dist/commonjs/components/Inspector/SettingsPanel.js

@@ -146,8 +146,8 @@ const SettingsPanel = () => {
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
-        device: Boolean(tabVisibility?.device ?? true),
-        storage: Boolean(tabVisibility?.storage ?? true),
+        device: Boolean(tabVisibility?.device),
+        storage: Boolean(tabVisibility?.storage),
     }));
     // Synchronize staged state with tabVisibility when tabVisibility updates
     (0, react_1.useEffect)(() => {
@@ -159,8 +159,8 @@ const SettingsPanel = () => {
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
-            device: Boolean(tabVisibility?.device ?? true),
-            storage: Boolean(tabVisibility?.storage ?? true),
+            device: Boolean(tabVisibility?.device),
+            storage: Boolean(tabVisibility?.storage),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = (0, react_1.useMemo)(() => {

package/dist/commonjs/components/Inspector/StorageTab.js

@@ -284,9 +284,25 @@ exports.StorageTab = react_1.default.memo(() => {
         <react_native_1.View style={styles.searchBar}>
           <NetworkIcons_1.SearchIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
           <react_native_1.TextInput value={search} onChangeText={setSearch} placeholder={`Search ${entries.length} keys & values...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={styles.searchInput} clearButtonMode="while-editing"/>
-          {search.length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} hitSlop={8}>
-              <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
-            </TouchableScale_1.default>)}
+          {search.length > 0 && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
+                <react_native_1.Text style={{
+                color: AppColors_1.AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            }}>
+                  {filteredEntries.length}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <TouchableScale_1.default onPress={() => setSearch('')} hitSlop={8}>
+                <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
+              </TouchableScale_1.default>
+            </react_native_1.View>)}
         </react_native_1.View>
 
         {/* Action Buttons: Add Key & Refresh */}

package/dist/commonjs/components/JsonViewer.js

@@ -43,6 +43,7 @@ const i18n_1 = require("../i18n");
 const TreeNode_1 = __importDefault(require("./TreeNode"));
 const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
 const HighlightText_1 = __importDefault(require("./HighlightText"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
 const NetworkIcons_1 = require("./NetworkIcons");
 // Styles
 const AppColors_1 = require("../styles/AppColors");
@@ -189,6 +190,7 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
                     icon: (isActive) => (<NetworkIcons_1.TableIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
                 },
             ]} activeKey={mode} onChange={key => setMode(key)}/>
+          <CopyButton_1.default value={data} label="JSON"/>
         </react_native_1.View>)}
 
       {/* ── Main View Content Area (Royal Monospace Theme) ── */}

package/dist/commonjs/components/MetaAccordion.js

@@ -49,6 +49,7 @@ const helpers_1 = require("../helpers");
 const NetworkIcons_1 = require("./NetworkIcons");
 // Components
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
@@ -98,9 +99,20 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
       <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
         <react_native_1.View style={styles_1.default.metaHeader}>
           <react_native_1.Text style={styles_1.default.metaTitle}>Metadata</react_native_1.Text>
-          <react_native_1.Animated.View style={chevronStyle}>
-            <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-          </react_native_1.Animated.View>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <CopyButton_1.default value={{
+            status: status ?? 0,
+            duration: duration != null ? `${duration} ms` : '—',
+            size: size || '—',
+            triggeredAt: triggeredAt || '',
+            method: method || 'GET',
+            contentType: contentType || 'application/json',
+            url: url || '',
+        }} label="Metadata"/>
+            <react_native_1.Animated.View style={chevronStyle}>
+              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+            </react_native_1.Animated.View>
+          </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Pressable>
 

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.2.8";
+export declare const LIB_VERSION = "2.3.0";

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 = '2.2.8';
+exports.LIB_VERSION = '2.3.0';

package/dist/commonjs/customHooks/networkLogger.d.ts

@@ -1,3 +1,4 @@
+import { RouteInfo } from "../types";
 type NetworkLog = {
     id: number;
     url: string;
@@ -11,7 +12,9 @@ type NetworkLog = {
     client?: string;
     requestHeaders?: Record<string, string>;
     responseHeaders?: Record<string, string>;
+    routeInfo?: RouteInfo;
 };
+export declare const setRouteInfoProvider: (provider: (() => RouteInfo | null) | null) => void;
 export declare const setNetworkModuleEnabled: (enabled: boolean) => void;
 export declare const getNetworkModuleEnabled: () => boolean;
 export declare const subscribeNetworkLogs: (callback: (logs: NetworkLog[]) => void) => () => void;

package/dist/commonjs/customHooks/networkLogger.js

@@ -3,13 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addAxiosInterceptors = exports.setupNetworkLogger = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.getNetworkLogs = exports.clearNetworkLogs = exports.subscribeNetworkLogs = exports.getNetworkModuleEnabled = exports.setNetworkModuleEnabled = void 0;
+exports.addAxiosInterceptors = exports.setupNetworkLogger = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.getNetworkLogs = exports.clearNetworkLogs = exports.subscribeNetworkLogs = exports.getNetworkModuleEnabled = exports.setNetworkModuleEnabled = exports.setRouteInfoProvider = void 0;
 const axios_1 = __importDefault(require("axios"));
 const crashHandler_1 = require("./crashHandler");
 let logs = [];
 let listeners = [];
 let counter = 0;
 let isNetworkModuleEnabled = true;
+let currentRouteProvider = null;
+const setRouteInfoProvider = (provider) => {
+    currentRouteProvider = provider;
+};
+exports.setRouteInfoProvider = setRouteInfoProvider;
 const setNetworkModuleEnabled = (enabled) => {
     isNetworkModuleEnabled = enabled;
 };
@@ -199,6 +204,7 @@ const setupNetworkLogger = () => {
                 else if (caller?.toLowerCase().includes('axios')) {
                     client = 'axios';
                 }
+                const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
                 addOrUpdateLog({
                     id,
                     url: finalUrl,
@@ -206,6 +212,7 @@ const setupNetworkLogger = () => {
                     startTime: start,
                     caller,
                     client,
+                    routeInfo: currentRoute || undefined,
                     request: method === "GET" ? undefined : parseRequestData(options?.body),
                     requestHeaders,
                 });
@@ -313,6 +320,7 @@ const addAxiosInterceptors = (axiosInstance) => {
         config.__logId = id;
         config.__logStart = start;
         config.__logCaller = caller;
+        const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
         addOrUpdateLog({
             id,
             url,
@@ -320,6 +328,7 @@ const addAxiosInterceptors = (axiosInstance) => {
             startTime: start,
             caller,
             client: 'axios',
+            routeInfo: currentRoute || undefined,
             request: method === "GET" ? undefined : parseRequestData(config.data),
             requestHeaders: normaliseHeaders(config.headers),
         });

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

@@ -15,6 +15,7 @@ export declare const getFetchCommand: (log: NetworkLog) => string;
 export declare const deduplicateLogs: (raw: NetworkLog[]) => NetworkLog[];
 export declare const escapeRegex: (str: string) => string;
 export declare const getNavigationInfo: (state: any, path?: string[]) => RouteInfo;
+export declare const getLogPageName: (log: NetworkLog, routeInfo?: RouteInfo | null) => string;
 export declare const flattenObject: (obj: any, prefix?: string) => Record<string, any>;
 export declare const getDiff: (oldObj: any, newObj: any) => DiffResult[];
 export declare const formatDisplayUrl: (url: string) => string;
@@ -24,6 +25,11 @@ export declare const isAllValuesEmpty: (obj: Record<string, any>) => boolean;
 export declare const formatDateTimeToAnalytics: (ts: number) => string;
 export declare const getBundleIdentifier: () => string;
 export declare const getAppName: () => string;
+export declare const getAppVersionAndBuild: () => {
+    version: string;
+    build: string;
+    formatted: string;
+};
 export declare const handleOpenExternalLink: (url: string) => void;
 /** Formats a timestamp as HH:MM:SS (no milliseconds). */
 export declare const formatTimeShort: (ts: number) => string;