react-native-inapp-inspector 1.1.10 → 1.1.12

package/dist/commonjs/index.js

@@ -150,7 +150,8 @@ const NavigationTracker = ({ onStateChange }) => {
     return null;
 };
 const animateNextLayout = () => {
-    react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+    // Disabled LayoutAnimation to prevent iOS NSRangeException crashes under Fabric
+    // and Android rendering performance freezes.
 };
 const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     // Set custom storage synchronously during render phase
@@ -174,7 +175,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [search, setSearch] = (0, react_1.useState)('');
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
     const [reduxSearch, setReduxSearch] = (0, react_1.useState)('');
-    const [reduxActiveSubTab, setReduxActiveSubTab] = (0, react_1.useState)('timeline');
     const [apiDetailActiveTab, setApiDetailActiveTab] = (0, react_1.useState)('response');
     (0, react_1.useEffect)(() => {
         react_native_1.LogBox.ignoreAllLogs(enabled);
@@ -232,7 +232,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [maxConsoleLogs, setMaxConsoleLogs] = (0, react_1.useState)(200);
     const [showConsoleLevels, setShowConsoleLevels] = (0, react_1.useState)({
         info: true,
-        warn: true,
+        warn: false,
         error: true,
     });
     const visibleConsoleLogs = (0, react_1.useMemo)(() => {
@@ -741,7 +741,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
             const task = react_native_1.InteractionManager.runAfterInteractions(() => {
                 setIsReady(true);
             });
-            return () => task.cancel();
+            const fallbackTimer = setTimeout(() => {
+                setIsReady(true);
+            }, 350);
+            return () => {
+                task.cancel();
+                clearTimeout(fallbackTimer);
+            };
         }
         else {
             setIsReady(false);
@@ -754,9 +760,10 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
         (0, consoleLogger_1.setupConsoleLogger)();
         (0, analyticsLogger_1.autoSetupAnalyticsLogger)();
         let timeoutId;
+        let isFirstNetworkCall = true;
         const unsubscribe = (0, networkLogger_1.subscribeNetworkLogs)((raw) => {
             clearTimeout(timeoutId);
-            timeoutId = setTimeout(() => {
+            const updateNetworkState = () => {
                 const deduped = (0, helpers_1.deduplicateLogs)(raw);
                 const incoming = new Set(deduped.map(l => l.id));
                 const freshIds = new Set();
@@ -775,13 +782,24 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                     setTimeout(() => setNewLogIds(new Set()), 1200);
                 }
                 setLogs(deduped);
-            }, 250);
+            };
+            if (isFirstNetworkCall) {
+                isFirstNetworkCall = false;
+                const deduped = (0, helpers_1.deduplicateLogs)(raw);
+                const incoming = new Set(deduped.map(l => l.id));
+                prevLogIdsRef.current = incoming;
+                setLogs(deduped);
+            }
+            else {
+                timeoutId = setTimeout(updateNetworkState, 250);
+            }
         });
         // ─── Analytics subscription ──────────────────────────────────────────────
         let analyticsTimeoutId;
+        let isFirstAnalyticsCall = true;
         const unsubscribeAnalytics = (0, analyticsLogger_1.subscribeAnalyticsEvents)((raw) => {
             clearTimeout(analyticsTimeoutId);
-            analyticsTimeoutId = setTimeout(() => {
+            const updateAnalyticsState = () => {
                 const incoming = new Set(raw.map(e => e.id));
                 const freshIds = new Set();
                 incoming.forEach(id => {
@@ -799,15 +817,31 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                     setTimeout(() => setNewEventIds(new Set()), 1200);
                 }
                 setAnalyticsEvents(raw);
-            }, 200);
+            };
+            if (isFirstAnalyticsCall) {
+                isFirstAnalyticsCall = false;
+                const incoming = new Set(raw.map(e => e.id));
+                prevEventIdsRef.current = incoming;
+                setAnalyticsEvents(raw);
+            }
+            else {
+                analyticsTimeoutId = setTimeout(updateAnalyticsState, 200);
+            }
         });
         // ─── Console subscription ────────────────────────────────────────────────
         let consoleTimeoutId;
+        let isFirstConsoleCall = true;
         const unsubscribeConsole = (0, consoleLogger_1.subscribeConsoleLogs)((raw) => {
             clearTimeout(consoleTimeoutId);
-            consoleTimeoutId = setTimeout(() => {
+            if (isFirstConsoleCall) {
+                isFirstConsoleCall = false;
                 setConsoleLogs(raw);
-            }, 200);
+            }
+            else {
+                consoleTimeoutId = setTimeout(() => {
+                    setConsoleLogs(raw);
+                }, 200);
+            }
         });
         setWebViewLogs((0, webViewLogger_1.getWebViewLogs)());
         setWebViewNavHistory((0, webViewLogger_1.getWebViewNavHistory)());
@@ -817,24 +851,34 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
         setWebViewHtmlUrl((0, webViewLogger_1.getWebViewHtmlUrl)());
         // ─── WebView subscription ────────────────────────────────────────────────
         let webViewTimeoutId;
+        let isFirstWebViewCall = true;
         const unsubscribeWebView = (0, webViewLogger_1.subscribeWebView)(() => {
             clearTimeout(webViewTimeoutId);
-            webViewTimeoutId = setTimeout(() => {
+            const updateWebViewState = () => {
                 setWebViewLogs((0, webViewLogger_1.getWebViewLogs)());
                 setWebViewNavHistory((0, webViewLogger_1.getWebViewNavHistory)());
                 setWebViewHtml((0, webViewLogger_1.getWebViewHtml)());
                 setWebViewCss((0, webViewLogger_1.getWebViewCss)());
                 setWebViewJs((0, webViewLogger_1.getWebViewJs)());
                 setWebViewHtmlUrl((0, webViewLogger_1.getWebViewHtmlUrl)());
-            }, 200);
+            };
+            if (isFirstWebViewCall) {
+                isFirstWebViewCall = false;
+                updateWebViewState();
+            }
+            else {
+                webViewTimeoutId = setTimeout(updateWebViewState, 200);
+            }
         });
-        setReduxState((0, reduxLogger_1.getReduxState)());
+        const initialReduxState = (0, reduxLogger_1.getReduxState)();
+        setReduxState(initialReduxState && typeof initialReduxState === 'object' ? { ...initialReduxState } : initialReduxState);
         setReduxActionHistory([...(0, reduxLogger_1.getActionHistory)()]);
         setReduxLastActionMap({ ...(0, reduxLogger_1.getLastActionForReducer)() });
         const unsubscribeRedux = (0, reduxLogger_1.subscribeReduxState)(() => {
             // New references each time guarantee the Redux tab updates live, even when
             // the root state object reference is unchanged or auto-refresh is paused.
-            setReduxState((0, reduxLogger_1.getReduxState)());
+            const freshState = (0, reduxLogger_1.getReduxState)();
+            setReduxState(freshState && typeof freshState === 'object' ? { ...freshState } : freshState);
             setReduxActionHistory([...(0, reduxLogger_1.getActionHistory)()]);
             setReduxLastActionMap({ ...(0, reduxLogger_1.getLastActionForReducer)() });
         });
@@ -2145,6 +2189,97 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                   </TouchableScale_1.default>
                 </react_native_1.View>
 
+                {/* Divider */}
+                <react_native_1.View style={{
+                        height: 1,
+                        backgroundColor: AppColors_1.AppColors.dividerColor,
+                    }}/>
+
+                {/* Logs Console Levels */}
+                <react_native_1.View style={{
+                        paddingVertical: 12,
+                        paddingHorizontal: 14,
+                    }}>
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
+                    <react_native_1.View style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: 6,
+                        backgroundColor: AppColors_1.AppColors.purpleShade50,
+                        borderWidth: 1,
+                        borderColor: 'rgba(104,75,155,0.2)',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                      <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 13,
+                        color: AppColors_1.AppColors.primaryBlack,
+                    }}>
+                        Logs Console Levels
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.grayText,
+                        marginTop: 1,
+                    }}>
+                        Toggle which log levels are visible in the Logs tab
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        gap: 8,
+                        marginTop: 10,
+                    }}>
+                    {([
+                        { key: 'info', label: 'Info', color: '#3B82F6' },
+                        { key: 'warn', label: 'Warning', color: '#F59E0B' },
+                        { key: 'error', label: 'Error', color: '#EF4444' },
+                    ]).map(level => {
+                        const isActive = showConsoleLevels[level.key];
+                        return (<TouchableScale_1.default key={level.key} onPress={() => setShowConsoleLevels(prev => ({
+                                ...prev,
+                                [level.key]: !prev[level.key],
+                            }))} style={{
+                                flex: 1,
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: 6,
+                                paddingVertical: 8,
+                                borderRadius: 8,
+                                borderWidth: 1.5,
+                                borderColor: isActive ? level.color : AppColors_1.AppColors.grayBorderSecondary,
+                                backgroundColor: isActive ? `${level.color}0D` : AppColors_1.AppColors.primaryLight,
+                            }}>
+                          <react_native_1.View style={{
+                                width: 8,
+                                height: 8,
+                                borderRadius: 4,
+                                backgroundColor: isActive ? level.color : AppColors_1.AppColors.grayBorderSecondary,
+                            }}/>
+                          <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 11,
+                                color: isActive ? level.color : AppColors_1.AppColors.grayText,
+                            }}>
+                            {level.label}
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>);
+                    })}
+                  </react_native_1.View>
+                </react_native_1.View>
+
                 {/* Divider */}
                 <react_native_1.View style={{
                         height: 1,
@@ -3474,129 +3609,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
           <react_native_1.Text style={styles_1.default.emptySub}>Connected store state is empty.</react_native_1.Text>
         </react_native_1.View>);
         }
