react-native-inapp-inspector 2.3.8 → 2.3.10

package/dist/esm/components/LogCard.js

@@ -4,7 +4,7 @@ import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
 import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
-import { CalendarIcon, ClockIcon, SizeIcon, GlobeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, } from './NetworkIcons';
+import { CalendarIcon, ClockIcon, SizeIcon, GlobeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, PinIcon, } from './NetworkIcons';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 import HighlightText from './HighlightText';
@@ -198,29 +198,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                   GQL
                 </Text>
               </View>)}
-
-            
-            {item.duration != null && !isFailed && (<View style={[
-                styles.chip,
-                {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                },
-            ]}>
-                <Text style={[
-                styles.chipText,
-                {
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: durationColor,
-                },
-            ]}>
-                  {item.duration}ms
-                </Text>
-              </View>)}
           </View>
 
           <View style={[
@@ -239,6 +216,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                     : isLoading
                         ? `${AppColors.darkOrange}30`
                         : `${statusColor}30`,
+                flexShrink: 0,
             },
         ]}>
             {renderStatusIcon()}
@@ -272,6 +250,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             alignItems: 'center',
             justifyContent: 'center',
             marginRight: 4,
+            flexShrink: 0,
         }}>
               <GlobeIcon color={AppColors.skyBlue} size={11}/>
             </View>
@@ -310,9 +289,39 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
 
         
         <View style={styles.cardFooterRow}>
