react-native-inapp-inspector 1.1.12 → 1.1.13

package/dist/esm/components/SectionHeader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SectionHeaderProps } from '../types';
-declare const SectionHeader: ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }: SectionHeaderProps) => React.JSX.Element;
+declare const SectionHeader: ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }: SectionHeaderProps) => React.JSX.Element;
 export default SectionHeader;

package/dist/esm/components/SectionHeader.js

@@ -6,10 +6,10 @@ import { AppColors } from '../styles/AppColors';
 import CopyButton from './CopyButton';
 import TouchableScale from './TouchableScale';
 // Assets
-import { RequestIcon, ResponseIcon, HeadersIcon, DiffIcon, ChevronIcon, } from './NetworkIcons';
+import { RequestIcon, ResponseIcon, HeadersIcon, DiffIcon, ChevronIcon, SearchIcon, } from './NetworkIcons';
 // Stylesheet
 import styles from '../styles';
-const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }) => {
+const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }) => {
     const isOpen = expanded === undefined ? false : !!expanded;
     const chevronAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
     useEffect(() => {
@@ -30,6 +30,12 @@ const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDif
           <Text style={styles.sectionTitle}>{title}</Text>
         </Pressable>
         <View style={styles.sectionHeaderActions}>
+          {showSearch && (<TouchableScale onPress={onToggleSearch} hitSlop={12} style={[
+                styles.iconSquareBtn,
+                isSearching ? styles.iconSquareBtnActive : null,
+            ]}>
+              <SearchIcon color={isSearching ? AppColors.skyBlue : AppColors.grayTextWeak} size={14}/>
+            </TouchableScale>)}
           {showDiff && (<TouchableScale onPress={onToggleDiff} hitSlop={12} style={[
                 styles.iconSquareBtn,
                 isDiffing ? styles.iconSquareBtnActive : null,

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.12";
+export declare const LIB_VERSION = "1.1.13";

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.12';
+export const LIB_VERSION = '1.1.13';

package/dist/esm/customHooks/reduxLogger.d.ts

@@ -4,6 +4,8 @@ export interface ReduxHistoryEntry {
     payload: any;
     timestamp: string;
     affectedSlices: string[];
+    prevState?: any;
+    nextState?: any;
 }
 export declare const getReduxState: () => any;
 export declare const setReduxAutoRefresh: (val: boolean) => void;

package/dist/esm/customHooks/reduxLogger.js

@@ -86,6 +86,8 @@ function recordAction(action, prevState, nextState) {
         payload,
         timestamp,
         affectedSlices,
+        prevState,
+        nextState,
     });
     if (actionHistory.length > MAX_HISTORY) {
         actionHistory.length = MAX_HISTORY;

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

@@ -21,3 +21,4 @@ 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 handleOpenExternalLink: (url: string) => void;

package/dist/esm/helpers/index.js

@@ -1,4 +1,4 @@
-import { Clipboard, Platform, ToastAndroid, Alert, NativeModules } from 'react-native';
+import { Clipboard, Platform, ToastAndroid, Alert, NativeModules, Linking } from 'react-native';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 // Constants
@@ -302,3 +302,16 @@ export const getAppName = () => {
     }
     return 'App';
 };
+export const handleOpenExternalLink = (url) => {
+    if (!url)
+        return;
+    Alert.alert('Open Link', `Do you want to open this link in your web browser?\n\n${url}`, [
+        { text: 'Cancel', style: 'cancel' },
+        {
+            text: 'Open',
+            onPress: () => {
+                Linking.openURL(url).catch(() => { });
+            },
+        },
+    ]);
+};

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

@@ -27,3 +27,4 @@ export declare function loadSettings(): Promise<PersistedSettings>;
 export declare function saveSettings(settings: PersistedSettings): void;
 export declare function clearPersistedSettings(): Promise<void>;
 export declare const isPersistentStorageAvailable: () => boolean;
+export declare function getCustomStorage(): InspectorStorage | null;

package/dist/esm/helpers/settingsStore.js

@@ -82,3 +82,6 @@ export async function clearPersistedSettings() {
 export const isPersistentStorageAvailable = () => {
     return customStorage !== null || Platform.OS === 'ios';
 };
+export function getCustomStorage() {
+    return customStorage;
+}

package/dist/esm/index.js

@@ -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, MotionIcon, } from './components/NetworkIcons';
+import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, 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';
@@ -154,6 +154,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [sectionFilters, setSectionFilters] = useState({});
     const [collapsedSections, setCollapsedSections] = useState(new Set());
     const [showNetworkMenu, setShowNetworkMenu] = useState(false);
+    const [showHeaderInfo, setShowHeaderInfo] = useState(false);
     const [showUiMenu, setShowUiMenu] = useState(false);
     const [sortOrder, setSortOrder] = useState('newest');
     // #7 — sort order for the Logs (console) tab
@@ -3711,16 +3712,16 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         <WhiteBackNavigation />
                       </TouchableScale>
 
-                      {selected == null && selectedEvent == null ? (<View style={{
+                      {selected == null && selectedEvent == null ? (<TouchableScale onPress={() => setShowHeaderInfo(prev => !prev)} style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 14,
+                    gap: 10,
                     flex: 1,
                 }}>
                           <View style={{
-                    width: 50,
-                    height: 50,
-                    borderRadius: 10,
+                    width: 38,
+                    height: 38,
+                    borderRadius: 19,
                     backgroundColor: 'rgba(255,255,255,0.13)',
                     borderWidth: 1.5,
                     borderColor: 'rgba(255,255,255,0.25)',
@@ -3731,17 +3732,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
                 }}>
-                            <BrandSquareIcon size={45}/>
+                            <BrandCircleIcon size={34}/>
                           </View>
                           <View style={{ gap: 2, flex: 1 }}>
                             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                               <Text style={[styles.headerTitle]} numberOfLines={1}>
-                                {getAppName()}{' '}
-                                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
-                                  (Inspector)
-                                </Text>
+                                {getAppName()}
                               </Text>
-                              {/* #1 — pulsing dot when a newer version is on NPM */}
                               {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' },
                         {
@@ -3764,98 +3761,120 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                     }}/>
                                 </Pressable>)}
                             </View>
-                            <Text style={{
-                    fontFamily: AppFonts.interRegular,
-                    fontSize: 10.5,
-                    color: 'rgba(255, 255, 255, 0.6)',
-                    marginTop: 1,
-                }} selectable={true} numberOfLines={1}>
-                              {getBundleIdentifier()}
-                            </Text>
                             <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 6,
-                    marginTop: 4,
-                }}>
-                              {/* OS chip */}
-                              <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderRadius: 6,
-                    overflow: 'hidden',
+                    alignSelf: 'flex-start',
+                    backgroundColor: 'rgba(255,255,255,0.1)',
+                    borderRadius: 10,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    gap: 5,
                     borderWidth: 1,
-                    borderColor: 'rgba(255,255,255,0.18)',
+                    borderColor: 'rgba(255,255,255,0.15)',
                 }}>
-                                <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.28)',
-                }}>
-                                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: '#FFFFFF',
-                    letterSpacing: 0.3,
-                }}>
-                                    {Platform.OS === 'ios' ? 'iOS' : 'Android'}
-                                  </Text>
-                                </View>
-                                <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.12)',
-                }}>
-                                  <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: 'rgba(255,255,255,0.92)',
-                }}>
-                                    {String(Platform.Version)}
-                                  </Text>
-                                </View>
-                              </View>
-
-                              {/* npm chip */}
                               <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderRadius: 6,
