react-native-inapp-inspector 2.0.6 → 2.0.7

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

@@ -18,13 +18,13 @@ import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
 import { getTelemetryConsentStatus, setTelemetryConsent, sendSessionTelemetryPing, } from '../../helpers/telemetry';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, DatabaseIcon, DevicePhoneIcon, ShieldCheckIcon, CpuIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, GlobeIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, DatabaseIcon, DevicePhoneIcon, ShieldCheckIcon, CpuIcon, } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
 const SettingsPanel = () => {
     const { t } = useTranslation();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, openWalkthrough, deviceInfo, auditReport, storageEntries, } = useInspector();
     const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
     const [telemetryConsent, setTelemetryConsentState] = useState(true);
     useEffect(() => {
@@ -424,17 +424,23 @@ const SettingsPanel = () => {
                     ? `${logs.length} requests • Limit: ${maxNetworkLogs}`
                     : moduleItem.key === 'logs'
                         ? `${consoleLogs.length} logs • Limit: ${maxConsoleLogs}`
-                        : moduleItem.key === 'performance'
-                            ? '60 FPS Target • Memory Telemetry'
-                            : moduleItem.key === 'bundle'
-                                ? 'Metro Packager • Dependency Map'
-                                : moduleItem.key === 'crash'
-                                    ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
-                                    : moduleItem.key === 'analytics'
-                                        ? `${analyticsEvents.length} events logged`
-                                        : moduleItem.key === 'redux'
-                                            ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
-                                            : '';
+                        : moduleItem.key === 'storage'
+                            ? `${storageEntries?.length || 0} keys • AsyncStorage/MMKV`
+                            : moduleItem.key === 'device'
+                                ? `${deviceInfo?.platform ? deviceInfo.platform.toUpperCase() : 'Device'} • Hermes ${deviceInfo?.isHermes ? 'Enabled' : 'Off'}`
+                                : moduleItem.key === 'audit'
+                                    ? `${auditReport?.score != null ? `${auditReport.score}/100 Score • Quality Audit` : 'Package & Health Audit'}`
+                                    : moduleItem.key === 'performance'
+                                        ? '60 FPS Target • Memory Telemetry'
+                                        : moduleItem.key === 'bundle'
+                                            ? 'Metro Packager • Dependency Map'
+                                            : moduleItem.key === 'crash'
+                                                ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
+                                                : moduleItem.key === 'analytics'
+                                                    ? `${analyticsEvents.length} events logged`
+                                                    : moduleItem.key === 'redux'
+                                                        ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
+                                                        : '';
                 return (<View key={moduleItem.key} style={{
                         backgroundColor: AppColors.primaryLight,
                         borderRadius: 14,
@@ -703,29 +709,29 @@ const SettingsPanel = () => {
                             borderTopColor: AppColors.dividerColor,
                         }}>
                         {/* Live Info Pill */}
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            flex: 1,
-                        }}>
-                          <View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: isChecked
-                                ? AppColors.liveGreen
-                                : AppColors.grayTextWeak,
-                        }}/>
-                          <Text style={{
-                            fontFamily: AppFonts.interMedium,
-                            fontSize: 11,
-                            color: AppColors.grayText,
-                            lineHeight: 14,
-                        }}>
-                            {liveStats}
-                          </Text>
-                        </View>
+                        {Boolean(liveStats) ? (<View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                                flex: 1,
+                            }}>
+                            <View style={{
+                                width: 6,
+                                height: 6,
+                                borderRadius: 3,
+                                backgroundColor: isChecked
+                                    ? AppColors.liveGreen
+                                    : AppColors.grayTextWeak,
+                            }}/>
+                            <Text style={{
+                                fontFamily: AppFonts.interMedium,
+                                fontSize: 11,
+                                color: AppColors.grayText,
+                                lineHeight: 14,
+                            }}>
+                              {liveStats}
+                            </Text>
+                          </View>) : (<View style={{ flex: 1 }}/>)}
 
                         {/* Sleek Configure Button */}
                         <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
