react-native-inapp-inspector 2.0.0 → 2.0.2

package/dist/commonjs/styles/index.js

@@ -43,10 +43,10 @@ const getRawStyles = (colors) => ({
     header: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 10,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
         zIndex: 10,
-        minHeight: 56,
+        minHeight: 52,
         shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.08,
@@ -70,7 +70,7 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'flex-end',
-        gap: 6,
+        gap: 5,
     },
     headerTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
@@ -172,7 +172,7 @@ const getRawStyles = (colors) => ({
         fontSize: 12,
         letterSpacing: 0.2,
     },
-    listContent: { paddingBottom: 12 },
+    listContent: { paddingBottom: react_native_1.Platform.OS === 'ios' ? 44 : 32 },
     // #2 — scroll-to-top button, always shown at the bottom right.
     scrollTopBtn: {
         position: 'absolute',
@@ -193,9 +193,9 @@ const getRawStyles = (colors) => ({
     },
     detailScroll: { flex: 1 },
     closeButtonSquare: {
-        width: 32,
-        height: 32,
-        borderRadius: 8,
+        width: 30,
+        height: 30,
+        borderRadius: 7,
         backgroundColor: `${colors.white}2B`,
         alignItems: 'center',
         justifyContent: 'center',
@@ -414,12 +414,12 @@ const getRawStyles = (colors) => ({
     },
     clearBtn: { padding: 4 },
     domainHeaderCard: {
-        marginHorizontal: 12,
-        marginTop: 12,
+        marginHorizontal: 8,
+        marginTop: 10,
         marginBottom: 4,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        borderRadius: 10,
+        paddingHorizontal: 8,
+        paddingVertical: 7,
+        borderRadius: 9,
         backgroundColor: colors.grayBackground,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
@@ -441,18 +441,18 @@ const getRawStyles = (colors) => ({
         flex: 1,
         minWidth: 0,
         marginRight: 6,
-        gap: 8,
+        gap: 6,
     },
     domainIconWrap: {
-        width: 26,
-        height: 26,
-        borderRadius: 6,
+        width: 22,
+        height: 22,
+        borderRadius: 5,
         alignItems: 'center',
         justifyContent: 'center',
     },
     domainTitleText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13.5,
+        fontSize: 13,
         fontWeight: '700',
         color: colors.primaryBlack,
         textTransform: 'capitalize',
@@ -514,23 +514,23 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 6,
+        paddingHorizontal: 5,
+        paddingVertical: 2.5,
+        borderRadius: 5,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
         backgroundColor: colors.primaryLight,
     },
     domainStatText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
+        fontSize: 9.5,
     },
     treeNodeRow: {
         flexDirection: 'row',
         alignItems: 'stretch',
-        marginHorizontal: 12,
-        paddingRight: 8,
-        paddingLeft: 4,
+        marginHorizontal: 8,
+        paddingRight: 4,
+        paddingLeft: 0,
         backgroundColor: colors.grayBackground,
         borderLeftWidth: 1,
         borderRightWidth: 1,
@@ -544,14 +544,14 @@ const getRawStyles = (colors) => ({
         paddingBottom: 6,
     },
     treeLines: {
-        width: 28,
+        width: 14,
         position: 'relative',
     },
     modernTreeLine: {
         position: 'absolute',
-        left: 14,
+        left: 7,
         top: 0,
-        width: 14,
+        width: 7,
         height: '100%',
         borderLeftWidth: 1.5,
         opacity: 0.5,
@@ -559,19 +559,19 @@ const getRawStyles = (colors) => ({
     modernTreeLineLast: {
         height: '50%',
         borderBottomWidth: 1.5,
-        borderBottomLeftRadius: 10,
+        borderBottomLeftRadius: 8,
     },
     modernTreeBranch: {
         position: 'absolute',
-        left: 14,
+        left: 7,
         top: '50%',
-        width: 14,
+        width: 7,
         borderTopWidth: 1.5,
         opacity: 0.5,
     },
     treeCardWrapper: {
         flex: 1,
-        paddingVertical: 3.5,
+        paddingVertical: 3,
     },
     card: {
         marginHorizontal: 0,
@@ -611,10 +611,10 @@ const getRawStyles = (colors) => ({
         gap: 5,
     },
     smallCheckbox: {
-        width: 13,
-        height: 13,
+        width: 15,
+        height: 15,
         borderRadius: 4,
-        borderWidth: 1.5,
+        borderWidth: 1.8,
         borderColor: colors.grayTextWeak,
         alignItems: 'center',
         justifyContent: 'center',

package/dist/esm/components/ConsoleLogCard.js

@@ -4,8 +4,8 @@ import { Pressable, StyleSheet, Text, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, openInVSCode, } from '../helpers';
-import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
+import LogSyntaxHighlighter from './LogSyntaxHighlighter';
 import { ChevronIcon, ExternalLinkIcon, FlaskIcon, ZapIcon, GlobeIcon, DiceIcon, AtomIcon, BarChartIcon, KeyIcon, SmartphoneIcon, AlertTriangleIcon, BugIcon, TagIcon, } from './NetworkIcons';
 import { useInspector } from './Inspector/InspectorContext';
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
@@ -73,10 +73,10 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
               </View>);
             })}
         </View>
-        <HighlightText text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>
+        <LogSyntaxHighlighter text={remainingText} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>
       </View>);
     }
-    return (<HighlightText text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
+    return (<LogSyntaxHighlighter text={message} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
 };
 export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchStr = '', }) {
     const { setSelectedLog } = useInspector();
@@ -234,10 +234,10 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
           {jsonContent ? (<>
               {jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, 2)) : null}
               {jsonPreview && (<View style={styles.jsonPreviewContainer}>
-                  <HighlightText text={jsonPreview.text} search={searchStr} style={[
+                  <LogSyntaxHighlighter text={jsonPreview.text} search={searchStr} style={[
                     styles.jsonPreviewText,
                     { color: AppColors.primaryBlack },
-                ]} highlightStyle={styles.highlight} detectLinks={false} numberOfLines={5}/>
+                ]} detectLinks={false} numberOfLines={5}/>
                 </View>)}
             </>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, 3))}
         </View>

package/dist/esm/components/EndOfListFooter.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { CheckIcon } from './NetworkIcons';
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         paddingHorizontal: 16,
         paddingTop: 16,
-        paddingBottom: 28,
+        paddingBottom: Platform.OS === 'ios' ? 44 : 32,
         gap: 8,
     },
     dividerLine: {

package/dist/esm/components/Inspector/AnalyticsTab.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import { FlatList, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
-import AnalyticsDetail from '../AnalyticsDetail';
 import AnalyticsFilterModal from './AnalyticsFilterModal';
 import EndOfListFooter from '../EndOfListFooter';
 import styles from '../../styles';
@@ -13,7 +12,7 @@ import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGrad
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
-import { LayersIcon, CheckIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
+import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
 const AnalyticsHeader = React.memo(() => {
     const { t } = useTranslation();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
@@ -123,16 +122,25 @@ const AnalyticsHeader = React.memo(() => {
             return { ...prev, categories: nextCategories };
         });
     };
-    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (-30m / 30s to NOW)
+    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (60s live rolling stream)
     const BUCKET_COUNT = 12;
     const chartHeight = 64;
     const svgWidth = 320;
     const [selectedBucketIdx, setSelectedBucketIdx] = useState(null);
+    const [liveTick, setLiveTick] = useState(0);
+    useEffect(() => {
+        if (!isTrackingEnabled)
+            return;
+        const interval = setInterval(() => {
+            setLiveTick(t => (t + 1) % 100000);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [isTrackingEnabled]);
     const histogramData = useMemo(() => {
         const buckets = [];
         const now = Date.now();
-        const windowMs = 60000; // 60s window
-        const bucketDuration = windowMs / BUCKET_COUNT;
+        const windowMs = 60000; // 60s live rolling window
+        const bucketDuration = windowMs / BUCKET_COUNT; // 5s per bucket
         for (let i = 0; i < BUCKET_COUNT; i++) {
             const bucketAgeSec = Math.round(((BUCKET_COUNT - 1 - i) * bucketDuration) / 1000);
             buckets.push({
@@ -197,7 +205,7 @@ const AnalyticsHeader = React.memo(() => {
             peakVal,
             eventRate,
         };
-    }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
+    }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<View style={styles.analyticsHeaderCard}>
       {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
@@ -269,7 +277,7 @@ const AnalyticsHeader = React.memo(() => {
             }}/>)}
         </View>
 
-        {/* Multi-Select Category Buttons with Checkboxes */}
+        {/* Multi-Select Category Buttons */}
         <View style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -298,18 +306,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isAllSelected ? AppColors.white : AppColors.indigo400,
-                    backgroundColor: isAllSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isAllSelected && <CheckIcon color={AppColors.indigo600Alt} size={8}/>}
-                </View>
                 <LayersIcon color={isAllSelected ? AppColors.white : AppColors.indigo600Alt} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -345,18 +341,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.amber500,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.amber600} size={8}/>}
-                </View>
                 <CartIcon color={isSelected ? AppColors.white : AppColors.amber700} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -392,18 +376,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.sky400,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.sky600} size={8}/>}
-                </View>
                 <GlobeIcon color={isSelected ? AppColors.white : AppColors.sky600} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -439,18 +411,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.purple400,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.violet600} size={8}/>}
-                </View>
                 <BoltIcon color={isSelected ? AppColors.white : AppColors.purple} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -486,18 +446,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.pink400,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.pink600} size={8}/>}
-                </View>
                 <SparkleIcon color={isSelected ? AppColors.white : AppColors.brandPurple} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -693,7 +641,7 @@ const AnalyticsHeader = React.memo(() => {
             </View>
           </View>)}
 
-        {/* Timeline Axis Labels */}
+        {/* Timeline Axis Labels (60s Realtime Rolling Stream) */}
         <View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -705,21 +653,21 @@ const AnalyticsHeader = React.memo(() => {
             fontSize: 8.5,
             color: AppColors.grayTextWeak,
         }}>
-            {t('analytics.time30mAgo')}
+            -60s
           </Text>
           <Text style={{
             fontFamily: AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors.grayTextWeak,
         }}>
-            {t('analytics.time20mAgo')}
+            -40s
           </Text>
           <Text style={{
             fontFamily: AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors.grayTextWeak,
         }}>
-            {t('analytics.time10mAgo')}
+            -20s
           </Text>
           <Text style={{
             fontFamily: AppFonts.interBold,
@@ -959,7 +907,7 @@ const AnalyticsTab = React.memo(() => {
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<View style={styles.emptyContainer}>
+        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<View style={styles.emptyContainer}>
                 <View style={styles.emptyIconWrap}>
                   <EmptyRadarIcon color={AppColors.purple} size={32}/>
                 </View>