-                    overflow: 'hidden',
-                    borderWidth: 1,
-                    borderColor: 'rgba(255,255,255,0.18)',
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: '#4ADE80',
+                }}/>
+                              <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 10,
+                    color: 'rgba(255, 255, 255, 0.85)',
+                    letterSpacing: 0.2,
+                }} numberOfLines={1}>
+                                {getBundleIdentifier()}
+                              </Text>
+                              <Animated.View style={{
+                    transform: [{ rotate: showHeaderInfo ? '180deg' : '0deg' }],
+                    marginLeft: 2,
                 }}>
+                                <ChevronIcon color="rgba(255,255,255,0.6)" size={12}/>
+                              </Animated.View>
+                            </View>
+                            {showHeaderInfo && (<View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        marginTop: 4,
+                    }}>
                                 <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.28)',
-                }}>
-                                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: '#FFFFFF',
-                    letterSpacing: 0.3,
-                }}>
-                                    npm
-                                  </Text>
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        borderRadius: 6,
+                        overflow: 'hidden',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.18)',
+                    }}>
+                                  <View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.28)',
+                    }}>
+                                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: '#FFFFFF',
+                        letterSpacing: 0.3,
+                    }}>
+                                      {Platform.OS === 'ios' ? 'iOS' : 'Android'}
+                                    </Text>
+                                  </View>
+                                  <View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.12)',
+                    }}>
+                                    <Text style={{
+                        fontFamily: AppFonts.interMedium,
+                        fontSize: 9.5,
+                        color: 'rgba(255,255,255,0.92)',
+                    }}>
+                                      {String(Platform.Version)}
+                                    </Text>
+                                  </View>
                                 </View>
                                 <View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.12)',
-                }}>
-                                  <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: 'rgba(255,255,255,0.92)',
-                }}>
-                                    v{LIB_VERSION}
-                                  </Text>
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        borderRadius: 6,
+                        overflow: 'hidden',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.18)',
+                    }}>
+                                  <View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.28)',
+                    }}>
+                                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: '#FFFFFF',
+                        letterSpacing: 0.3,
+                    }}>
+                                      npm
+                                    </Text>
+                                  </View>
+                                  <View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.12)',
+                    }}>
+                                    <Text style={{
+                        fontFamily: AppFonts.interMedium,
+                        fontSize: 9.5,
+                        color: 'rgba(255,255,255,0.92)',
+                    }}>
+                                      v{LIB_VERSION}
+                                    </Text>
+                                  </View>
                                 </View>
-                              </View>
-                            </View>
+                              </View>)}
                           </View>
-                        </View>) : null}
+                        </TouchableScale>) : null}
                     </View>
 
                     <View style={styles.headerCenter}>

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

@@ -89,6 +89,9 @@ export interface SectionHeaderProps {
     showDiff?: boolean;
     isDiffing?: boolean;
     onToggleDiff?: () => void;
+    showSearch?: boolean;
+    isSearching?: boolean;
+    onToggleSearch?: () => void;
 }
 export interface TreeNodeProps {
     data: unknown;

package/package.json

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