react-native-inapp-inspector 1.1.13 → 1.1.14

package/dist/commonjs/index.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
+exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
@@ -77,7 +77,7 @@ const networkLogger_1 = require("./customHooks/networkLogger");
 const consoleLogger_1 = require("./customHooks/consoleLogger");
 const logFilters_1 = require("./customHooks/logFilters");
 const analyticsLogger_1 = require("./customHooks/analyticsLogger");
-const AnalyticsEventCard_1 = __importStar(require("./components/AnalyticsEventCard"));
+const AnalyticsEventCard_1 = __importDefault(require("./components/AnalyticsEventCard"));
 const AnalyticsDetail_1 = __importDefault(require("./components/AnalyticsDetail"));
 const webViewLogger_1 = require("./customHooks/webViewLogger");
 let OriginalWebView = null;
@@ -272,10 +272,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [settingsActiveSubTab, setSettingsActiveSubTab] = (0, react_1.useState)('module');
     const [insightsActiveSubTab, setInsightsActiveSubTab] = (0, react_1.useState)('apis');
     const [tabVisibility, setTabVisibility] = (0, react_1.useState)({
-        insights: true,
+        insights: false,
         apis: true,
         logs: true,
-        analytics: false,
+        analytics: true,
         webview: false,
         redux: false,
     });
@@ -295,10 +295,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,
         });
@@ -363,10 +363,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,
                     },
@@ -476,7 +476,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
         });
     };
     const switchActiveTab = (0, react_1.useCallback)((key) => {
-        animateNextLayout();
         setActiveTab(key);
     }, []);
     const navigateFromDashboard = (key) => {
@@ -530,8 +529,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [selectedEvent, setSelectedEvent] = (0, react_1.useState)(null);
     const [analyticsSearch, setAnalyticsSearch] = (0, react_1.useState)('');
     const [hideScreenView, setHideScreenView] = (0, react_1.useState)(true);
-    const [analyticsSubTab, setAnalyticsSubTab] = (0, react_1.useState)('ga_events');
-    const [topEventsExpanded, setTopEventsExpanded] = (0, react_1.useState)(true);
+    const [isAnalyticsLayoutReady, setIsAnalyticsLayoutReady] = (0, react_1.useState)(false);
+    const [analyticsHeaderExpanded, setAnalyticsHeaderExpanded] = (0, react_1.useState)(false);
     const [newEventIds, setNewEventIds] = (0, react_1.useState)(new Set());
     const prevEventIdsRef = (0, react_1.useRef)(new Set());
     const [navState, setNavState] = (0, react_1.useState)(null);
@@ -727,6 +726,84 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             }).start();
         }
     }, [newLogIds]);
