react-native-inapp-inspector 1.1.13 → 1.1.14

package/dist/esm/index.js

@@ -26,7 +26,7 @@ import { formatDateTime, getStatusColor, getNavigationInfo, deduplicateLogs, get
 // #5 — settings persistence
 import { loadSettings, saveSettings, setCustomStorage, isPersistentStorageAvailable, clearPersistedSettings, } from './helpers/settingsStore';
 // Assets
-import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, ChevronIcon, WipeIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, TrendingUpIcon, MotionIcon, } from './components/NetworkIcons';
+import { EmptyRadarIcon, FailIcon, SearchIcon, ScreenIcon, ClearIcon, SortArrowIcon, FilterIcon, InsightsIcon, GlobeIcon, DownloadIcon, CloseWhite, TrashIcon, WhiteBackNavigation, TerminalIcon, SignalIcon, AnalyticsIcon, SunIcon, MoonIcon, BrandCircleIcon, HtmlIcon, CssIcon, JsIcon, ClockIcon, EyeIcon, CheckIcon, SettingsIcon, RequestIcon, ResponseIcon, HeadersIcon, StatusIcon, ChevronIcon, WipeIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, MotionIcon, } from './components/NetworkIcons';
 import ErrorBoundary from './components/ErrorBoundary';
 // Stylesheet
 import { AppColors } from './styles/AppColors';
@@ -37,8 +37,8 @@ import { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, } from './c
 // Console
 import { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, } from './customHooks/consoleLogger';
 import { IGNORED_LOG_PREFIXES } from './customHooks/logFilters';
-import { subscribeAnalyticsEvents, clearAnalyticsEvents, autoSetupAnalyticsLogger, } from './customHooks/analyticsLogger';
-import AnalyticsEventCard, { getEventColor, } from './components/AnalyticsEventCard';
+import { subscribeAnalyticsEvents, clearAnalyticsEvents, autoSetupAnalyticsLogger, getCurrentUserProperties, getCurrentUserId, getDefaultEventParameters, getCollectionEnabled, } from './customHooks/analyticsLogger';
+import AnalyticsEventCard from './components/AnalyticsEventCard';
 import AnalyticsDetail from './components/AnalyticsDetail';
 import { getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
 let OriginalWebView = null;
@@ -233,10 +233,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [settingsActiveSubTab, setSettingsActiveSubTab] = useState('module');
     const [insightsActiveSubTab, setInsightsActiveSubTab] = useState('apis');
     const [tabVisibility, setTabVisibility] = useState({
-        insights: true,
+        insights: false,
         apis: true,
         logs: true,
-        analytics: false,
+        analytics: true,
         webview: false,
         redux: false,
     });
@@ -256,10 +256,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
         setModalHeightPercent(90);
         setModalAnimationType('slide');
         setTabVisibility({
-            insights: true,
+            insights: false,
             apis: true,
             logs: true,
-            analytics: false,
+            analytics: true,
             webview: false,
             redux: false,
         });
@@ -324,10 +324,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                 const dt = saved.defaultTab;
                 const vis = {
                     ...{
-                        insights: true,
+                        insights: false,
                         apis: true,
                         logs: true,
-                        analytics: false,
+                        analytics: true,
                         webview: false,
                         redux: false,
                     },
@@ -437,7 +437,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
         });
     };
     const switchActiveTab = useCallback((key) => {
-        animateNextLayout();
         setActiveTab(key);
     }, []);
     const navigateFromDashboard = (key) => {
@@ -491,8 +490,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [selectedEvent, setSelectedEvent] = useState(null);
     const [analyticsSearch, setAnalyticsSearch] = useState('');
     const [hideScreenView, setHideScreenView] = useState(true);
-    const [analyticsSubTab, setAnalyticsSubTab] = useState('ga_events');
-    const [topEventsExpanded, setTopEventsExpanded] = useState(true);
+    const [isAnalyticsLayoutReady, setIsAnalyticsLayoutReady] = useState(false);
+    const [analyticsHeaderExpanded, setAnalyticsHeaderExpanded] = useState(false);
     const [newEventIds, setNewEventIds] = useState(new Set());
     const prevEventIdsRef = useRef(new Set());
     const [navState, setNavState] = useState(null);
@@ -688,6 +687,84 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             }).start();
         }
     }, [newLogIds]);
