react-native-inapp-inspector 1.1.14 → 1.1.16

package/dist/esm/components/SettingsView.js

@@ -0,0 +1,321 @@
+import React from 'react';
+import { Alert, Pressable, ScrollView, Switch, Text, View, } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import { WhiteBackNavigation, SunIcon, MoonIcon, SignalIcon, TerminalIcon, AnalyticsIcon, GlobeIcon, TrashIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import { toggleGlobalTheme } from '../styles';
+import { saveSettings, isPersistentStorageAvailable, clearPersistedSettings, } from '../helpers/settingsStore';
+export const SettingsView = ({ headerTopPadding, defaultTab, tabVisibility, onCloseSettings, onUpdateTabVisibility, onSetDefaultTab, }) => {
+    const { t } = useTranslation();
+    const [themeMode, setThemeMode] = React.useState(AppColors.primaryLight === AppColors.white ? 'light' : 'dark');
+    const handleToggleTheme = () => {
+        const nextIsDark = themeMode !== 'dark';
+        toggleGlobalTheme(nextIsDark);
+        const newTheme = nextIsDark ? 'dark' : 'light';
+        setThemeMode(newTheme);
+        saveSettings({ isDark: nextIsDark, theme: newTheme });
+    };
+    const renderSettingRow = (opts) => {
+        return (<Pressable onPress={opts.onPress} disabled={!opts.onPress} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors.dividerColor,
+            }}>
+        <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                flex: 1,
+                marginRight: 8,
+            }}>
+          <View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors.grayBackground,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+            {opts.icon}
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13,
+                color: AppColors.primaryBlack,
+            }}>
+              {opts.title}
+            </Text>
+            {opts.description ? (<Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors.grayTextWeak,
+                    marginTop: 2,
+                }}>
+                {opts.description}
+              </Text>) : null}
+          </View>
+        </View>
+        {opts.rightComponent}
+      </Pressable>);
+    };
+    return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+      <LinearGradient colors={[AppColors.purple, '#6B4EFF']} style={{ paddingTop: headerTopPadding, paddingBottom: 16 }}>
+        <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 16,
+            gap: 12,
+        }}>
+          <TouchableScale onPress={onCloseSettings} hitSlop={15} style={{
+            width: 36,
+            height: 36,
+            borderRadius: 18,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255,255,255,0.18)',
+        }}>
+            <WhiteBackNavigation />
+          </TouchableScale>
+          <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 18,
+            color: AppColors.white,
+        }}>
+            {t('settings.title')}
+          </Text>
+        </View>
+      </LinearGradient>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 32, gap: 16, paddingTop: 16 }}>
+        {/* Theme Settings */}
+        <View style={{
+            backgroundColor: AppColors.primaryLight,
+            marginHorizontal: 16,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            overflow: 'hidden',
+        }}>
+          <View style={{
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            backgroundColor: AppColors.grayBackground,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.dividerColor,
+        }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 11,
+            color: AppColors.grayTextWeak,
+            letterSpacing: 0.5,
+        }}>
+              {t('settings.appearance')}
+            </Text>
+          </View>
+          {renderSettingRow({
+            icon: themeMode === 'dark' ? (<MoonIcon color={AppColors.purple} size={16}/>) : (<SunIcon color={AppColors.lightOrange} size={16}/>),
+            title: t('settings.dark_mode'),
+            description: t('settings.dark_mode_desc'),
+            rightComponent: (<Switch value={themeMode === 'dark'} onValueChange={handleToggleTheme} trackColor={{
+                    false: AppColors.grayBorderSecondary,
+                    true: AppColors.purple,
+                }}/>),
+        })}
+        </View>
+
+        {/* Module Visibility Settings */}
+        <View style={{
+            backgroundColor: AppColors.primaryLight,
+            marginHorizontal: 16,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            overflow: 'hidden',
+        }}>
+          <View style={{
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            backgroundColor: AppColors.grayBackground,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.dividerColor,
+        }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 11,
+            color: AppColors.grayTextWeak,
+            letterSpacing: 0.5,
+        }}>
+              {t('settings.module_visibility')}
+            </Text>
+          </View>
+
+          {renderSettingRow({
+            icon: <SignalIcon color={AppColors.purple} size={16}/>,
+            title: t('settings.apis_tab'),
+            description: t('settings.apis_tab_desc'),
+            rightComponent: (<Switch value={tabVisibility.apis !== false} onValueChange={val => onUpdateTabVisibility('apis', val)} trackColor={{
+                    false: AppColors.grayBorderSecondary,
+                    true: AppColors.purple,
+                }}/>),
+        })}
+
+          {renderSettingRow({
+            icon: <TerminalIcon color={AppColors.purple} size={16}/>,
+            title: t('settings.logs_tab'),
+            description: t('settings.logs_tab_desc'),
+            rightComponent: (<Switch value={tabVisibility.logs !== false} onValueChange={val => onUpdateTabVisibility('logs', val)} trackColor={{
+                    false: AppColors.grayBorderSecondary,
+                    true: AppColors.purple,
+                }}/>),
+        })}
+
+          {renderSettingRow({
+            icon: <AnalyticsIcon color={AppColors.purple} size={16}/>,
+            title: t('settings.analytics_tab'),
+            description: t('settings.analytics_tab_desc'),
+            rightComponent: (<Switch value={tabVisibility.analytics !== false} onValueChange={val => onUpdateTabVisibility('analytics', val)} trackColor={{
+                    false: AppColors.grayBorderSecondary,
+                    true: AppColors.purple,
+                }}/>),
+        })}
+
+          {renderSettingRow({
+            icon: <TerminalIcon color={AppColors.purple} size={16}/>,
+            title: t('settings.redux_tab'),
+            description: t('settings.redux_tab_desc'),
+            rightComponent: (<Switch value={tabVisibility.redux !== false} onValueChange={val => onUpdateTabVisibility('redux', val)} trackColor={{
+                    false: AppColors.grayBorderSecondary,
+                    true: AppColors.purple,
+                }}/>),
+        })}
+        </View>
+
+        {/* Landing Tab Preference */}
+        <View style={{
+            backgroundColor: AppColors.primaryLight,
+            marginHorizontal: 16,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            overflow: 'hidden',
+        }}>
+          <View style={{
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            backgroundColor: AppColors.grayBackground,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.dividerColor,
+        }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 11,
+            color: AppColors.grayTextWeak,
+            letterSpacing: 0.5,
+        }}>
+              {t('settings.default_landing_tab')}
+            </Text>
+          </View>
+          {['apis', 'logs', 'analytics', 'redux'].map(tabKey => {
+            if (!tabVisibility[tabKey])
+                return null;
+            const isSelected = defaultTab === tabKey;
+            return (<TouchableScale key={tabKey} onPress={() => onSetDefaultTab(tabKey)} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    paddingVertical: 12,
+                    paddingHorizontal: 16,
+                    borderBottomWidth: 1,
+                    borderBottomColor: AppColors.dividerColor,
+                    backgroundColor: isSelected
+                        ? 'rgba(107, 78, 255, 0.05)'
+                        : AppColors.primaryLight,
+                }}>
+                <Text style={{
+                    fontFamily: isSelected
+                        ? AppFonts.interBold
+                        : AppFonts.interMedium,
+                    fontSize: 13,
+                    color: isSelected
+                        ? AppColors.purple
+                        : AppColors.primaryBlack,
+                }}>
+                  {tabKey.toUpperCase()} Tab
+                </Text>
+                <View style={{
+                    width: 18,
+                    height: 18,
+                    borderRadius: 9,
+                    borderWidth: isSelected ? 5 : 2,
+                    borderColor: isSelected
+                        ? AppColors.purple
+                        : AppColors.grayBorderSecondary,
+                }}/>
+              </TouchableScale>);
+        })}
+        </View>
+
+        {/* Storage & Persistence Settings */}
+        <View style={{
+            backgroundColor: AppColors.primaryLight,
+            marginHorizontal: 16,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+            overflow: 'hidden',
+        }}>
+          <View style={{
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            backgroundColor: AppColors.grayBackground,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.dividerColor,
+        }}>
+            <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 11,
+            color: AppColors.grayTextWeak,
+            letterSpacing: 0.5,
+        }}>
+              {t('settings.storage_persistence')}
+            </Text>
+          </View>
+          {renderSettingRow({
+            icon: <GlobeIcon color={AppColors.purple} size={16}/>,
+            title: t('settings.custom_storage'),
+            description: isPersistentStorageAvailable()
+                ? t('settings.custom_storage_active')
+                : t('settings.custom_storage_memory'),
+        })}
+
+          {renderSettingRow({
+            icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
+            title: t('settings.reset_settings'),
+            description: t('settings.reset_settings_desc'),
+            onPress: () => {
+                Alert.alert(t('settings.reset_confirm_title'), t('settings.reset_confirm_msg'), [
+                    { text: t('header.cancel'), style: 'cancel' },
+                    {
+                        text: t('settings.reset'),
+                        style: 'destructive',
+                        onPress: () => {
+                            clearPersistedSettings();
+                            Alert.alert(t('settings.reset'), t('settings.reset_done'));
+                        },
+                    },
+                ]);
+            },
+        })}
+        </View>
+      </ScrollView>
+    </View>);
+};
+export default SettingsView;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-declare const TouchableScale: ({ onPress, style, children, hitSlop, disabled, }: {
+declare const TouchableScale: React.NamedExoticComponent<{
     onPress?: () => void;
     style?: any;
     children?: React.ReactNode;
     hitSlop?: any;
     disabled?: boolean;
-}) => React.JSX.Element;
+}>;
 export default TouchableScale;