+    const renderAnalyticsHeader = () => {
+        const userId = (0, analyticsLogger_1.getCurrentUserId)();
+        const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
+        const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
+        const isTrackingEnabled = (0, analyticsLogger_1.getCollectionEnabled)();
+        const hasUserProps = Object.keys(userProperties).length > 0;
+        const hasDefaultParams = Object.keys(defaultParams).length > 0;
+        const totalEvents = filteredAnalyticsEvents.length;
+        return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
+        <react_native_1.View style={[styles_1.default.analyticsHeaderTop, !analyticsHeaderExpanded && { marginBottom: 0 }]}>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>Session Info</react_native_1.Text>
+              <react_native_1.View style={[
+                styles_1.default.statusDot,
+                { backgroundColor: isTrackingEnabled ? AppColors_1.AppColors.greenColor : AppColors_1.AppColors.errorColor }
+            ]}/>
+              <react_native_1.Text style={styles_1.default.statusText}>
+                {isTrackingEnabled ? 'Active' : 'Paused'}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.analyticsHeaderSubtitle} numberOfLines={1}>
+              {userId ? `User ID: ${userId}` : 'Anonymous Session'}
+            </react_native_1.Text>
+          </react_native_1.View>
+          
+          <react_native_1.TouchableOpacity style={styles_1.default.analyticsHeaderToggle} activeOpacity={0.7} onPress={() => {
+                animateNextLayout();
+                setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
+            }}>
+            <react_native_1.Text style={styles_1.default.analyticsHeaderToggleText}>
+              {analyticsHeaderExpanded ? 'Collapse' : 'Expand'}
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        {analyticsHeaderExpanded && (<>
+            {/* Stats Row */}
+            <react_native_1.View style={styles_1.default.analyticsStatsRow}>
+              <react_native_1.View style={styles_1.default.analyticsStatBox}>
+                <react_native_1.Text style={styles_1.default.analyticsStatValue}>{totalEvents}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.analyticsStatLabel}>Events</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.analyticsStatBox}>
+                <react_native_1.Text style={styles_1.default.analyticsStatValue}>
+                  {Object.keys(userProperties).length}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.analyticsStatLabel}>User Props</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.analyticsStatBox}>
+                <react_native_1.Text style={styles_1.default.analyticsStatValue}>
+                  {Object.keys(defaultParams).length}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.analyticsStatLabel}>Defaults</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Details Section */}
+            {(hasUserProps || hasDefaultParams) && (<react_native_1.View style={styles_1.default.analyticsHeaderDetails}>
+                {hasUserProps && (<react_native_1.View style={{ marginBottom: 10 }}>
+                    <react_native_1.Text style={styles_1.default.detailsGroupTitle}>Active User Properties</react_native_1.Text>
+                    {Object.entries(userProperties).map(([k, v]) => (<react_native_1.View key={k} style={styles_1.default.detailsRow}>
+                        <react_native_1.Text style={styles_1.default.detailsKey} selectable={true}>{k}</react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.detailsValue} selectable={true}>{String(v)}</react_native_1.Text>
+                      </react_native_1.View>))}
+                  </react_native_1.View>)}
+
+                {hasDefaultParams && (<react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.detailsGroupTitle}>Default Event Parameters</react_native_1.Text>
+                    {Object.entries(defaultParams).map(([k, v]) => (<react_native_1.View key={k} style={styles_1.default.detailsRow}>
+                        <react_native_1.Text style={styles_1.default.detailsKey} selectable={true}>{k}</react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.detailsValue} selectable={true}>{String(v)}</react_native_1.Text>
+                      </react_native_1.View>))}
+                  </react_native_1.View>)}
+              </react_native_1.View>)}
+          </>)}
+      </react_native_1.View>);
+    };
     // #6 — every time the inspector is opened, land on the chosen default tab.
     (0, react_1.useEffect)(() => {
         if (visible) {
@@ -895,6 +972,11 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             unsubscribeRedux();
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (activeTab !== 'analytics') {
+            setIsAnalyticsLayoutReady(false);
+        }
+    }, [activeTab]);
     (0, react_1.useEffect)(() => {
         setReqExpanded(undefined);
         setResExpanded(undefined);
@@ -1238,15 +1320,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             analytics: `${searchedLogs.filter(l => l.message.toLowerCase().includes('[analytics error]')).length}/${total}`,
         };
     }, [visibleConsoleLogs, logSearch]);
-    const topEventsArray = (0, react_1.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);
@@ -3685,16 +3758,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             </react_native_1.Animated.View>
           </react_native_1.View>
           {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
-                styles_1.default.fabBadge,
-                hasErrors ? styles_1.default.fabBadgeError : styles_1.default.fabBadgeNormal,
-                { transform: [{ scale: badgeAnim }] },
-            ]}>
-              <react_native_1.Text style={styles_1.default.fabBadgeText}>
-                {logs.length + analyticsEvents.length > 99
-                ? '99+'
-                : logs.length + analyticsEvents.length}
-              </react_native_1.Text>
-            </react_native_1.Animated.View>)}
+                styles_1.default.fabGreenDot,
+                { transform: [{ scale: unreadPulseAnim }] },
+            ]}/>)}
         </TouchableScale_1.default>
       </react_native_1.Animated.View>
 
@@ -3916,108 +3982,108 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         </TouchableScale_1.default>) : null}
                     </react_native_1.View>
 