+    const renderAnalyticsHeader = () => {
+        const userId = getCurrentUserId();
+        const userProperties = getCurrentUserProperties();
+        const defaultParams = getDefaultEventParameters();
+        const isTrackingEnabled = getCollectionEnabled();
+        const hasUserProps = Object.keys(userProperties).length > 0;
+        const hasDefaultParams = Object.keys(defaultParams).length > 0;
+        const totalEvents = filteredAnalyticsEvents.length;
+        return (<View style={styles.analyticsHeaderCard}>
+        <View style={[styles.analyticsHeaderTop, !analyticsHeaderExpanded && { marginBottom: 0 }]}>
+          <View style={{ flex: 1 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <Text style={styles.analyticsHeaderTitle}>Session Info</Text>
+              <View style={[
+                styles.statusDot,
+                { backgroundColor: isTrackingEnabled ? AppColors.greenColor : AppColors.errorColor }
+            ]}/>
+              <Text style={styles.statusText}>
+                {isTrackingEnabled ? 'Active' : 'Paused'}
+              </Text>
+            </View>
+            <Text style={styles.analyticsHeaderSubtitle} numberOfLines={1}>
+              {userId ? `User ID: ${userId}` : 'Anonymous Session'}
+            </Text>
+          </View>
+          
+          <TouchableOpacity style={styles.analyticsHeaderToggle} activeOpacity={0.7} onPress={() => {
+                animateNextLayout();
+                setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
+            }}>
+            <Text style={styles.analyticsHeaderToggleText}>
+              {analyticsHeaderExpanded ? 'Collapse' : 'Expand'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {analyticsHeaderExpanded && (<>
+            {/* Stats Row */}
+            <View style={styles.analyticsStatsRow}>
+              <View style={styles.analyticsStatBox}>
+                <Text style={styles.analyticsStatValue}>{totalEvents}</Text>
+                <Text style={styles.analyticsStatLabel}>Events</Text>
+              </View>
+              <View style={styles.analyticsStatBox}>
+                <Text style={styles.analyticsStatValue}>
+                  {Object.keys(userProperties).length}
+                </Text>
+                <Text style={styles.analyticsStatLabel}>User Props</Text>
+              </View>
+              <View style={styles.analyticsStatBox}>
+                <Text style={styles.analyticsStatValue}>
+                  {Object.keys(defaultParams).length}
+                </Text>
+                <Text style={styles.analyticsStatLabel}>Defaults</Text>
+              </View>
+            </View>
+
+            {/* Details Section */}
+            {(hasUserProps || hasDefaultParams) && (<View style={styles.analyticsHeaderDetails}>
+                {hasUserProps && (<View style={{ marginBottom: 10 }}>
+                    <Text style={styles.detailsGroupTitle}>Active User Properties</Text>
+                    {Object.entries(userProperties).map(([k, v]) => (<View key={k} style={styles.detailsRow}>
+                        <Text style={styles.detailsKey} selectable={true}>{k}</Text>
+                        <Text style={styles.detailsValue} selectable={true}>{String(v)}</Text>
+                      </View>))}
+                  </View>)}
+
+                {hasDefaultParams && (<View>
+                    <Text style={styles.detailsGroupTitle}>Default Event Parameters</Text>
+                    {Object.entries(defaultParams).map(([k, v]) => (<View key={k} style={styles.detailsRow}>
+                        <Text style={styles.detailsKey} selectable={true}>{k}</Text>
+                        <Text style={styles.detailsValue} selectable={true}>{String(v)}</Text>
+                      </View>))}
+                  </View>)}
+              </View>)}
+          </>)}
+      </View>);
+    };
     // #6 — every time the inspector is opened, land on the chosen default tab.
     useEffect(() => {
         if (visible) {
@@ -856,6 +933,11 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             unsubscribeRedux();
         };
     }, []);
+    useEffect(() => {
+        if (activeTab !== 'analytics') {
+            setIsAnalyticsLayoutReady(false);
+        }
+    }, [activeTab]);
     useEffect(() => {
         setReqExpanded(undefined);
         setResExpanded(undefined);
@@ -1199,15 +1281,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             analytics: `${searchedLogs.filter(l => l.message.toLowerCase().includes('[analytics error]')).length}/${total}`,
         };
     }, [visibleConsoleLogs, logSearch]);
-    const topEventsArray = useMemo(() => {
-        const freq = {};
-        filteredAnalyticsEvents.forEach(e => {
-            if (e.name === 'screen_view')
-                return;
-            freq[e.name] = (freq[e.name] || 0) + 1;
-        });
-        return Object.entries(freq).sort((a, b) => b[1] - a[1]);
-    }, [filteredAnalyticsEvents]);
     function closeModal() {
         animateNextLayout();
         setVisible(false);
@@ -3646,16 +3719,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             </Animated.View>
           </View>
           {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
-                styles.fabBadge,
-                hasErrors ? styles.fabBadgeError : styles.fabBadgeNormal,
-                { transform: [{ scale: badgeAnim }] },
-            ]}>
-              <Text style={styles.fabBadgeText}>
-                {logs.length + analyticsEvents.length > 99
-                ? '99+'
-                : logs.length + analyticsEvents.length}
-              </Text>
-            </Animated.View>)}
+                styles.fabGreenDot,
+                { transform: [{ scale: unreadPulseAnim }] },
+            ]}/>)}
         </TouchableScale>
       </Animated.View>
 