-        // Build hierarchical tree: Store -> Reducers -> Action -> Data.
-        // These come from component state (refreshed on every dispatch) so the view stays live.
         const lastActionMap = reduxLastActionMap;
-        const actionHistory = reduxActionHistory;
         return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
-        {/* Tab View Selection Segments */}
-        <react_native_1.View style={{
-                flexDirection: 'row',
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-                borderRadius: 10,
-                padding: 3,
-                marginHorizontal: 16,
-                marginTop: 12,
-                marginBottom: 12,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.dividerColor,
-            }}>
-          <react_native_1.TouchableOpacity onPress={() => {
-                animateNextLayout();
-                setReduxActiveSubTab('timeline');
-            }} style={{
-                flex: 1,
-                paddingVertical: 6,
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: 8,
-                backgroundColor: reduxActiveSubTab === 'timeline'
-                    ? AppColors_1.AppColors.purple
-                    : 'transparent',
-            }}>
-            <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 6,
-            }}>
-              <ReduxTreeView_1.ReduxTimelineIcon color={reduxActiveSubTab === 'timeline'
-                ? '#FFFFFF'
-                : AppColors_1.AppColors.grayText} size={13}/>
-              <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 11,
-                color: reduxActiveSubTab === 'timeline'
-                    ? '#FFFFFF'
-                    : AppColors_1.AppColors.grayText,
-            }}>
-                Action Timeline
-              </react_native_1.Text>
-              <react_native_1.View style={{
-                minWidth: 18,
-                paddingHorizontal: 5,
-                height: 16,
-                borderRadius: 8,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: reduxActiveSubTab === 'timeline'
-                    ? 'rgba(255,255,255,0.28)'
-                    : AppColors_1.AppColors.dividerColor,
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9,
-                color: reduxActiveSubTab === 'timeline'
-                    ? '#FFFFFF'
-                    : AppColors_1.AppColors.grayText,
-            }}>
-                  {actionHistory.length}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-          </react_native_1.TouchableOpacity>
-          <react_native_1.TouchableOpacity onPress={() => {
-                animateNextLayout();
-                setReduxActiveSubTab('tree');
-            }} style={{
-                flex: 1,
-                paddingVertical: 6,
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: 8,
-                backgroundColor: reduxActiveSubTab === 'tree' ? AppColors_1.AppColors.purple : 'transparent',
-            }}>
-            <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 6,
-            }}>
-              <ReduxTreeView_1.ReduxTreeIcon color={reduxActiveSubTab === 'tree' ? '#FFFFFF' : AppColors_1.AppColors.grayText} size={13}/>
-              <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 11,
-                color: reduxActiveSubTab === 'tree'
-                    ? '#FFFFFF'
-                    : AppColors_1.AppColors.grayText,
-            }}>
-                Store Tree
-              </react_native_1.Text>
-              <react_native_1.View style={{
-                minWidth: 18,
-                paddingHorizontal: 5,
-                height: 16,
-                borderRadius: 8,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: reduxActiveSubTab === 'tree'
-                    ? 'rgba(255,255,255,0.28)'
-                    : AppColors_1.AppColors.dividerColor,
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9,
-                color: reduxActiveSubTab === 'tree'
-                    ? '#FFFFFF'
-                    : AppColors_1.AppColors.grayText,
-            }}>
-                  {reducerKeys.length}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-          </react_native_1.TouchableOpacity>
-        </react_native_1.View>
-
         {/* Search Bar */}
         <react_native_1.View style={{
                 flexDirection: 'row',
@@ -3604,15 +3618,14 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                 backgroundColor: AppColors_1.AppColors.grayBackground,
                 borderRadius: 8,
                 marginHorizontal: 16,
+                marginTop: 16,
                 marginBottom: 12,
                 paddingHorizontal: 10,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.dividerColor,
                 height: 36,
             }}>
