react-native-inapp-inspector 2.3.15 → 2.3.16

package/src/components/Inspector/StorageTab.tsx

@@ -616,29 +616,6 @@ export const StorageTab = React.memo(() => {
             }
             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/src/components/Inspector/TabBar.tsx

@@ -10,6 +10,7 @@ import {
 import {useInspector} from './InspectorContext';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
 import {
   SignalIcon,
@@ -56,60 +57,70 @@ const TabBar = React.memo(() => {
         {(
           [
             {
+              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,
@@ -176,24 +187,50 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'redux' && (
                     <ReduxIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'bundle' && (
-                    <PackageIcon color={iconColor} size={14} />
+                  {tab.icon === 'storage' && (
+                    <DatabaseIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'performance' && (
-                    <PerformanceIcon color={iconColor} size={14} />
+                  {tab.icon === 'device' && (
+                    <SmartphoneIcon color={iconColor} size={14} />
                   )}
                   {tab.icon === 'crash' && (
                     <CrashIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'device' && (
-                    <SmartphoneIcon color={iconColor} size={14} />
+                  {tab.icon === 'bundle' && (
+                    <PackageIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'storage' && (
-                    <DatabaseIcon color={iconColor} size={14} />
+                  {tab.icon === 'performance' && (
+                    <PerformanceIcon 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"

package/src/components/NetworkIcons.tsx

@@ -1520,6 +1520,23 @@ export const PackageBoxIcon = ({
   );
 };
 
+export const StarIcon = ({
+  color = '#F59E0B',
+  size = 14,
+}: IconProps) => {
+  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,
@@ -2355,3 +2372,78 @@ export const TurtleIcon = ({
   </Svg>
 );
 
+export const HeadphonesIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <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,
+}: IconProps) => (
+  <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,
+}: IconProps) => (
+  <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,
+}: IconProps) => (
+  <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/src/constants/version.ts

@@ -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.3.15';
+export const LIB_VERSION = '2.3.16';

package/src/helpers/index.ts

@@ -24,6 +24,7 @@ import {
 } from '../types';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export * from './toast';
 
 /**
  * Returns true if running in local debug environment (connected to Metro/dev server, __DEV__ is true).

package/src/helpers/remoteConfig.ts

@@ -0,0 +1,212 @@
+import {ActiveTab} from '../types';
+
+/**
+ * Supported Remote Config keys for each module:
+ *
+ * 1. JSON Configuration:
+ *    - `inspector_modules` (e.g. `{"apis": true, "logs": true, "analytics": true, ...}`)
+ *    - `inapp_inspector_modules`
+ *
+ * 2. Individual Boolean Keys:
+ *    - `inspector_module_apis` / `inapp_inspector_apis` / `inspector_apis`
+ *    - `inspector_module_logs` / `inapp_inspector_logs` / `inspector_logs`
+ *    - `inspector_module_analytics` / `inapp_inspector_analytics` / `inspector_analytics`
+ *    - `inspector_module_redux` / `inapp_inspector_redux` / `inspector_redux`
+ *    - `inspector_module_storage` / `inapp_inspector_storage` / `inspector_storage`
+ *    - `inspector_module_device` / `inapp_inspector_device` / `inspector_device`
+ *    - `inspector_module_crash` / `inapp_inspector_crash` / `inspector_crash`
+ *    - `inspector_module_bundle` / `inapp_inspector_bundle` / `inspector_bundle`
+ *    - `inspector_module_performance` / `inapp_inspector_performance` / `inspector_performance`
+ *    - `inspector_module_debugging` / `inapp_inspector_debugging` / `inspector_debugging`
+ */
+
+const MODULE_KEYS: ActiveTab[] = [
+  'apis',
+  'logs',
+  'analytics',
+  'redux',
+  'storage',
+  'device',
+  'crash',
+  'bundle',
+  'performance',
+  'debugging',
+];
+
+let cachedRemoteConfigInstance: any = null;
+
+/**
+ * Dynamically resolves Firebase Remote Config instance if installed.
+ */
+export function getFirebaseRemoteConfig(customInstance?: any): any {
+  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;
+  }
+}
+
+/**
+ * Checks if @react-native-firebase/remote-config is available in the environment.
+ */
+export function isFirebaseRemoteConfigAvailable(customInstance?: any): boolean {
+  return Boolean(getFirebaseRemoteConfig(customInstance));
+}
+
+/**
+ * Helper to extract a boolean or JSON value from a Firebase Remote Config parameter.
+ */
+function extractValue(val: any): any {
+  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;
+    }
+  }
+  // Firebase Remote Config Value object with .asBoolean() or .asString()
+  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;
+}
+
+/**
+ * Fetches and activates latest values from Firebase Remote Config, then parses module enable/disable statuses.
+ * Returns a partial or complete mapping of module visibility flags, or null if Remote Config is unavailable.
+ *
+ * @param customInstance Optional custom remoteConfig instance from consumer app
+ * @param fetchTimeoutMs Timeout for fetch operation in ms (default: 8000)
+ */
+export async function fetchRemoteConfigModuleStatus(
+  customInstance?: any,
+  fetchTimeoutMs = 8000,
+): Promise<Partial<Record<ActiveTab, boolean>> | null> {
+  const rc = getFirebaseRemoteConfig(customInstance);
+  if (!rc) {
+    return null;
+  }
+
+  try {
+    // 1. Fetch & Activate with timeout protection
+    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(() => {
+      // If network fetch fails/times out, we still read cached/activated values
+    });
+
+    // 2. Read values from Remote Config
+    const result: Partial<Record<ActiveTab, boolean>> = {};
+
+    // Check JSON bundle key first: `inspector_modules` or `inapp_inspector_modules`
+    const jsonKeys = [
+      'inspector_modules',
+      'inapp_inspector_modules',
+      'react_native_inapp_inspector_modules',
+    ];
+
+    for (const jKey of jsonKeys) {
+      let rawVal: any;
+      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];
+          }
+        }
+      }
+    }
+
+    // Check individual module boolean flags (overrides JSON if explicitly defined)
+    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: any;
+        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;
+        }
+      }
+    }
+
+    // APIs module is fundamental core, keep true unless explicitly disabled via remote config
+    if (result.apis === undefined) {
+      result.apis = true;
+    }
+
+    return Object.keys(result).length > 0 ? result : null;
+  } catch (error) {
+    return null;
+  }
+}

package/src/helpers/searchQueryParser.ts

@@ -1,4 +1,5 @@
 import {NetworkLog, SearchScope} from '../types';
+import {markSearchFilterUsed} from './telemetry';
 
 export interface SearchQueryOptions {
   scope?: SearchScope;
@@ -18,6 +19,8 @@ export function matchNetworkLogQuery(
 ): boolean {
   if (!searchQuery || searchQuery.trim().length === 0) return true;
 
+  markSearchFilterUsed();
+
   const rawTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
   if (rawTokens.length === 0) return true;