@@ -3877,108 +3943,108 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         </TouchableScale>) : null}
                     </View>
 
-                    <View style={styles.headerCenter}>
-                      {selected != null ? (<View style={styles.headerDetailCenter}>
-                          <View style={styles.headerDetailRow}>
-                            <View style={[
-                    styles.headerMethodBadge,
-                    {
-                        backgroundColor: METHOD_COLORS[selected.method] ??
-                            AppColors.grayText,
-                    },
-                ]}>
-                              <Text style={styles.headerMethodText}>
-                                {selected.method}
+                    {(selected != null || selectedEvent != null) && (<View style={styles.headerCenter}>
+                        {selected != null ? (<View style={styles.headerDetailCenter}>
+                            <View style={styles.headerDetailRow}>
+                              <View style={[
+                        styles.headerMethodBadge,
+                        {
+                            backgroundColor: METHOD_COLORS[selected.method] ??
+                                AppColors.grayText,
+                        },
+                    ]}>
+                                <Text style={styles.headerMethodText}>
+                                  {selected.method}
+                                </Text>
+                              </View>
+                              <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                                {detailTitle}
                               </Text>
                             </View>
-                            <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                              {detailTitle}
-                            </Text>
-                          </View>
-                          <View style={styles.headerDetailSubRow}>
-                            <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
-                    borderRadius: 20,
-                    backgroundColor: `${getStatusColor(selected.status)}26`,
-                    borderWidth: 1,
-                    borderColor: `${getStatusColor(selected.status)}55`,
-                }}>
+                            <View style={styles.headerDetailSubRow}>
+                              <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: `${getStatusColor(selected.status)}26`,
+                        borderWidth: 1,
+                        borderColor: `${getStatusColor(selected.status)}55`,
+                    }}>
+                                <View style={[
+                        styles.headerStatusDot,
+                        {
+                            backgroundColor: getStatusColor(selected.status),
+                        },
+                    ]}/>
+                                <Text style={[
+                        styles.headerSubTitle,
+                        { fontFamily: AppFonts.interBold },
+                    ]}>
+                                  {selected.status === 0
+                        ? 'Failed'
+                        : selected.status ?? 'Pending'}
+                                </Text>
+                              </View>
+                              <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: 'rgba(255,255,255,0.16)',
+                    }}>
+                                <ClockIcon color="#FFFFFF" size={11}/>
+                                <Text style={styles.headerSubTitle}>
+                                  {selected.duration != null
+                        ? `${selected.duration}ms`
+                        : '—'}
+                                </Text>
+                              </View>
+                            </View>
+                          </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
+                            <View style={styles.headerDetailRow}>
                               <View style={[
-                    styles.headerStatusDot,
-                    {
-                        backgroundColor: getStatusColor(selected.status),
-                    },
-                ]}/>
-                              <Text style={[
-                    styles.headerSubTitle,
-                    { fontFamily: AppFonts.interBold },
-                ]}>
-                                {selected.status === 0
-                    ? 'Failed'
-                    : selected.status ?? 'Pending'}
+                        styles.headerMethodBadge,
+                        {
+                            backgroundColor: selectedEvent.source === 'firebase'
+                                ? 'rgba(224,123,26,0.3)'
+                                : 'rgba(124,92,191,0.3)',
+                        },
+                    ]}>
+                                <Text style={styles.headerMethodText}>
+                                  {selectedEvent.source === 'firebase'
+                        ? 'FB'
+                        : 'MAN'}
+                                </Text>
+                              </View>
+                              <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                                {selectedEvent.name}
                               </Text>
                             </View>