-                    <react_native_1.View style={styles_1.default.headerCenter}>
-                      {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                          <react_native_1.View style={styles_1.default.headerDetailRow}>
-                            <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
-                            AppColors_1.AppColors.grayText,
-                    },
-                ]}>
-                              <react_native_1.Text style={styles_1.default.headerMethodText}>
-                                {selected.method}
+                    {(selected != null || selectedEvent != null) && (<react_native_1.View style={styles_1.default.headerCenter}>
+                        {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                            <react_native_1.View style={styles_1.default.headerDetailRow}>
+                              <react_native_1.View style={[
+                        styles_1.default.headerMethodBadge,
+                        {
+                            backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
+                                AppColors_1.AppColors.grayText,
+                        },
+                    ]}>
+                                <react_native_1.Text style={styles_1.default.headerMethodText}>
+                                  {selected.method}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                              <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                                {detailTitle}
                               </react_native_1.Text>
                             </react_native_1.View>
-                            <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                              {detailTitle}
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                          <react_native_1.View style={styles_1.default.headerDetailSubRow}>
-                            <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
-                    borderRadius: 20,
-                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
-                    borderWidth: 1,
-                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
-                }}>
+                            <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                              <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
+                        borderWidth: 1,
+                        borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
+                    }}>
+                                <react_native_1.View style={[
+                        styles_1.default.headerStatusDot,
+                        {
+                            backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                        },
+                    ]}/>
+                                <react_native_1.Text style={[
+                        styles_1.default.headerSubTitle,
+                        { fontFamily: AppFonts_1.AppFonts.interBold },
+                    ]}>
+                                  {selected.status === 0
+                        ? 'Failed'
+                        : selected.status ?? 'Pending'}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                              <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 20,
+                        backgroundColor: 'rgba(255,255,255,0.16)',
+                    }}>
+                                <NetworkIcons_1.ClockIcon color="#FFFFFF" size={11}/>
+                                <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                                  {selected.duration != null
+                        ? `${selected.duration}ms`
+                        : '—'}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                            </react_native_1.View>
+                          </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                            <react_native_1.View style={styles_1.default.headerDetailRow}>
                               <react_native_1.View style={[
-                    styles_1.default.headerStatusDot,
-                    {
-                        backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
-                    },
-                ]}/>
-                              <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    { fontFamily: AppFonts_1.AppFonts.interBold },
-                ]}>
-                                {selected.status === 0
-                    ? 'Failed'
-                    : selected.status ?? 'Pending'}
+                        styles_1.default.headerMethodBadge,
+                        {
+                            backgroundColor: selectedEvent.source === 'firebase'
+                                ? 'rgba(224,123,26,0.3)'
+                                : 'rgba(124,92,191,0.3)',
+                        },
+                    ]}>
+                                <react_native_1.Text style={styles_1.default.headerMethodText}>
+                                  {selectedEvent.source === 'firebase'
+                        ? 'FB'
+                        : 'MAN'}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                              <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                                {selectedEvent.name}
                               </react_native_1.Text>
                             </react_native_1.View>
-                            <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
-                    borderRadius: 20,
-                    backgroundColor: 'rgba(255,255,255,0.16)',
-                }}>
-                              <NetworkIcons_1.ClockIcon color="#FFFFFF" size={11}/>
+                            <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                              <react_native_1.View style={[
+                        styles_1.default.headerStatusDot,
+                        {
+                            backgroundColor: selectedEvent.source === 'firebase'
+                                ? '#E07B1A'
+                                : AppColors_1.AppColors.purple,
+                        },
+                    ]}/>
                               <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                                {selected.duration != null
-                    ? `${selected.duration}ms`
-                    : '—'}
+                                {Object.keys(selectedEvent.params).length} param
+                                {Object.keys(selectedEvent.params).length !== 1
+                        ? 's'
+                        : ''}
+                                {' · '}
+                                {selectedEvent.source}
                               </react_native_1.Text>
                             </react_native_1.View>