@@ -1224,6 +1230,88 @@ const SettingsPanel = () => {
 
         {/* ─── TAB 3: UI & APPEARANCE ────────────────────────────────────────── */}
         {settingsActiveSubTab === 'ui' && (<View style={{ gap: 14 }}>
+            {/* Section 0: Interactive Walkthrough Tour */}
+            <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+              <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                ONBOARDING & GUIDE
+              </Text>
+
+              <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 10,
+            }}>
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                  <View style={{
+                width: 34,
+                height: 34,
+                borderRadius: 9,
+                backgroundColor: `${AppColors.purple}16`,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <GlobeIcon color={AppColors.purple} size={16}/>
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                      First-Time Walkthrough
+                    </Text>
+                    <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayTextWeak,
+                marginTop: 1,
+                lineHeight: 16,
+            }}>
+                      Explore features, gestures & developer tools
+                    </Text>
+                  </View>
+                </View>
+
+                <TouchableScale style={{
+                backgroundColor: `${AppColors.purple}14`,
+                borderColor: `${AppColors.purple}30`,
+                borderWidth: 1,
+                paddingHorizontal: 12,
+                paddingVertical: 7,
+                borderRadius: 8,
+            }} onPress={openWalkthrough} hitSlop={8}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 12,
+                color: AppColors.purple,
+            }}>
+                    Start Tour →
+                  </Text>
+                </TouchableScale>
+              </View>
+            </View>
+
             {/* Section 1: Appearance */}
             <View style={{
                 backgroundColor: AppColors.primaryLight,

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.0.6";
+export declare const LIB_VERSION = "2.0.7";

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 = '2.0.6';
+export const LIB_VERSION = '2.0.7';

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

@@ -2,7 +2,7 @@ import { InspectorStorage, PersistedSettings } from '../types';
 export { InspectorStorage, PersistedSettings };
 export declare function setCustomStorage(storage: InspectorStorage | null): void;
 export declare function loadSettings(): Promise<PersistedSettings>;
-export declare function saveSettings(settings: PersistedSettings): void;
+export declare function saveSettings(settings: PersistedSettings): Promise<void>;
 export declare function clearPersistedSettings(): Promise<void>;
 export declare const isPersistentStorageAvailable: () => boolean;
 export declare function getCustomStorage(): InspectorStorage | null;

package/dist/esm/helpers/settingsStore.js

@@ -48,9 +48,11 @@ export async function loadSettings() {
         return {};
     }
 }
-export function saveSettings(settings) {
+export async function saveSettings(settings) {
     try {
-        const raw = JSON.stringify(settings);
+        const existing = await loadSettings();
+        const merged = { ...existing, ...settings };
+        const raw = JSON.stringify(merged);
         if (customStorage) {
             customStorage.setItem(SETTINGS_KEY, raw);
             return;

package/dist/esm/index.js

@@ -89,6 +89,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [sectionFilters, setSectionFilters] = useState({});
     const [collapsedSections, setCollapsedSections] = useState(new Set());
     const [showHeaderInfo, setShowHeaderInfo] = useState(true);
+    const [isWalkthroughVisible, setIsWalkthroughVisible] = useState(true);
+    const hasCompletedWalkthroughRef = useRef(null);
     const [sortOrder, setSortOrder] = useState('newest');
     // #7 — sort order for the Logs (console) tab
     const [logSortOrder, setLogSortOrder] = useState('newest');
@@ -392,6 +394,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 };
                 setActiveTab(vis[dt] ? dt : 'apis');
             }
+            hasCompletedWalkthroughRef.current = saved.hasCompletedWalkthrough === true;
             settingsHydratedRef.current = true;
         });
         return () => {
@@ -857,6 +860,11 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             setSelectedReduxSlice(null);
             setSelectedReduxAction(null);
             setSelectedCrash(null);
+            // Trigger first-time walkthrough strictly on first FAB launch if not yet completed
+            if (hasCompletedWalkthroughRef.current === false) {
+                setIsWalkthroughVisible(true);
+                hasCompletedWalkthroughRef.current = true;
+            }
             // Track inspector opened event in GA4
             trackInspectorOpen({ activeTab: target });
             // Instant synchronization of data collected while modal was closed
@@ -1702,6 +1710,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setModalAnimationType,
         hasNavigationContext,
         setNavState,
+        isWalkthroughVisible,
+        setIsWalkthroughVisible,
+        openWalkthrough: () => {
+            setSettingsPage(null);
+            setIsWalkthroughVisible(true);
+        },
         // ─── Tabs ───────────────────────────────────────────────────────────
         activeTab,
         switchActiveTab,

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

@@ -211,6 +211,7 @@ export interface PersistedSettings {
     reduxExpandDepth?: number;
     showDuplicateLogs?: boolean;
     showUpdateToast?: boolean;
+    hasCompletedWalkthrough?: boolean;
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
@@ -244,6 +245,9 @@ export interface InspectorContextValue {
     setModalAnimationType: React.Dispatch<React.SetStateAction<'slide' | 'fade' | 'none'>>;
     hasNavigationContext: boolean;
     setNavState: React.Dispatch<React.SetStateAction<any>>;
+    isWalkthroughVisible: boolean;
+    setIsWalkthroughVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    openWalkthrough: () => void;
     activeTab: ActiveTab;
     switchActiveTab: (key: ActiveTab) => void;
     tabVisibility: Record<ActiveTab, boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",