-                            <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
-                    borderRadius: 20,
-                    backgroundColor: 'rgba(255,255,255,0.16)',
-                }}>
-                              <ClockIcon color="#FFFFFF" size={11}/>
+                            <View style={styles.headerDetailSubRow}>
+                              <View style={[
+                        styles.headerStatusDot,
+                        {
+                            backgroundColor: selectedEvent.source === 'firebase'
+                                ? '#E07B1A'
+                                : AppColors.purple,
+                        },
+                    ]}/>
                               <Text style={styles.headerSubTitle}>
-                                {selected.duration != null
-                    ? `${selected.duration}ms`
-                    : '—'}
+                                {Object.keys(selectedEvent.params).length} param
+                                {Object.keys(selectedEvent.params).length !== 1
+                        ? 's'
+                        : ''}
+                                {' · '}
+                                {selectedEvent.source}
                               </Text>
                             </View>
-                          </View>
-                        </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
-                          <View style={styles.headerDetailRow}>
-                            <View style={[
-                    styles.headerMethodBadge,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? 'rgba(224,123,26,0.3)'
-                            : 'rgba(124,92,191,0.3)',
-                    },
-                ]}>
-                              <Text style={styles.headerMethodText}>
-                                {selectedEvent.source === 'firebase'
-                    ? 'FB'
-                    : 'MAN'}
-                              </Text>
-                            </View>
-                            <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                              {selectedEvent.name}
-                            </Text>
-                          </View>
-                          <View style={styles.headerDetailSubRow}>
-                            <View style={[
-                    styles.headerStatusDot,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? '#E07B1A'
-                            : AppColors.purple,
-                    },
-                ]}/>
-                            <Text style={styles.headerSubTitle}>
-                              {Object.keys(selectedEvent.params).length} param
-                              {Object.keys(selectedEvent.params).length !== 1
-                    ? 's'
-                    : ''}
-                              {' · '}
-                              {selectedEvent.source}
-                            </Text>
-                          </View>
-                        </View>) : null}
-                    </View>
+                          </View>) : null}
+                      </View>)}
 
                     <View style={[
                 styles.headerRight,
@@ -4146,7 +4212,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                       {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
                       <View style={[
                     styles.toolbarRow,
-                    { marginTop: 12, marginBottom: 4 },
+                    { marginTop: 12, marginBottom: 8 },
                 ]}>
                         <View style={styles.searchContainer}>
                           <SearchIcon color={AppColors.grayTextWeak} size={16}/>
@@ -4155,194 +4221,24 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                               <ClearIcon color={AppColors.grayTextWeak} size={14}/>
                             </Pressable>)}
                         </View>
-                        {analyticsSubTab === 'ga_events' && (<View style={styles.toolbarRight}>
-                            <TouchableScale style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 8,
-                        backgroundColor: 'rgba(255,46,87,0.06)',
-                        borderWidth: 1,
-                        borderColor: 'rgba(255,46,87,0.15)',
-                    }} onPress={handleDelete} hitSlop={6}>
-                              <WipeIcon color={AppColors.errorColor} size={13}/>
-                              <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10.5,
-                        color: AppColors.errorColor,
-                    }}>
-                                Clear
-                              </Text>
-                            </TouchableScale>
-                          </View>)}
-                      </View>
-
-                      {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
-                      <View style={{
-                    marginHorizontal: 16,
-                    marginTop: 4,
-                    marginBottom: 8,
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 4,
-                    flexDirection: 'row',
-                    borderWidth: 1,
-                    borderColor: AppColors.grayBorderSecondary,
-                }}>
-                        <Pressable style={[
+                        <View style={styles.toolbarRight}>
+                          <TouchableScale style={[
+                    styles.toolbarBtn,
                     {
-                        flex: 1,
-                        paddingVertical: 8,
-                        borderRadius: 6,
-                        alignItems: 'center',
-                    },
-                    analyticsSubTab === 'ga_events' && {
-                        backgroundColor: AppColors.primaryLight,
-                        shadowColor: '#000',
-                        shadowOpacity: 0.1,
-                        shadowRadius: 3,
-                        shadowOffset: { width: 0, height: 1 },
-                        elevation: 2,
-                    },
-                ]} onPress={() => {
-                    animateNextLayout();
-                    setAnalyticsSubTab('ga_events');
-                }}>
-                          <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                            {/* #7 */}
-                            <AnalyticsIcon size={13} color={analyticsSubTab === 'ga_events'
-                    ? AppColors.purple
-                    : AppColors.grayTextStrong}/>
-                            <Text style={[
-                    {
-                        fontFamily: AppFonts.interMedium,
-                        fontSize: 13,
-                        color: AppColors.grayTextStrong,
-                    },
-                    analyticsSubTab === 'ga_events' && {
-                        fontFamily: AppFonts.interBold,
-                        color: AppColors.purple,
-                    },
-                ]}>
-                              GA Events (
-                              {analyticsSearch
-                    ? filteredAnalyticsEvents.length
-                    : analyticsEvents.length}
-                              )
-                            </Text>
-                          </View>
-                        </Pressable>
-                        <Pressable style={[
-                    {
-                        flex: 1,
-                        paddingVertical: 8,
-                        borderRadius: 6,
-                        alignItems: 'center',
-                    },
-                    analyticsSubTab === 'top_events' && {
-                        backgroundColor: AppColors.primaryLight,
-                        shadowColor: '#000',
-                        shadowOpacity: 0.1,
-                        shadowRadius: 3,
-                        shadowOffset: { width: 0, height: 1 },
-                        elevation: 2,
-                    },
-                ]} onPress={() => {
-                    animateNextLayout();
-                    setAnalyticsSubTab('top_events');
-                }}>
-                          <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                            {/* #7 */}
-                            <TrendingUpIcon size={13} color={analyticsSubTab === 'top_events'
-                    ? AppColors.purple
-                    : AppColors.grayTextStrong}/>
-                            <Text style={[
-                    {
-                        fontFamily: AppFonts.interMedium,
-                        fontSize: 13,
-                        color: AppColors.grayTextStrong,
-                    },
-                    analyticsSubTab === 'top_events' && {
-                        fontFamily: AppFonts.interBold,
-                        color: AppColors.purple,
+                        borderColor: 'rgba(255,46,87,0.22)',
+                        backgroundColor: 'rgba(255,46,87,0.06)',
                     },
-                ]}>
-                              Top Events ({topEventsArray.length})
-                            </Text>
-                          </View>
-                        </Pressable>
+                ]} onPress={handleDelete} hitSlop={6}>
+                            <WipeIcon color={AppColors.errorColor} size={15}/>
+                          </TouchableScale>
+                        </View>
                       </View>
                     </View>)}
 
                 {isReady ? (activeTab === 'insights' ? (<ScrollView style={styles.insightsContainer} contentContainerStyle={styles.insightsContent} showsVerticalScrollIndicator={false}>
                       {renderInsightsDashboard()}
-                    </ScrollView>) : activeTab === 'analytics' ? (<View style={{ flex: 1 }}>
-                      {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
-                        styles.listContent,
-                        { paddingHorizontal: 16, paddingTop: 12 },
-                    ]} renderItem={({ item: [name, count], index }) => {
-                        const maxCount = topEventsArray[0]?.[1] || 1;
-                        const pct = Math.max(6, (count / maxCount) * 100);
-                        const color = getEventColor(name);
-                        return (<AnimatedEntrance index={index} distance={8} style={[
-                                styles.analyticsTopEventsCard,
-                                { marginBottom: 6, paddingVertical: 10, paddingHorizontal: 12 },
-                            ]}>
-                                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                                  <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 11,
-                                color: color,
-                                width: 18,
-                                textAlign: 'center',
-                            }}>
-                                    {index + 1}
-                                  </Text>
-                                  <View style={{ flex: 1, gap: 4 }}>
-                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                                      <Text style={{
-                                fontFamily: AppFonts.interMedium,
-                                fontSize: 12.5,
-                                color: AppColors.primaryBlack,
-                                flex: 1,
-                            }} numberOfLines={1}>
-                                        {name}
-                                      </Text>
-                                      <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 12,
-                                color: color,
-                                marginLeft: 8,
-                            }}>
-                                        {count}
-                                      </Text>
-                                    </View>
-                                    <View style={{ height: 3, backgroundColor: AppColors.grayBackground, borderRadius: 2, overflow: 'hidden' }}>
-                                      <LinearGradient colors={[color, `${color}88`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={{
-                                height: '100%',
-                                borderRadius: 2,
-                                width: `${pct}%`,
-                            }}/>
-                                    </View>
-                                  </View>
-                                </View>
-                              </AnimatedEntrance>);
-                    }} ListEmptyComponent={<View style={styles.emptyContainer}>
-                              <View style={styles.emptyIconWrap}>
-                                <EmptyRadarIcon color={AppColors.purple} size={32}/>
-                              </View>
-                              <Text style={styles.emptyTitle}>No Top Events</Text>
-                            </View>}/>) : (<FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
+                    </ScrollView>) : activeTab === 'analytics' ? (<View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
+                      {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={(item, index) => item?.id?.toString() ?? index.toString()} ListHeaderComponent={renderAnalyticsHeader} renderItem={({ item, index }) => {
                         const prev = filteredAnalyticsEvents[index + 1];
                         const next = filteredAnalyticsEvents[index - 1];
                         const msSincePrev = prev
@@ -4353,12 +4249,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                             ? Math.floor(next.timestamp / 60000)
                             : -1;
                         const showTimestamp = index === 0 || thisMin !== nextMin;
-                        return (<AnimatedEntrance index={index} distance={8}>
-                                <AnalyticsEventCard event={item} onPress={() => {
+                        return (<AnalyticsEventCard event={item} onPress={() => {
                                 animateNextLayout();
                                 setSelectedEvent(item);
                             }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
-                                let screenName = item.screenName ||
+                                if (!item)
+                                    return '';
+                                const rawScreenName = item.screenName ||
                                     item.screenClass ||
                                     item.pageTitle ||
                                     item.pageLocation ||
@@ -4366,6 +4263,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                                     item.params?.screen_name ||
                                     item.params?.firebase_screen_class ||
                                     item.params?.screen_class;
+                                let screenName = typeof rawScreenName === 'string'
+                                    ? rawScreenName
+                                    : (rawScreenName ? JSON.stringify(rawScreenName) : '');
                                 const routeInfo = logRouteMapRef.current.get(item.id + 1000000);
                                 if (!screenName) {
                                     if (routeInfo &&
@@ -4375,8 +4275,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                                     }
                                 }
                                 return screenName;
-                            })()}/>
-                              </AnimatedEntrance>);
+                            })()}/>);
                     }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<View style={styles.emptyContainer}>
                               <View style={styles.emptyIconWrap}>
                                 <EmptyRadarIcon color={AppColors.purple} size={32}/>