-          <View style={styles.cardDateRow}>
-            <CalendarIcon color={AppColors.grayTextWeak} size={10}/>
-            <Text style={styles.cardDateText}>{triggeredAt}</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8 }}>
+            <View style={[styles.cardDateRow, { flexShrink: 0 }]}>
+              <CalendarIcon color={AppColors.grayTextWeak} size={10}/>
+              <Text style={styles.cardDateText}>{triggeredAt}</Text>
+            </View>
+
+            {item.caller && item.caller !== 'Unknown' && (<View style={[
+                styles.chip,
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors.skyBlue}14`,
+                    borderColor: `${AppColors.skyBlue}30`,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                    flexShrink: 1,
+                    minWidth: 0,
+                },
+            ]}>
+                <PinIcon color={AppColors.skyBlue} size={8.5}/>
+                <Text style={[
+                styles.chipText,
+                {
+                    color: AppColors.skyBlue,
+                    fontSize: 8.5,
+                    fontFamily: AppFonts.interMedium,
+                },
+            ]} numberOfLines={1} ellipsizeMode="middle">
+                  {item.caller}
+                </Text>
+              </View>)}
           </View>
 
           <View style={styles.cardFooterRight}>

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

@@ -133,3 +133,4 @@ export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -730,3 +730,7 @@ export const PencilIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
 export const PlusIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+export const LockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);

package/dist/esm/constants/index.js

@@ -18,6 +18,9 @@ export const METHOD_COLORS = {
     PUT: '#D97706',
     PATCH: '#7C3AED',
     DELETE: '#DC2626',
+    QUERY: '#0284C7',
+    OPTIONS: '#475569',
+    HEAD: '#0891B2',
 };
 export const DOMAIN_COLORS = AppColors.domainColors;
 export const DURATION_FAST_MS = 200;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.8";
+export declare const LIB_VERSION = "2.3.10";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.8';
+export const LIB_VERSION = '2.3.10';

package/dist/esm/helpers/telemetry.js

@@ -79,6 +79,36 @@ async function getOrCreateClientId() {
         return `${Math.floor(100000000 + Math.random() * 900000000)}.${Math.floor(1000000000 + Math.random() * 9000000000)}`;
     }
 }
+function isDeviceEmulator() {
+    try {
+        if (Platform.OS === 'android') {
+            const c = Platform.constants || {};
+            const model = String(c.Model || '').toLowerCase();
+            const brand = String(c.Brand || '').toLowerCase();
+            const fingerprint = String(c.Fingerprint || '').toLowerCase();
+            const hardware = String(c.Hardware || '').toLowerCase();
+            const manufacturer = String(c.Manufacturer || '').toLowerCase();
+            return (model.includes('emulator') ||
+                model.includes('sdk') ||
+                model.includes('google_sdk') ||
+                model.includes('vbox') ||
+                brand.includes('generic') ||
+                fingerprint.startsWith('generic') ||
+                hardware.includes('goldfish') ||
+                hardware.includes('ranchu') ||
+                manufacturer.includes('genymotion'));
+        }
+        if (Platform.OS === 'ios') {
+            const c = Platform.constants || {};
+            const model = String(c.Model || '').toLowerCase();
+            return model.includes('simulator') || Boolean(c.isSimulator);
+        }
+    }
+    catch {
+        return false;
+    }
+    return false;
+}
 function getSystemMetadata(environment) {
     const rnConstants = Platform.constants;
     const rnVersion = rnConstants?.reactNativeVersion
@@ -87,6 +117,7 @@ function getSystemMetadata(environment) {
     const isHermes = Boolean(typeof global.HermesInternal === 'object' && global.HermesInternal !== null);
     const isFabric = Boolean(global?.nativeFabricUIManager !== undefined);
     const isDev = Boolean(typeof __DEV__ !== 'undefined' && __DEV__);
+    const isEmulator = isDeviceEmulator();
     return {
         lib_version: LIB_VERSION,
         platform: Platform.OS,
@@ -95,6 +126,9 @@ function getSystemMetadata(environment) {
         is_hermes: isHermes,
         is_fabric: isFabric,
         is_dev: isDev,
+        is_emulator: isEmulator,
+        device_type: isEmulator ? 'emulator' : 'real_device',
+        app_mode: isDev ? 'local_mode' : 'bundled_application',
         environment: environment || (isDev ? 'DEV' : 'PROD'),
         engagement_time_msec: 1000,
     };

package/dist/esm/index.js

@@ -362,6 +362,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         return false;
     }, [latestNpmVersion]);
     useEffect(() => {
+        if (typeof __DEV__ === 'undefined' || !__DEV__) {
+            return;
+        }
         let cancelled = false;
         fetch('https://registry.npmjs.org/react-native-inapp-inspector/latest')
             .then(res => (res.ok ? res.json() : null))

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

@@ -603,6 +603,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         marginBottom: number;
+        minHeight: number;
     };
     cardHeaderLeft: {
         flexDirection: string;
@@ -610,11 +611,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flex: number;
         marginRight: number;
         gap: number;
+        minWidth: number;
     };
     cardHeaderRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     smallCheckbox: {
         width: number;
@@ -701,6 +704,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         flex: number;
+        minWidth: number;
         gap: number;
     };
     slugTag: {
@@ -713,6 +717,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingVertical: number;
         borderRadius: number;
         marginTop: number;
+        flexShrink: number;
     };
     slugText: {
         fontFamily: string;
@@ -725,17 +730,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardFooterRow: {
         flexDirection: string;
         alignItems: string;
         justifyContent: string;
         marginTop: number;
+        minHeight: number;
     };
     cardDateRow: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardDateText: {
         fontFamily: string;
@@ -747,6 +755,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     chip: {
         flexDirection: string;
@@ -848,11 +857,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         paddingBottom: number;
+        gap: number;
     };
     detailInfoRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     metaContainer: {
         backgroundColor: string;

package/dist/esm/styles/index.js

@@ -558,18 +558,21 @@ export const getRawStyles = (colors) => ({
         alignItems: 'center',
         justifyContent: 'space-between',
         marginBottom: 4,
+        minHeight: 22,
     },
     cardHeaderLeft: {
         flexDirection: 'row',
         alignItems: 'center',
         flex: 1,
-        marginRight: 8,
-        gap: 6,
+        marginRight: 6,
+        gap: 5,
+        minWidth: 0,
     },
     cardHeaderRight: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     smallCheckbox: {
         width: 15,
@@ -650,6 +653,7 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'flex-start',
         flex: 1,
+        minWidth: 0,
         gap: 6,
     },
     slugTag: {
@@ -662,6 +666,7 @@ export const getRawStyles = (colors) => ({
         paddingVertical: 1.5,
         borderRadius: 4,
         marginTop: 1,
+        flexShrink: 0,
     },
     slugText: {
         fontFamily: AppFonts.interMedium,
@@ -674,17 +679,20 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
+        flexShrink: 0,
     },
     cardFooterRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginTop: 2,
+        marginTop: 4,
+        minHeight: 18,
     },
     cardDateRow: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3.5,
+        flexShrink: 0,
     },
     cardDateText: {
         fontFamily: AppFonts.interRegular,
@@ -696,6 +704,7 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     chip: {
         flexDirection: 'row',
@@ -787,9 +796,15 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingBottom: 10,
+        paddingBottom: 8,
+        gap: 8,
+    },
+    detailInfoRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        flexShrink: 0,
     },
-    detailInfoRight: { flexDirection: 'row', alignItems: 'center', gap: 6 },
     metaContainer: {
         backgroundColor: colors.primaryLight,
         borderWidth: 1,

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

@@ -17,6 +17,9 @@ export declare const Method: {
     readonly Put: "PUT";
     readonly Patch: "PATCH";
     readonly Delete: "DELETE";
+    readonly Query: "QUERY";
+    readonly Options: "OPTIONS";
+    readonly Head: "HEAD";
 };
 export type Method = (typeof Method)[keyof typeof Method];
 export declare const StatusFilter: {

package/dist/esm/types/enums.js

@@ -16,6 +16,9 @@ export const Method = {
     Put: 'PUT',
     Patch: 'PATCH',
     Delete: 'DELETE',
+    Query: 'QUERY',
+    Options: 'OPTIONS',
+    Head: 'HEAD',
 };
 export const StatusFilter = {
     All: 'ALL',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "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",
@@ -105,7 +105,7 @@
     "prepare": "npm run build",
     "watch": "tsc -w",
     "prepack": "npm run build",
-    "publish": "node release.cjs",
+    "release": "node release.cjs",
     "bundle-visualizer": "react-native-bundle-visualizer"
   },
   "keywords": [

package/src/components/Inspector/AnalyticsTab.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState, useMemo, useEffect} from 'react';
+import React, {useCallback, useState, useMemo, useEffect, useRef} from 'react';
 import {
   FlatList,
   Pressable,
@@ -55,6 +55,7 @@ import {
   PinIcon,
   MoneyIcon,
   UserCheckIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 const AnalyticsHeader = React.memo(() => {
@@ -1090,6 +1091,7 @@ const AnalyticsTab = React.memo(() => {
     isAnalyticsFilterApplied,
   } = useInspector();
 
+  const listRef = useRef<FlatList>(null);
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
 
   const keyExtractor = useCallback(
@@ -1305,49 +1307,75 @@ const AnalyticsTab = React.memo(() => {
         style={{flex: 1}}
         onLayout={() => setIsAnalyticsLayoutReady(true)}>
         {isAnalyticsLayoutReady ? (
-          <FlatList
-            data={filteredAnalyticsEvents}
-            keyExtractor={keyExtractor}
-            ListHeaderComponent={AnalyticsHeader}
-            renderItem={renderItem}
-            initialNumToRender={12}
-            maxToRenderPerBatch={8}
-            windowSize={5}
-            removeClippedSubviews={true}
-            renderToHardwareTextureAndroid={true}
-            ListEmptyComponent={
-              <EmptyState
-                isSearch={analyticsSearch.length > 0}
-                searchQuery={analyticsSearch}
-                customTitle={
-                  analyticsSearch.length > 0
-                    ? 'No matching analytics events'
-                    : 'No analytics events yet'
-                }
-                customSub={
-                  analyticsSearch.length > 0
-                    ? `No events matched "${analyticsSearch}"`
-                    : 'Call setupAnalyticsLogger(analytics()) at app start.'
-                }
-                onClearSearch={() => setAnalyticsSearch('')}
-              />
-            }
-            ListFooterComponent={
-              filteredAnalyticsEvents.length > 0 ? (
-                <EndOfListFooter
-                  count={filteredAnalyticsEvents.length}
-                  label="events"
+          <>
+            <FlatList
+              ref={listRef}
+              data={filteredAnalyticsEvents}
+              keyExtractor={keyExtractor}
+              ListHeaderComponent={AnalyticsHeader}
+              renderItem={renderItem}
+              initialNumToRender={12}
+              maxToRenderPerBatch={8}
+              windowSize={5}
+              removeClippedSubviews={true}
+              renderToHardwareTextureAndroid={true}
+              ListEmptyComponent={
+                <EmptyState
+                  isSearch={analyticsSearch.length > 0}
+                  searchQuery={analyticsSearch}
+                  customTitle={
+                    analyticsSearch.length > 0
+                      ? 'No matching analytics events'
+                      : 'No analytics events yet'
+                  }
+                  customSub={
+                    analyticsSearch.length > 0
+                      ? `No events matched "${analyticsSearch}"`
+                      : 'Call setupAnalyticsLogger(analytics()) at app start.'
+                  }
+                  onClearSearch={() => setAnalyticsSearch('')}
                 />
-              ) : null
-            }
-            contentContainerStyle={[
-              styles.listContent,
-              filteredAnalyticsEvents.length === 0 && {
-                flexGrow: 1,
-              },
-            ]}
-            keyboardShouldPersistTaps="handled"
-          />
+              }
+              ListFooterComponent={
+                filteredAnalyticsEvents.length > 0 ? (
+                  <EndOfListFooter
+                    count={filteredAnalyticsEvents.length}
+                    label="events"
+                  />
+                ) : null
+              }
+              contentContainerStyle={[
+                styles.listContent,
+                filteredAnalyticsEvents.length === 0 && {
+                  flexGrow: 1,
+                },
+              ]}
+              keyboardShouldPersistTaps="handled"
+            />
+
+            <TouchableScale
+              onPress={() => {
+                try {
+                  listRef.current?.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                  });
+                } catch {
+                  try {
+                    listRef.current?.scrollToIndex({
+                      index: 0,
+                      animated: true,
+                    });
+                  } catch {}
+                }
+              }}
+              hitSlop={12}
+              style={styles.scrollTopBtn}>
+              <View style={{transform: [{rotate: '180deg'}]}}>
+                <ChevronIcon color={AppColors.white} size={18} />
+              </View>
+            </TouchableScale>
+          </>
         ) : null}
       </View>
     </>

package/src/components/Inspector/BundleTab.tsx

@@ -19,6 +19,7 @@ import HighlightText from '../HighlightText';
 import SegmentedTabs from '../SegmentedTabs';
 import AnimatedEntrance from '../AnimatedEntrance';
 import EndOfListFooter from '../EndOfListFooter';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
 import styles from '../../styles';
@@ -1400,6 +1401,8 @@ const BundleTab = React.memo(() => {
         </TouchableScale>
       </View>
 
+      <FeatureUnderDevNotice featureName="Metro Bundle Analyzer" />
+
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}

package/src/components/Inspector/ConsoleTab.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 import {
   FlatList,
   Pressable,
@@ -30,6 +30,7 @@ import {
   ErrorCircleIcon,
   AnalyticsIcon,
   HeaderPauseIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 const ConsoleTab = React.memo(() => {
@@ -49,6 +50,8 @@ const ConsoleTab = React.memo(() => {
     setIsConsolePaused,
   } = useInspector();
 
+  const listRef = useRef<FlatList>(null);
+
   const renderItem = useCallback(
     ({item, index}: {item: any; index: number}) => (
       <AnimatedEntrance index={index} distance={8}>
@@ -668,6 +671,7 @@ const ConsoleTab = React.memo(() => {
       </View>
 
       <FlatList
+        ref={listRef}
         data={filteredConsoleLogs}
         keyExtractor={keyExtractor}
         ListHeaderComponent={listHeader}
@@ -705,6 +709,29 @@ const ConsoleTab = React.memo(() => {
         ]}
         keyboardShouldPersistTaps="handled"
       />
+
+      <TouchableScale
+        onPress={() => {
+          try {
+            listRef.current?.scrollToOffset({
+              offset: 0,
+              animated: true,
+            });
+          } catch {
+            try {
+              listRef.current?.scrollToIndex({
+                index: 0,
+                animated: true,
+              });
+            } catch {}
+          }
+        }}
+        hitSlop={12}
+        style={styles.scrollTopBtn}>
+        <View style={{transform: [{rotate: '180deg'}]}}>
+          <ChevronIcon color={AppColors.white} size={18} />
+        </View>
+      </TouchableScale>
     </View>
   );
 });