-                          </react_native_1.View>
-                        </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
-                          <react_native_1.View style={styles_1.default.headerDetailRow}>
-                            <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? 'rgba(224,123,26,0.3)'
-                            : 'rgba(124,92,191,0.3)',
-                    },
-                ]}>
-                              <react_native_1.Text style={styles_1.default.headerMethodText}>
-                                {selectedEvent.source === 'firebase'
-                    ? 'FB'
-                    : 'MAN'}
-                              </react_native_1.Text>
-                            </react_native_1.View>
-                            <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                              {selectedEvent.name}
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                          <react_native_1.View style={styles_1.default.headerDetailSubRow}>
-                            <react_native_1.View style={[
-                    styles_1.default.headerStatusDot,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? '#E07B1A'
-                            : AppColors_1.AppColors.purple,
-                    },
-                ]}/>
-                            <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                              {Object.keys(selectedEvent.params).length} param
-                              {Object.keys(selectedEvent.params).length !== 1
-                    ? 's'
-                    : ''}
-                              {' · '}
-                              {selectedEvent.source}
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                        </react_native_1.View>) : null}
-                    </react_native_1.View>
+                          </react_native_1.View>) : null}
+                      </react_native_1.View>)}
 
                     <react_native_1.View style={[
                 styles_1.default.headerRight,
@@ -4185,7 +4251,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                       {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
                       <react_native_1.View style={[
                     styles_1.default.toolbarRow,
-                    { marginTop: 12, marginBottom: 4 },
+                    { marginTop: 12, marginBottom: 8 },
                 ]}>
                         <react_native_1.View style={styles_1.default.searchContainer}>
                           <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
@@ -4194,194 +4260,24 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                               <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
                             </react_native_1.Pressable>)}
                         </react_native_1.View>
-                        {analyticsSubTab === 'ga_events' && (<react_native_1.View style={styles_1.default.toolbarRight}>
-                            <TouchableScale_1.default 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}>
-                              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={13}/>
-                              <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10.5,
-                        color: AppColors_1.AppColors.errorColor,
-                    }}>
-                                Clear
-                              </react_native_1.Text>
-                            </TouchableScale_1.default>
-                          </react_native_1.View>)}
-                      </react_native_1.View>
-
-                      {/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
-                      <react_native_1.View style={{
-                    marginHorizontal: 16,
-                    marginTop: 4,
-                    marginBottom: 8,
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 4,
-                    flexDirection: 'row',
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                }}>
-                        <react_native_1.Pressable style={[
+                        <react_native_1.View style={styles_1.default.toolbarRight}>
+                          <TouchableScale_1.default style={[
+                    styles_1.default.toolbarBtn,
                     {
-                        flex: 1,
-                        paddingVertical: 8,
-                        borderRadius: 6,
-                        alignItems: 'center',
-                    },
-                    analyticsSubTab === 'ga_events' && {
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                        shadowColor: '#000',
-                        shadowOpacity: 0.1,
-                        shadowRadius: 3,
-                        shadowOffset: { width: 0, height: 1 },
-                        elevation: 2,
-                    },
-                ]} onPress={() => {
-                    animateNextLayout();
-                    setAnalyticsSubTab('ga_events');
-                }}>
-                          <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                            {/* #7 */}
-                            <NetworkIcons_1.AnalyticsIcon size={13} color={analyticsSubTab === 'ga_events'
-                    ? AppColors_1.AppColors.purple
-                    : AppColors_1.AppColors.grayTextStrong}/>
-                            <react_native_1.Text style={[
-                    {
-                        fontFamily: AppFonts_1.AppFonts.interMedium,
-                        fontSize: 13,
-                        color: AppColors_1.AppColors.grayTextStrong,
-                    },
-                    analyticsSubTab === 'ga_events' && {
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        color: AppColors_1.AppColors.purple,
-                    },
-                ]}>
-                              GA Events (
-                              {analyticsSearch
-                    ? filteredAnalyticsEvents.length
-                    : analyticsEvents.length}
-                              )
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                        </react_native_1.Pressable>
-                        <react_native_1.Pressable style={[
-                    {
-                        flex: 1,
-                        paddingVertical: 8,
-                        borderRadius: 6,
-                        alignItems: 'center',
-                    },
-                    analyticsSubTab === 'top_events' && {
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                        shadowColor: '#000',
-                        shadowOpacity: 0.1,
-                        shadowRadius: 3,
-                        shadowOffset: { width: 0, height: 1 },
-                        elevation: 2,
-                    },
-                ]} onPress={() => {
-                    animateNextLayout();
-                    setAnalyticsSubTab('top_events');
-                }}>
-                          <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                            {/* #7 */}
-                            <NetworkIcons_1.TrendingUpIcon size={13} color={analyticsSubTab === 'top_events'
-                    ? AppColors_1.AppColors.purple
-                    : AppColors_1.AppColors.grayTextStrong}/>
-                            <react_native_1.Text style={[
-                    {
-                        fontFamily: AppFonts_1.AppFonts.interMedium,
-                        fontSize: 13,
-                        color: AppColors_1.AppColors.grayTextStrong,
-                    },
-                    analyticsSubTab === 'top_events' && {
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        color: AppColors_1.AppColors.purple,
+                        borderColor: 'rgba(255,46,87,0.22)',
+                        backgroundColor: 'rgba(255,46,87,0.06)',
                     },
-                ]}>
-                              Top Events ({topEventsArray.length})
-                            </react_native_1.Text>
-                          </react_native_1.View>
-                        </react_native_1.Pressable>
+                ]} onPress={handleDelete} hitSlop={6}>
+                            <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+                          </TouchableScale_1.default>
+                        </react_native_1.View>
                       </react_native_1.View>
                     </react_native_1.View>)}
 
                 {isReady ? (activeTab === 'insights' ? (<react_native_1.ScrollView style={styles_1.default.insightsContainer} contentContainerStyle={styles_1.default.insightsContent} showsVerticalScrollIndicator={false}>
                       {renderInsightsDashboard()}
-                    </react_native_1.ScrollView>) : activeTab === 'analytics' ? (<react_native_1.View style={{ flex: 1 }}>
-                      {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<react_native_1.FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
-                        styles_1.default.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 = (0, AnalyticsEventCard_1.getEventColor)(name);
-                        return (<AnimatedEntrance_1.default index={index} distance={8} style={[
-                                styles_1.default.analyticsTopEventsCard,
-                                { marginBottom: 6, paddingVertical: 10, paddingHorizontal: 12 },
-                            ]}>
-                                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                                  <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 11,
-                                color: color,
-                                width: 18,
-                                textAlign: 'center',
-                            }}>
-                                    {index + 1}
-                                  </react_native_1.Text>
-                                  <react_native_1.View style={{ flex: 1, gap: 4 }}>
-                                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                                      <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interMedium,
-                                fontSize: 12.5,
-                                color: AppColors_1.AppColors.primaryBlack,
-                                flex: 1,
-                            }} numberOfLines={1}>
-                                        {name}
-                                      </react_native_1.Text>
-                                      <react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 12,
-                                color: color,
-                                marginLeft: 8,
-                            }}>
-                                        {count}
-                                      </react_native_1.Text>
-                                    </react_native_1.View>
-                                    <react_native_1.View style={{ height: 3, backgroundColor: AppColors_1.AppColors.grayBackground, borderRadius: 2, overflow: 'hidden' }}>
-                                      <react_native_linear_gradient_1.default colors={[color, `${color}88`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={{
-                                height: '100%',
-                                borderRadius: 2,
-                                width: `${pct}%`,
-                            }}/>
-                                    </react_native_1.View>
-                                  </react_native_1.View>
-                                </react_native_1.View>
-                              </AnimatedEntrance_1.default>);
-                    }} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
-                              <react_native_1.View style={styles_1.default.emptyIconWrap}>
-                                <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
-                              </react_native_1.View>
-                              <react_native_1.Text style={styles_1.default.emptyTitle}>No Top Events</react_native_1.Text>
-                            </react_native_1.View>}/>) : (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
+                    </react_native_1.ScrollView>) : activeTab === 'analytics' ? (<react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
+                      {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.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
@@ -4392,12 +4288,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                             ? Math.floor(next.timestamp / 60000)
                             : -1;
                         const showTimestamp = index === 0 || thisMin !== nextMin;
-                        return (<AnimatedEntrance_1.default index={index} distance={8}>
-                                <AnalyticsEventCard_1.default event={item} onPress={() => {
+                        return (<AnalyticsEventCard_1.default 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 ||
@@ -4405,6 +4302,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 &&
@@ -4414,8 +4314,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                                     }
                                 }
                                 return screenName;
-                            })()}/>
-                              </AnimatedEntrance_1.default>);
+                            })()}/>);
                     }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                               <react_native_1.View style={styles_1.default.emptyIconWrap}>
                                 <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