@@ -4396,7 +4295,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         filteredAnalyticsEvents.length === 0 && {
                             flexGrow: 1,
                         },
-                    ]} keyboardShouldPersistTaps="handled"/>)}
+                    ]} keyboardShouldPersistTaps="handled"/>) : null}
                     </View>) : activeTab === 'apis' && selected == null ? (<View style={{ flex: 1 }}>
                       <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<View style={{ marginTop: 8 }}>
                             <View style={styles.toolbarRow}>
@@ -4409,27 +4308,19 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                               </View>
 
                               <View style={styles.toolbarRight}>
-                                <TouchableScale style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 8,
-                        backgroundColor: 'rgba(255,46,87,0.06)',
-                        borderWidth: 1,
-                        borderColor: 'rgba(255,46,87,0.15)',
-                    }} onPress={handleDelete} hitSlop={6}>
-                                  <WipeIcon color={AppColors.errorColor} size={13}/>
-                                  <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10.5,
-                        color: AppColors.errorColor,
-                    }}>
-                                    {selectedLogs.size > 0
-                        ? `Delete (${selectedLogs.size})`
-                        : 'Clear'}
-                                  </Text>
+                                <TouchableScale style={[
+                        styles.toolbarBtn,
+                        {
+                            borderColor: 'rgba(255,46,87,0.22)',
+                            backgroundColor: 'rgba(255,46,87,0.06)',
+                        },
+                    ]} onPress={handleDelete} hitSlop={6}>
+                                  <WipeIcon color={AppColors.errorColor} size={15}/>
+                                  {selectedLogs.size > 0 && (<View style={styles.trashBadge}>
+                                      <Text style={styles.trashBadgeText}>
+                                        {selectedLogs.size}
+                                      </Text>
+                                    </View>)}
                                 </TouchableScale>
 
                                 <TouchableScale style={styles.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
@@ -4597,25 +4488,14 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                             <TouchableScale style={styles.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
                               <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
                             </TouchableScale>
-                            <TouchableScale style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5,
-                    borderRadius: 8,
-                    backgroundColor: 'rgba(255,46,87,0.06)',
-                    borderWidth: 1,
-                    borderColor: 'rgba(255,46,87,0.15)',
-                }} onPress={handleDelete} hitSlop={6}>
-                              <WipeIcon color={AppColors.errorColor} size={13}/>
-                              <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors.errorColor,
-                }}>
-                                Clear
-                              </Text>
+                            <TouchableScale style={[
+                    styles.toolbarBtn,
+                    {
+                        borderColor: 'rgba(255,46,87,0.22)',
+                        backgroundColor: 'rgba(255,46,87,0.06)',
+                    },
+                ]} onPress={handleDelete} hitSlop={6}>
+                              <WipeIcon color={AppColors.errorColor} size={15}/>
                             </TouchableScale>
                           </View>
                         </View>
@@ -4886,7 +4766,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         </ScrollView>
                       </View>
 
-                      <FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
+                      <FlatList data={filteredConsoleLogs} keyExtractor={(item, index) => item?.id?.toString() ?? index.toString()} ListHeaderComponent={(() => {
                     const total = visibleConsoleLogs.length;
                     const filtered = filteredConsoleLogs.length;
                     const isAllSelected = logFilters.has('all') ||
@@ -5949,7 +5829,7 @@ export default NetworkInspectorWrapper;
 // Re-export public APIs
 export { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, addAxiosInterceptors, } from './customHooks/networkLogger';
 export { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, } from './customHooks/consoleLogger';
-export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, } from './customHooks/analyticsLogger';
+export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, getCurrentUserProperties, getCurrentUserId, getDefaultEventParameters, getCollectionEnabled, } from './customHooks/analyticsLogger';
 export { WebView, getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, } from './customHooks/reduxLogger';