-          <react_native_1.TextInput placeholder={reduxActiveSubTab === 'timeline'
-                ? 'Search actions or payloads...'
-                : 'Search Redux keys or values...'} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+          <react_native_1.TextInput placeholder="Search Redux keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
                 flex: 1,
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 12,
@@ -3633,7 +3646,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                 marginHorizontal: 16,
                 padding: 12,
             }}>
-          {reduxActiveSubTab === 'timeline' ? (<ReduxTreeView_1.ReduxActionTimeline history={actionHistory} onClear={reduxLogger_1.clearActionHistory} search={reduxSearch}/>) : (<ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>)}
+          <ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
         </react_native_1.View>
       </react_native_1.ScrollView>);
     };
@@ -3759,14 +3772,50 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                 }}>
                             <NetworkIcons_1.BrandSquareIcon size={45}/>
                           </react_native_1.View>
-                          <react_native_1.View style={{ gap: 3 }}>
-                            <react_native_1.Text style={[styles_1.default.headerTitle]}>
-                              RN InApp Inspector
+                          <react_native_1.View style={{ gap: 2, flex: 1 }}>
+                            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                              <react_native_1.Text style={[styles_1.default.headerTitle]} numberOfLines={1}>
+                                {(0, helpers_1.getAppName)()}{' '}
+                                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
+                                  (Inspector)
+                                </react_native_1.Text>
+                              </react_native_1.Text>
+                              {/* #1 — pulsing dot when a newer version is on NPM */}
+                              {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_1.LIB_VERSION}).`, [
+                        { text: 'Later', style: 'cancel' },
+                        {
+                            text: 'View on NPM',
+                            onPress: () => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
+                        },
+                    ])} style={{
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                                  <react_native_1.Animated.View style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: '#4ADE80',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.9)',
+                        opacity: activePulseAnim,
+                        transform: [{ scale: unreadPulseAnim }],
+                    }}/>
+                                </react_native_1.Pressable>)}
+                            </react_native_1.View>
+                            <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 10.5,
+                    color: 'rgba(255, 255, 255, 0.6)',
+                    marginTop: 1,
+                }} selectable={true} numberOfLines={1}>
+                              {(0, helpers_1.getBundleIdentifier)()}
                             </react_native_1.Text>
                             <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 6,
+                    marginTop: 4,
                 }}>
                               {/* OS chip */}
                               <react_native_1.View style={{
@@ -3843,29 +3892,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                                   </react_native_1.Text>
                                 </react_native_1.View>
                               </react_native_1.View>
-
-                              {/* #1 — pulsing dot when a newer version is on NPM */}
-                              {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_1.LIB_VERSION}).`, [
-                        { text: 'Later', style: 'cancel' },
-                        {
-                            text: 'View on NPM',
-                            onPress: () => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
-                        },
-                    ])} style={{
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                                  <react_native_1.Animated.View style={{
-                        width: 8,
-                        height: 8,
-                        borderRadius: 4,
-                        backgroundColor: '#4ADE80',
-                        borderWidth: 1,
-                        borderColor: 'rgba(255,255,255,0.9)',
-                        opacity: activePulseAnim,
-                        transform: [{ scale: unreadPulseAnim }],
-                    }}/>
-                                </react_native_1.Pressable>)}
                             </react_native_1.View>
                           </react_native_1.View>
                         </react_native_1.View>) : null}
