react-native-inapp-inspector 2.3.15 → 2.3.16

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { View, Text, ScrollView, FlatList, TextInput, Modal, Alert, StyleSheet, ActivityIndicator, Platform, } from 'react-native';
 import TouchableScale from '../TouchableScale';
-import globalStyles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
@@ -397,28 +396,6 @@ export const StorageTab = React.memo(() => {
                     </Text>
                   </TouchableScale>)}
               </View>} ListFooterComponent={<View style={{ height: 60 }}/>}/>
-
-          <TouchableScale onPress={() => {
-                try {
-                    listRef.current?.scrollToOffset({
-                        offset: 0,
-                        animated: true,
-                    });
-                }
-                catch {
-                    try {
-                        listRef.current?.scrollToIndex({
-                            index: 0,
-                            animated: true,
-                        });
-                    }
-                    catch { }
-                }
-            }} hitSlop={12} style={globalStyles.scrollTopBtn}>
-            <View style={{ transform: [{ rotate: '180deg' }] }}>
-              <ChevronIcon color={AppColors.white} size={18}/>
-            </View>
-          </TouchableScale>
         </>)}
 
       

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

@@ -3,6 +3,7 @@ import { Animated, Platform, ScrollView, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
@@ -16,60 +17,70 @@ const TabBar = React.memo(() => {
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
             {
+                id: 1,
                 key: 'apis',
                 label: 'APIs',
                 count: logs.length,
                 icon: 'apis',
             },
             {
+                id: 2,
                 key: 'logs',
                 label: 'Logs',
                 count: consoleLogs.length,
                 icon: 'logs',
             },
             {
+                id: 3,
                 key: 'analytics',
                 label: 'Analytics',
                 count: analyticsEvents.length,
                 icon: 'analytics',
             },
             {
+                id: 4,
                 key: 'redux',
                 label: 'Redux',
                 count: 0,
                 icon: 'redux',
             },
             {
-                key: 'bundle',
-                label: 'Bundle',
+                id: 5,
+                key: 'storage',
+                label: 'Storage',
                 count: 0,
-                icon: 'bundle',
+                icon: 'storage',
             },
             {
-                key: 'performance',
-                label: 'Performance',
+                id: 6,
+                key: 'device',
+                label: 'Device',
                 count: 0,
-                icon: 'performance',
+                icon: 'device',
             },
             {
+                id: 7,
                 key: 'crash',
                 label: 'Crash',
                 count: crashRecords?.length || 0,
                 icon: 'crash',
             },
             {
-                key: 'device',
-                label: 'Device',
+                id: 8,
+                key: 'bundle',
+                label: 'Bundle',
                 count: 0,
-                icon: 'device',
+                icon: 'bundle',
             },
             {
-                key: 'storage',
-                label: 'Storage',
+                id: 9,
+                key: 'performance',
+                label: 'Performance',
                 count: 0,
-                icon: 'storage',
+                icon: 'performance',
             },
             {
+                id: 10,
                 key: 'debugging',
                 label: 'Debugging',
                 count: 0,
@@ -119,12 +130,36 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'debugging' && (<QrCodeIcon color={iconColor} size={14}/>)}
+                  <View style={{
+                    minWidth: 20,
+                    height: 20,
+                    paddingHorizontal: 4,
+                    borderRadius: 10,
+                    backgroundColor: isActive
+                        ? `${AppColors.white}33`
+                        : `${AppColors.purple}1F`,
+                    borderWidth: 1,
+                    borderColor: isActive
+                        ? `${AppColors.white}66`
+                        : `${AppColors.purple}40`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    lineHeight: 12,
+                    color: isActive ? AppColors.white : AppColors.purple,
+                }}>
+                      #{tab.id}
+                    </Text>
+                  </View>
                   <Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles.contentTabButtonText,
                     isActive &&

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

@@ -91,6 +91,7 @@ export declare const CartIcon: ({ color, size }: IconProps) => React.JSX.Element
 export declare const MoneyIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ExternalLinkIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PackageBoxIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const StarIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const GitHubIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const LinkChainIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const AppleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -138,3 +139,7 @@ export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const UnlockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const RocketIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const TurtleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const HeadphonesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const HelpCircleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const SendIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LifeBuoyIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -510,6 +510,11 @@ export const PackageBoxIcon = ({ color = AppColors.grayTextWeak, size = 14, }) =
       <Path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const StarIcon = ({ color = '#F59E0B', size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
 export const GitHubIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
@@ -760,3 +765,24 @@ export const TurtleIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
     <Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2"/>
     <Path d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
   </Svg>);
+export const HeadphonesIcon = ({ color = AppColors.white, size = 20, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M3 18v-6a9 9 0 0 1 18 0v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const HelpCircleIcon = ({ color = AppColors.white, size = 20, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+    <Path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Line x1="12" y1="17" x2="12.01" y2="17" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </Svg>);
+export const SendIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M22 2L11 13" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M22 2L15 22L11 13L2 9L22 2Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const LifeBuoyIcon = ({ color = AppColors.white, size = 20, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+    <Circle cx="12" cy="12" r="4" stroke={color} strokeWidth="2"/>
+    <Line x1="4.93" y1="4.93" x2="9.17" y2="9.17" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <Line x1="14.83" y1="9.17" x2="19.07" y2="4.93" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <Line x1="14.83" y1="14.83" x2="19.07" y2="19.07" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <Line x1="4.93" y1="19.07" x2="9.17" y2="14.83" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </Svg>);

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.15";
+export declare const LIB_VERSION = "2.3.16";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.15';
+export const LIB_VERSION = '2.3.16';

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

@@ -1,6 +1,7 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export * from './toast';
 export declare const isLocalDebugEnvironment: () => boolean;
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;

package/dist/esm/helpers/index.js

@@ -5,6 +5,7 @@ import { AppColors } from '../styles/AppColors';
 import { DOMAIN_COLORS, DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export * from './toast';
 export const isLocalDebugEnvironment = () => {
     const isDev = typeof __DEV__ !== 'undefined' && Boolean(__DEV__);
     const scriptURL = NativeModules.SourceCode?.scriptURL || '';

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

@@ -0,0 +1,4 @@
+import { ActiveTab } from '../types';
+export declare function getFirebaseRemoteConfig(customInstance?: any): any;
+export declare function isFirebaseRemoteConfigAvailable(customInstance?: any): boolean;
+export declare function fetchRemoteConfigModuleStatus(customInstance?: any, fetchTimeoutMs?: number): Promise<Partial<Record<ActiveTab, boolean>> | null>;

package/dist/esm/helpers/remoteConfig.js

@@ -0,0 +1,160 @@
+const MODULE_KEYS = [
+    'apis',
+    'logs',
+    'analytics',
+    'redux',
+    'storage',
+    'device',
+    'crash',
+    'bundle',
+    'performance',
+    'debugging',
+];
+let cachedRemoteConfigInstance = null;
+export function getFirebaseRemoteConfig(customInstance) {
+    if (customInstance && typeof customInstance === 'object') {
+        cachedRemoteConfigInstance = customInstance;
+        return customInstance;
+    }
+    if (cachedRemoteConfigInstance) {
+        return cachedRemoteConfigInstance;
+    }
+    try {
+        const rcModule = require('@react-native-firebase/remote-config');
+        const instance = typeof rcModule.default === 'function'
+            ? rcModule.default()
+            : typeof rcModule === 'function'
+                ? rcModule()
+                : rcModule;
+        cachedRemoteConfigInstance = instance;
+        return instance;
+    }
+    catch {
+        return null;
+    }
+}
+export function isFirebaseRemoteConfigAvailable(customInstance) {
+    return Boolean(getFirebaseRemoteConfig(customInstance));
+}
+function extractValue(val) {
+    if (val === null || val === undefined)
+        return undefined;
+    if (typeof val === 'boolean')
+        return val;
+    if (typeof val === 'number')
+        return val !== 0;
+    if (typeof val === 'string') {
+        const lower = val.trim().toLowerCase();
+        if (lower === 'true' || lower === '1' || lower === 'enabled' || lower === 'on')
+            return true;
+        if (lower === 'false' || lower === '0' || lower === 'disabled' || lower === 'off')
+            return false;
+        try {
+            return JSON.parse(val);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    if (typeof val.asBoolean === 'function') {
+        return val.asBoolean();
+    }
+    if (typeof val.asString === 'function') {
+        const str = val.asString();
+        const lower = str.trim().toLowerCase();
+        if (lower === 'true' || lower === '1' || lower === 'enabled' || lower === 'on')
+            return true;
+        if (lower === 'false' || lower === '0' || lower === 'disabled' || lower === 'off')
+            return false;
+        try {
+            return JSON.parse(str);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return undefined;
+}
+export async function fetchRemoteConfigModuleStatus(customInstance, fetchTimeoutMs = 8000) {
+    const rc = getFirebaseRemoteConfig(customInstance);
+    if (!rc) {
+        return null;
+    }
+    try {
+        const fetchPromise = (async () => {
+            if (typeof rc.fetchAndActivate === 'function') {
+                await rc.fetchAndActivate();
+            }
+            else {
+                if (typeof rc.fetch === 'function') {
+                    await rc.fetch();
+                }
+                if (typeof rc.activate === 'function') {
+                    await rc.activate();
+                }
+            }
+        })();
+        const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Remote Config fetch timeout')), fetchTimeoutMs));
+        await Promise.race([fetchPromise, timeoutPromise]).catch(() => {
+        });
+        const result = {};
+        const jsonKeys = [
+            'inspector_modules',
+            'inapp_inspector_modules',
+            'react_native_inapp_inspector_modules',
+        ];
+        for (const jKey of jsonKeys) {
+            let rawVal;
+            if (typeof rc.getValue === 'function') {
+                try {
+                    rawVal = rc.getValue(jKey);
+                }
+                catch { }
+            }
+            else if (rc[jKey] !== undefined) {
+                rawVal = rc[jKey];
+            }
+            const parsed = extractValue(rawVal);
+            if (parsed && typeof parsed === 'object') {
+                for (const modKey of MODULE_KEYS) {
+                    if (typeof parsed[modKey] === 'boolean') {
+                        result[modKey] = parsed[modKey];
+                    }
+                }
+            }
+        }
+        for (const modKey of MODULE_KEYS) {
+            const paramKeys = [
+                `inspector_module_${modKey}`,
+                `inapp_inspector_${modKey}`,
+                `inspector_${modKey}`,
+                `inapp_inspector_module_${modKey}`,
+                `rn_inspector_${modKey}`,
+            ];
+            for (const pKey of paramKeys) {
+                let rawVal;
+                if (typeof rc.getValue === 'function') {
+                    try {
+                        rawVal = rc.getValue(pKey);
+                    }
+                    catch { }
+                }
+                else if (rc[pKey] !== undefined) {
+                    rawVal = rc[pKey];
+                }
+                const boolVal = extractValue(rawVal);
+                if (typeof boolVal === 'boolean') {
+                    result[modKey] = boolVal;
+                    break;
+                }
+            }
+        }
+        if (result.apis === undefined) {
+            result.apis = true;
+        }
+        return Object.keys(result).length > 0 ? result : null;
+    }
+    catch (error) {
+        return null;
+    }
+}

package/dist/esm/helpers/searchQueryParser.js

@@ -1,6 +1,8 @@
+import { markSearchFilterUsed } from './telemetry';
 export function matchNetworkLogQuery(log, searchQuery, routePath, _options) {
     if (!searchQuery || searchQuery.trim().length === 0)
         return true;
+    markSearchFilterUsed();
     const rawTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
     if (rawTokens.length === 0)
         return true;

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

@@ -1,2 +1,7 @@
 export declare function setTelemetryEnabled(enabled: boolean): void;
+export declare function markSearchFilterUsed(): void;
 export declare function trackActiveTelemetryHeartbeat(telemetryEnabled?: boolean, environment?: string): Promise<void>;
+export declare function trackTelemetryEvent(eventName: string, eventParams?: Record<string, any>): Promise<void>;
+export declare function trackInspectorTabView(tabName: string): void;
+export declare function trackInspectorScreenView(screenName: string): void;
+export declare function trackInspectorScreenRecord(action: 'start' | 'stop' | 'toggle', recordingType?: string): void;