react-native-inapp-inspector 2.0.3 → 2.0.5

package/dist/commonjs/index.js

@@ -90,6 +90,10 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [selected, setSelected] = (0, react_1.useState)(null);
     const [selectedLogs, setSelectedLogs] = (0, react_1.useState)(new Set());
     const [search, setSearch] = (0, react_1.useState)('');
+    const [searchScope, setSearchScope] = (0, react_1.useState)('all');
+    const [isRegexSearch, setIsRegexSearch] = (0, react_1.useState)(false);
+    const [isCaseSensitive, setIsCaseSensitive] = (0, react_1.useState)(false);
+    const [quickFilter, setQuickFilter] = (0, react_1.useState)('all');
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
     const [reduxSearch, setReduxSearch] = (0, react_1.useState)('');
     const [selectedReduxSlice, setSelectedReduxSlice] = (0, react_1.useState)(null);
@@ -1041,7 +1045,40 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     }, [selected]);
     const filteredLogs = (0, react_1.useMemo)(() => {
         let result = logs.filter(log => {
-            // Status Filter Check
+            // 1. Quick Filter Check (All, Errors, Success, Slow, GET, POST, GraphQL)
+            if (quickFilter && quickFilter !== 'all') {
+                if (quickFilter === 'errors') {
+                    const isErr = log.status === 0 ||
+                        log.status == null ||
+                        (typeof log.status === 'number' && log.status >= 400);
+                    if (!isErr)
+                        return false;
+                }
+                else if (quickFilter === 'success') {
+                    const isSuccess = typeof log.status === 'number' &&
+                        log.status >= 200 &&
+                        log.status < 400;
+                    if (!isSuccess)
+                        return false;
+                }
+                else if (quickFilter === 'slow') {
+                    if ((log.duration || 0) < 500)
+                        return false;
+                }
+                else if (quickFilter === 'graphql') {
+                    const isGql = (log.url || '').toLowerCase().includes('graphql') ||
+                        (log.client || '').toLowerCase().includes('graphql') ||
+                        (log.client || '').toLowerCase().includes('apollo');
+                    if (!isGql)
+                        return false;
+                }
+                else {
+                    if (log.method?.toUpperCase() !== quickFilter.toUpperCase()) {
+                        return false;
+                    }
+                }
+            }
+            // 2. Status Filter Check (from filters accordion dropdown)
             if (statusFilters.size > 0) {
                 const matched = [...statusFilters].some(f => {
                     if (f === 'ALL')
@@ -1057,7 +1094,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (!matched)
                     return false;
             }
-            // Method Filter Check
+            // 3. Method Filter Check (from filters accordion dropdown)
             if (methodFilters.size > 0) {
                 const matchedMethod = [...methodFilters].some(m => {
                     if (m === 'ALL')
@@ -1067,10 +1104,14 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (!matchedMethod)
                     return false;
             }
-            // Advanced Search Query Engine Check (Supports method:POST, is:error, slow:>1s, status:200, headers, body, etc.)
+            // 4. Advanced Search Query Engine Check with Scope, Regex and Case-Sensitivity
             if (search && search.trim().length > 0) {
                 const routePath = logRouteMapRef.current.get(log.id)?.path || '';
-                const isMatch = (0, helpers_1.matchNetworkLogQuery)(log, search, routePath);
+                const isMatch = (0, helpers_1.matchNetworkLogQuery)(log, search, routePath, {
+                    scope: searchScope,
+                    isRegex: isRegexSearch,
+                    isCaseSensitive: isCaseSensitive,
+                });
                 if (!isMatch)
                     return false;
             }
@@ -1079,9 +1120,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         if (sortOrder === 'oldest') {
             result = [...result].reverse();
         }
-        // #9 — collapse consecutive identical requests (same method + url +
-        // status) into one row carrying a ×N counter, unless the user opted in
-        // to seeing every duplicate via Settings → "Show Duplicate Logs".
+        // #9 — collapse consecutive identical requests
         if (!showDuplicateLogs) {
             const collapsed = [];
             for (const log of result) {
@@ -1105,6 +1144,10 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     }, [
         logs,
         search,
+        searchScope,
+        isRegexSearch,
+        isCaseSensitive,
+        quickFilter,
         statusFilters,
         methodFilters,
         sortOrder,
@@ -1655,6 +1698,14 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         groupedData,
         search,
         setSearch,
+        searchScope,
+        setSearchScope,
+        isRegexSearch,
+        setIsRegexSearch,
+        isCaseSensitive,
+        setIsCaseSensitive,
+        quickFilter,
+        setQuickFilter,
         statusFilters,
         setStatusFilters,
         methodFilters,

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { ViewStyle } from 'react-native';
 import { Animated, PanResponderInstance } from 'react-native';
 import type { ActiveTab, BreadcrumbType, CrashType, GroupedListItem, LocalFilter, LogFilter, Method, SettingsPage, SettingsSubTab, SortOrder, StatusFilter } from './index';
+export type SearchScope = 'all' | 'url' | 'reqBody' | 'resBody' | 'headers';
 export interface ParsedStackFrame {
     method: string;
     file: string;
@@ -214,6 +215,14 @@ export interface InspectorContextValue {
     groupedData: GroupedListItem[];
     search: string;
     setSearch: React.Dispatch<React.SetStateAction<string>>;
+    searchScope: SearchScope;
+    setSearchScope: React.Dispatch<React.SetStateAction<SearchScope>>;
+    isRegexSearch: boolean;
+    setIsRegexSearch: React.Dispatch<React.SetStateAction<boolean>>;
+    isCaseSensitive: boolean;
+    setIsCaseSensitive: React.Dispatch<React.SetStateAction<boolean>>;
+    quickFilter: string;
+    setQuickFilter: React.Dispatch<React.SetStateAction<string>>;
     statusFilters: Set<StatusFilter>;
     setStatusFilters: React.Dispatch<React.SetStateAction<Set<StatusFilter>>>;
     methodFilters: Set<Method>;

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

@@ -11,9 +11,11 @@ import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, formatTime, getSize } from '../../helpers';
 import { getTelemetryConsentStatus } from '../../helpers/telemetry';
+import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, } from '../NetworkIcons';
 const InspectorHeader = React.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, } = useInspector();
+    const [showUpdateModal, setShowUpdateModal] = React.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = React.useState(false);
     const telemetryPulseAnim = React.useRef(new Animated.Value(1)).current;
     React.useEffect(() => {
@@ -77,7 +79,8 @@ const InspectorHeader = React.memo(() => {
     const isDetailView = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'redux' &&
+            (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
     const isAnySelected = isDetailView || isSettingsView;
@@ -102,7 +105,8 @@ const InspectorHeader = React.memo(() => {
         }
     }, [settingsPage]);
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    return (<LinearGradient colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.headerGradient}>
+    return (<>
+      <LinearGradient colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.headerGradient}>
       <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
         <View style={styles.header}>
           <View style={[
@@ -203,7 +207,12 @@ const InspectorHeader = React.memo(() => {
             }}>
                 <AppHeaderLogo size={46} customIcon={appIcon}/>
                 <View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                minWidth: 0,
+            }}>
                     <Text style={[styles.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
                       {getAppName()}
                     </Text>
@@ -217,34 +226,41 @@ const InspectorHeader = React.memo(() => {
                     marginBottom: 0,
                 },
             ]}>
-                      <Text style={[
-                styles.envBadgeText,
-                { color: envConfig.text },
-            ]}>
+                      <Text style={[styles.envBadgeText, { color: envConfig.text }]}>
                         {envConfig.label}
                       </Text>
                     </View>
-                    {updateAvailable && (<Pressable hitSlop={10} onPress={() => Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${LIB_VERSION}).`, [
-                    { text: 'Later', style: 'cancel' },
-                    {
-                        text: 'View on NPM',
-                        onPress: () => Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
-                    },
-                ])} style={{
+                    {updateAvailable && (<Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
+                    flexDirection: 'row',
                     alignItems: 'center',
-                    justifyContent: 'center',
+                    backgroundColor: '#F59E0B',
+                    borderRadius: 5,
+                    paddingHorizontal: 5.5,
+                    paddingVertical: 1.5,
+                    gap: 3.5,
+                    shadowColor: '#F59E0B',
+                    shadowOffset: { width: 0, height: 1.5 },
+                    shadowOpacity: 0.35,
+                    shadowRadius: 3,
+                    elevation: 3,
                     flexShrink: 0,
                 }}>
                         <Animated.View style={{
-                    width: 8,
-                    height: 8,
-                    borderRadius: 4,
-                    backgroundColor: AppColors.liveGreen,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.white}E6`,
+                    width: 5,
+                    height: 5,
+                    borderRadius: 2.5,
+                    backgroundColor: '#FFFFFF',
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFFFFF',
+                    letterSpacing: 0.3,
+                }}>
+                          UPDATE ⚡
+                        </Text>
                       </Pressable>)}
                   </View>
 
@@ -280,7 +296,14 @@ const InspectorHeader = React.memo(() => {
                       </Text>
                     </View>
 
-                    <Pressable onPress={() => Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
+                    <Pressable onPress={() => {
+                if (updateAvailable) {
+                    setShowUpdateModal(true);
+                }
+                else {
+                    Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
+                }
+            }} style={{
                 backgroundColor: '#FFFFFF',
                 borderRadius: 5,
                 paddingHorizontal: 6,
@@ -304,6 +327,13 @@ const InspectorHeader = React.memo(() => {
             }} numberOfLines={1}>
                         v{LIB_VERSION}
                       </Text>
+                      {updateAvailable && (<Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#F59E0B',
+                }}>
+                          ↑
+                        </Text>)}
                     </Pressable>
 
                     {isTelemetryActive && (<Pressable onPress={() => Alert.alert('Anonymous Telemetry Active', 'Anonymous diagnostics (such as React Native version, JavaScript engine, and device model) are currently enabled to help improve library tooling.\n\nNo user data or network payloads are captured. You can toggle this anytime in Settings.', [{ text: 'Got it' }])} style={{
@@ -444,9 +474,7 @@ const InspectorHeader = React.memo(() => {
                     },
                 ]}>
                       <Text style={styles.headerMethodText}>
-                        {selectedEvent.source === 'firebase'
-                    ? 'FB'
-                    : 'MAN'}
+                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
                       </Text>
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -489,9 +517,7 @@ const InspectorHeader = React.memo(() => {
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       console.
-                      {(selectedLog.sourceMethod) ||
-                    selectedLog.type ||
-                    'log'}
+                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
                     </Text>
                   </View>
                   <View style={styles.headerDetailSubRow}>
@@ -504,10 +530,10 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                        <ClockIcon color={AppColors.white} size={11}/>
-                        <Text style={styles.headerSubTitle}>
-                          {formatTime(selectedLog.timestamp)}
-                        </Text>
+                      <ClockIcon color={AppColors.white} size={11}/>
+                      <Text style={styles.headerSubTitle}>
+                        {formatTime(selectedLog.timestamp)}
+                      </Text>
                     </View>
                   </View>
                 </View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
@@ -527,9 +553,7 @@ const InspectorHeader = React.memo(() => {
                             backgroundColor: `${AppColors.purple}4D`,
                         },
                     ]}>
-                          <Text style={styles.headerMethodText}>
-                            SLICE
-                          </Text>
+                          <Text style={styles.headerMethodText}>SLICE</Text>
                         </View>
                         <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                           {selectedReduxSlice}
@@ -540,20 +564,26 @@ const InspectorHeader = React.memo(() => {
                         styles.headerStatusDot,
                         { backgroundColor: AppColors.liveGreen },
                     ]}/>
-                        <Text style={styles.headerSubTitle}>
-                          Live
+                        <Text style={styles.headerSubTitle}>Live</Text>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
                         <Text style={styles.headerSubTitle}>
                           {keyCount} keys
                         </Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
-                        <Text style={styles.headerSubTitle}>
-                          {sliceSize}
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </Text>
+                        <Text style={styles.headerSubTitle}>{sliceSize}</Text>
                         {lastAction?.timestamp && (<>
-                            <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
-                            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                            <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                              •
+                            </Text>
+                            <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 3,
+                        }}>
                               <ClockIcon color={AppColors.white} size={10}/>
                               <Text style={styles.headerSubTitle}>
                                 {lastAction.timestamp}
@@ -570,9 +600,7 @@ const InspectorHeader = React.memo(() => {
                         backgroundColor: `${AppColors.brandPurple}4D`,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>
-                        ACTION
-                      </Text>
+                      <Text style={styles.headerMethodText}>ACTION</Text>
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       {selectedReduxAction.type}
@@ -598,7 +626,9 @@ const InspectorHeader = React.memo(() => {
                     },
                 ]}>
                       <Text style={styles.headerMethodText}>
-                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                        {selectedCrash.isFatal
+                    ? 'FATAL'
+                    : selectedCrash.type.toUpperCase()}
                       </Text>
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -615,10 +645,13 @@ const InspectorHeader = React.memo(() => {
                     },
                 ]}/>
                     <Text style={styles.headerSubTitle}>
-                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                      {selectedCrash.timeStr ||
+                    new Date(selectedCrash.timestamp).toLocaleTimeString()}
                     </Text>
                     {selectedCrash.deviceInfo?.platform && (<>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                          •
+                        </Text>
                         <Text style={styles.headerSubTitle}>
                           {selectedCrash.deviceInfo.platform.toUpperCase()}
                         </Text>
@@ -690,6 +723,10 @@ const InspectorHeader = React.memo(() => {
           </View>
         </View>
       </View>
-    </LinearGradient>);
+    </LinearGradient>
+
+    {/* Dedicated Update Available Details Modal */}
+    <UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+    </>);
 });
 export default InspectorHeader;

package/dist/esm/components/Inspector/MainScreen.js

@@ -68,6 +68,7 @@ const MainScreen = () => {
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
             isEnabled &&
+            !visible &&
             !useNativeFab && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary onClose={closeModal}>