package/dist/esm/components/TouchableScale.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Platform } from 'react-native';
-const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
+const TouchableScale = React.memo(function TouchableScale({ onPress, style, children, hitSlop, disabled, }) {
     if (Platform.OS === 'android') {
         return (<Pressable disabled={disabled} onPress={onPress} hitSlop={hitSlop} style={({ pressed }) => [
                 style,
@@ -43,5 +43,5 @@ const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
         {children}
       </Animated.View>
     </Pressable>);
-};
+});
 export default TouchableScale;

package/dist/esm/components/TreeNode.js

@@ -8,8 +8,8 @@ import { ChevronIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth, }) {
-    const [localOpen, setLocalOpen] = useState(level < (defaultExpandDepth ?? 1));
-    const open = forceOpen !== undefined ? forceOpen : localOpen;
+    const [localOpen, setLocalOpen] = useState(forceOpen || level < (defaultExpandDepth ?? 1));
+    const open = localOpen;
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);
     function renderHighlighted(text) {

package/dist/esm/constants/index.js

@@ -16,18 +16,7 @@ export const METHOD_COLORS = {
     PATCH: AppColors.offerPurple,
     DELETE: AppColors.errorColor,
 };
-export const DOMAIN_COLORS = [
-    '#1a5276',
-    '#8e44ad',
-    '#1e8449',
-    '#c0392b',
-    '#d35400',
-    '#d68910',
-    '#16a085',
-    '#27ae60',
-    '#2c3e50',
-    '#c2185b',
-];
+export const DOMAIN_COLORS = AppColors.domainColors;
 export const DURATION_FAST_MS = 200;
 export const DURATION_SLOW_MS = 800;
 // Package version — auto-generated from package.json at build time.

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.14";
+export declare const LIB_VERSION = "1.1.16";

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

package/dist/esm/customHooks/consoleLogger.js

@@ -24,26 +24,102 @@ const formatArgs = (args) => {
     })
         .join(' ');
 };