@@ -4150,14 +4176,6 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                             </react_native_1.Pressable>)}
                         </react_native_1.View>
                         {analyticsSubTab === 'ga_events' && (<react_native_1.View style={styles_1.default.toolbarRight}>
-                            <TouchableScale_1.default style={[
-                        styles_1.default.toolbarBtn,
-                        !hideScreenView && styles_1.default.toolbarBtnActive,
-                    ]} onPress={() => setHideScreenView(prev => !prev)} hitSlop={10}>
-                              <NetworkIcons_1.ScreenIcon color={!hideScreenView
-                        ? AppColors_1.AppColors.purple
-                        : AppColors_1.AppColors.grayTextStrong} size={18}/>
-                            </TouchableScale_1.default>
                             <TouchableScale_1.default style={{
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -4288,109 +4306,118 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
 
                 {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' ? (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: 16 },
-                ]} renderItem={({ item: [name, count], index }) => {
-                    const maxCount = topEventsArray[0]?.[1] || 1;
-                    const color = (0, AnalyticsEventCard_1.getEventColor)(name);
-                    return (<AnimatedEntrance_1.default index={index} distance={8} style={[
-                            styles_1.default.analyticsTopEventsCard,
-                            { marginBottom: 12, paddingVertical: 16 },
-                        ]}>
-                              <react_native_1.View style={styles_1.default.analyticsTopEventRow}>
-                                <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 8,
-                            flex: 1,
-                        }}>
-                                  <react_native_1.View style={[
-                            styles_1.default.analyticsIconCircle,
-                            { backgroundColor: `${color}1A` },
-                        ]}>
-                                    <react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill={color}>
-                                      <react_native_svg_1.Circle cx="12" cy="12" r="10" opacity="0.3"/>
-                                      <react_native_svg_1.Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
-                                    </react_native_svg_1.default>
-                                  </react_native_1.View>
-                                  <react_native_1.Text style={styles_1.default.analyticsTopEventName} numberOfLines={2}>
-                                    {name}
+                    </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>
-                                <react_native_1.View style={styles_1.default.analyticsTopEventBarWrap}>
-                                  <react_native_linear_gradient_1.default colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
-                            styles_1.default.analyticsTopEventBar,
-                            {
-                                width: `${Math.max(6, (count / maxCount) * 100)}%`,
-                            },
-                        ]}/>
-                                </react_native_1.View>
-                                <react_native_1.Text style={styles_1.default.analyticsTopEventCount}>
-                                  {count}
-                                </react_native_1.Text>
+                              </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>
-                            </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 }) => {
-                    const prev = filteredAnalyticsEvents[index + 1];
-                    const next = filteredAnalyticsEvents[index - 1];
-                    const msSincePrev = prev
-                        ? item.timestamp - prev.timestamp
-                        : undefined;
-                    const thisMin = Math.floor(item.timestamp / 60000);
-                    const nextMin = next
-                        ? 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={() => {
-                            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 ||
-                                item.screenClass ||
-                                item.pageTitle ||
-                                item.pageLocation ||
-                                item.params?.firebase_screen ||
-                                item.params?.screen_name ||
-                                item.params?.firebase_screen_class ||
-                                item.params?.screen_class;
-                            const routeInfo = logRouteMapRef.current.get(item.id + 1000000);
-                            if (!screenName) {
-                                if (routeInfo &&
-                                    routeInfo.path !== 'Navigators') {
-                                    const parts = routeInfo.path.split(' ➔ ');
-                                    screenName = parts[parts.length - 1];
+                              <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 }) => {
+                        const prev = filteredAnalyticsEvents[index + 1];
+                        const next = filteredAnalyticsEvents[index - 1];
+                        const msSincePrev = prev
+                            ? item.timestamp - prev.timestamp
+                            : undefined;
+                        const thisMin = Math.floor(item.timestamp / 60000);
+                        const nextMin = next
+                            ? 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={() => {
+                                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 ||
+                                    item.screenClass ||
+                                    item.pageTitle ||
+                                    item.pageLocation ||
+                                    item.params?.firebase_screen ||
+                                    item.params?.screen_name ||
+                                    item.params?.firebase_screen_class ||
+                                    item.params?.screen_class;
+                                const routeInfo = logRouteMapRef.current.get(item.id + 1000000);
+                                if (!screenName) {
+                                    if (routeInfo &&
+                                        routeInfo.path !== 'Navigators') {
+                                        const parts = routeInfo.path.split(' ➔ ');
+                                        screenName = parts[parts.length - 1];
+                                    }
                                 }
-                            }
-                            return screenName;
-                        })()}/>
-                            </AnimatedEntrance_1.default>);
-                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews 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}>
-                              {analyticsSearch.length > 0
-                        ? 'No matching events'
-                        : 'No analytics events yet'}
-                            </react_native_1.Text>
-                            <react_native_1.Text style={styles_1.default.emptySub}>
-                              {analyticsSearch.length > 0
-                        ? 'Try adjusting your search.'
-                        : 'Call setupAnalyticsLogger(analytics()) at app start.'}
-                            </react_native_1.Text>
-                          </react_native_1.View>} contentContainerStyle={[
-                    styles_1.default.listContent,
-                    filteredAnalyticsEvents.length === 0 && {
-                        flexGrow: 1,
-                    },
-                ]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<react_native_1.View style={{ flex: 1 }}>
+                                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}/>
+                              </react_native_1.View>
+                              <react_native_1.Text style={styles_1.default.emptyTitle}>
+                                {analyticsSearch.length > 0
+                            ? 'No matching events'
+                            : 'No analytics events yet'}
+                              </react_native_1.Text>
+                              <react_native_1.Text style={styles_1.default.emptySub}>
+                                {analyticsSearch.length > 0
+                            ? 'Try adjusting your search.'
+                            : 'Call setupAnalyticsLogger(analytics()) at app start.'}
+                              </react_native_1.Text>
+                            </react_native_1.View>} contentContainerStyle={[
+                        styles_1.default.listContent,
+                        filteredAnalyticsEvents.length === 0 && {
+                            flexGrow: 1,
+                        },
+                    ]} keyboardShouldPersistTaps="handled"/>)}
+                    </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}>
                               <react_native_1.View style={styles_1.default.searchContainer}>