@@ -4435,7 +4334,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         filteredAnalyticsEvents.length === 0 && {
                             flexGrow: 1,
                         },
-                    ]} keyboardShouldPersistTaps="handled"/>)}
+                    ]} keyboardShouldPersistTaps="handled"/>) : null}
                     </react_native_1.View>) : activeTab === 'apis' && selected == null ? (<react_native_1.View style={{ flex: 1 }}>
                       <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
                             <react_native_1.View style={styles_1.default.toolbarRow}>
@@ -4448,27 +4347,19 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                               </react_native_1.View>
 
                               <react_native_1.View style={styles_1.default.toolbarRight}>
-                                <TouchableScale_1.default 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}>
-                                  <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={13}/>
-                                  <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10.5,
-                        color: AppColors_1.AppColors.errorColor,
-                    }}>
-                                    {selectedLogs.size > 0
-                        ? `Delete (${selectedLogs.size})`
-                        : 'Clear'}
-                                  </react_native_1.Text>
+                                <TouchableScale_1.default style={[
+                        styles_1.default.toolbarBtn,
+                        {
+                            borderColor: 'rgba(255,46,87,0.22)',
+                            backgroundColor: 'rgba(255,46,87,0.06)',
+                        },
+                    ]} onPress={handleDelete} hitSlop={6}>
+                                  <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+                                  {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                                      <react_native_1.Text style={styles_1.default.trashBadgeText}>
+                                        {selectedLogs.size}
+                                      </react_native_1.Text>
+                                    </react_native_1.View>)}
                                 </TouchableScale_1.default>
 
                                 <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