-const getCallerFromStack = () => {
+// ─── Symbolication Helper for React Native Metro ────────────────────────────
+const symbolicateStack = async (stackString) => {
+    if (typeof __DEV__ === 'undefined' || !__DEV__)
+        return null;
     try {
-        const stack = new Error().stack;
-        if (!stack)
-            return 'Unknown';
-        const lines = stack.split('\n');
+        // 1. Try React Native's built-in symbolicateStackTrace if available
+        let symModule = null;
+        try {
+            // @ts-ignore
+            symModule = require('react-native/Libraries/Core/Devtools/symbolicateStackTrace');
+        }
+        catch { }
+        const symFn = symModule?.default || symModule;
+        if (typeof symFn === 'function') {
+            const res = await symFn(stackString);
+            if (res && Array.isArray(res.stack)) {
+                return res.stack;
+            }
+        }
+    }
+    catch { }
+    try {
+        // 2. Direct HTTP symbolication to Metro packager endpoint
+        const metroUrl = 'http://localhost:8081/symbolicate';
+        const response = await fetch(metroUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ stack: stackString }),
+        });
+        if (response.ok) {
+            const json = await response.json();
+            if (json && Array.isArray(json.stack)) {
+                return json.stack;
+            }
+        }
+    }
+    catch { }
+    return null;
+};
+const getStackDetails = (args) => {
+    try {
+        let errorStack;
+        if (args && args.length > 0) {
+            for (const arg of args) {
+                if (arg instanceof Error && arg.stack) {
+                    errorStack = arg.stack;
+                    break;
+                }
+                else if (arg &&
+                    typeof arg === 'object' &&
+                    typeof arg.stack === 'string') {
+                    errorStack = arg.stack;
+                    break;
+                }
+            }
+        }
+        const rawStack = new Error().stack;
+        const stackToUse = errorStack || rawStack;
+        if (!stackToUse)
+            return { caller: 'Unknown', errorStack };
+        const lines = stackToUse.split('\n');
+        let userCaller;
+        let fallbackCaller;
         for (let i = 0; i < lines.length; i++) {
             const line = lines[i];
-            // Skip internal console logger stack frames and native helpers
-            if (line.includes('consoleLogger') ||
+            if (!line ||
+                line.includes('consoleLogger') ||
                 line.includes('setupConsoleLogger') ||
-                line.includes('node_modules') ||
-                line.includes('Error')) {
+                line.includes('react-native-inapp-inspector') ||
+                line.trim() === 'Error') {
                 continue;
             }
-            return line.trim().replace(/^at /, '');
+            const isInternal = line.includes('react-native/Libraries') ||
+                line.includes('setUpConsole') ||
+                line.includes('ExceptionsManager') ||
+                line.includes('MessageQueue') ||
+                line.includes('metro-runtime') ||
+                line.includes('regenerator-runtime');
+            if (!fallbackCaller && !line.includes('setUpConsole')) {
+                fallbackCaller = line.trim().replace(/^at /, '');
+            }
+            if (!isInternal) {
+                userCaller = line.trim().replace(/^at /, '');
+                break;
+            }
         }
+        const cleanedStack = lines
+            .filter(l => !l.includes('consoleLogger') &&
+            !l.includes('setupConsoleLogger'))
+            .join('\n');
+        const caller = userCaller || fallbackCaller || 'Unknown';
+        return { caller, stack: cleanedStack || stackToUse, errorStack, stackToUse };
+    }
+    catch (e) {
+        return { caller: 'Unknown' };
     }
-    catch (e) { }
-    return 'Unknown';
 };
 const notify = () => {
     const snapshot = [...logs];
@@ -68,18 +144,66 @@ const addLog = (type, args, sourceMethod) => {
             message.toLowerCase().trim().includes(prefix.toLowerCase().trim()))) {
             return;
         }
-        const caller = getCallerFromStack();
+        const { caller, stack, errorStack, stackToUse } = getStackDetails(args);
         const newLog = {
             id: counter++,
             type,
             message,
             timestamp: Date.now(),
             caller,
+            stack,
+            errorStack,
+            rawArgs: args,
             sourceMethod,
         };
         logs.unshift(newLog);
         logs = logs.slice(0, MAX_LOGS);
         notify();
+        // Asynchronously symbolicate stack trace using Metro in DEV mode
+        if (stackToUse && typeof __DEV__ !== 'undefined' && __DEV__) {
+            const currentLogId = newLog.id;
+            symbolicateStack(stackToUse)
+                .then(symFrames => {
+                if (symFrames && Array.isArray(symFrames) && symFrames.length > 0) {
+                    const symLines = [];
+                    let symUserCaller;
+                    for (const frame of symFrames) {
+                        const file = (frame.file || '').replace(/^webpack:\/\/\/?/, '');
+                        const method = frame.methodName || '<anonymous>';
+                        const line = frame.lineNumber != null ? `:${frame.lineNumber}` : '';
+                        const col = frame.column != null ? `:${frame.column}` : '';
+                        const lineStr = `at ${method} (${file}${line}${col})`;
+                        symLines.push(lineStr);
+                        const isUserFile = file &&
+                            !file.includes('node_modules') &&
+                            !file.includes('react-native/') &&
+                            !file.includes('consoleLogger') &&
+                            !file.includes('setupConsoleLogger') &&
+                            (file.endsWith('.tsx') ||
+                                file.endsWith('.jsx') ||
+                                file.endsWith('.ts') ||
+                                file.endsWith('.js'));
+                        if (!symUserCaller && isUserFile) {
+                            symUserCaller = `${method} (${file}${line}${col})`;
+                        }
+                    }
+                    const targetLog = logs.find(l => l.id === currentLogId);
+                    if (targetLog) {
+                        if (symUserCaller) {
+                            targetLog.caller = symUserCaller;
+                        }
+                        else if (symLines.length > 0) {
+                            targetLog.caller = symLines[0].replace(/^at /, '');
+                        }
+                        if (symLines.length > 0) {
+                            targetLog.stack = symLines.join('\n');
+                        }
+                        notify();
+                    }
+                }
+            })
+                .catch(() => { });
+        }
     }
     catch (e) {
         // Fail-safe to prevent crash during logging

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

@@ -1,4 +1,3 @@
-import "./webViewLogger";
 type NetworkLog = {
     id: number;
     url: string;

package/dist/esm/customHooks/networkLogger.js

@@ -1,4 +1,3 @@
-import "./webViewLogger";
 import axios from "axios";
 let logs = [];
 let listeners = [];

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

@@ -1,12 +1,5 @@
-export interface ReduxHistoryEntry {
-    id: number;
-    type: string;
-    payload: any;
-    timestamp: string;
-    affectedSlices: string[];
-    prevState?: any;
-    nextState?: any;
-}
+import { ReduxHistoryEntry } from '../types';
+export { ReduxHistoryEntry };
 export declare const getReduxState: () => any;
 export declare const setReduxAutoRefresh: (val: boolean) => void;
 export declare const getReduxAutoRefresh: () => boolean;

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

@@ -0,0 +1,39 @@
+export declare enum InspectorTab {
+    APIs = "apis",
+    Logs = "logs",
+    Analytics = "analytics",
+    Redux = "redux"
+}
+export declare enum ApiDetailTab {
+    Response = "response",
+    Request = "request",
+    Headers = "headers",
+    Metadata = "metadata"
+}
+export declare enum JsonViewerMode {
+    Pretty = "pretty",
+    Raw = "raw",
+    Table = "table"
+}
+export declare enum ReduxSubTab {
+    State = "state",
+    Timeline = "timeline"
+}
+export declare enum ReduxActionSubTab {
+    Payload = "payload",
+    Diff = "diff",
+    State = "state"
+}
+export declare enum ConsoleLogLevel {
+    Info = "info",
+    Warn = "warn",
+    Error = "error"
+}
+export declare enum SortOrderEnum {
+    Newest = "newest",
+    Oldest = "oldest"
+}
+export declare enum AnalyticsSource {
+    Firebase = "firebase",
+    Manual = "manual"
+}