@@ -4636,25 +4527,14 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                             <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
                               <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
                             </TouchableScale_1.default>
-                            <TouchableScale_1.default 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}>
-                              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={13}/>
-                              <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors_1.AppColors.errorColor,
-                }}>
-                                Clear
-                              </react_native_1.Text>
+                            <TouchableScale_1.default style={[
+                    styles_1.default.toolbarBtn,
+                    {
+                        borderColor: 'rgba(255,46,87,0.22)',
+                        backgroundColor: 'rgba(255,46,87,0.06)',
+                    },
+                ]} onPress={handleDelete} hitSlop={6}>
+                              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
                             </TouchableScale_1.default>
                           </react_native_1.View>
                         </react_native_1.View>
@@ -4925,7 +4805,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         </react_native_1.ScrollView>
                       </react_native_1.View>
 
-                      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
+                      <react_native_1.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') ||
@@ -6000,6 +5880,10 @@ Object.defineProperty(exports, "setupAnalyticsLogger", { enumerable: true, get:
 Object.defineProperty(exports, "logAnalyticsEvent", { enumerable: true, get: function () { return analyticsLogger_2.logAnalyticsEvent; } });
 Object.defineProperty(exports, "subscribeAnalyticsEvents", { enumerable: true, get: function () { return analyticsLogger_2.subscribeAnalyticsEvents; } });
 Object.defineProperty(exports, "clearAnalyticsEvents", { enumerable: true, get: function () { return analyticsLogger_2.clearAnalyticsEvents; } });
+Object.defineProperty(exports, "getCurrentUserProperties", { enumerable: true, get: function () { return analyticsLogger_2.getCurrentUserProperties; } });
+Object.defineProperty(exports, "getCurrentUserId", { enumerable: true, get: function () { return analyticsLogger_2.getCurrentUserId; } });
+Object.defineProperty(exports, "getDefaultEventParameters", { enumerable: true, get: function () { return analyticsLogger_2.getDefaultEventParameters; } });
+Object.defineProperty(exports, "getCollectionEnabled", { enumerable: true, get: function () { return analyticsLogger_2.getCollectionEnabled; } });
 var webViewLogger_2 = require("./customHooks/webViewLogger");
 Object.defineProperty(exports, "WebView", { enumerable: true, get: function () { return webViewLogger_2.WebView; } });
 Object.defineProperty(exports, "getWebViewLogs", { enumerable: true, get: function () { return webViewLogger_2.getWebViewLogs; } });