react-native-inapp-inspector 1.1.35 → 2.0.1

package/android/src/main/java/com/inappinspector/NetworkInspectorPackage.kt

@@ -0,0 +1,17 @@
+package com.inappinspector
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import java.util.Collections
+
+class NetworkInspectorPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(NetworkInspectorModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return Collections.emptyList()
+    }
+}

package/dist/commonjs/components/ConsoleLogCard.js

@@ -10,8 +10,8 @@ const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
-const HighlightText_1 = __importDefault(require("./HighlightText"));
 const CopyButton_1 = __importDefault(require("./CopyButton"));
+const LogSyntaxHighlighter_1 = __importDefault(require("./LogSyntaxHighlighter"));
 const NetworkIcons_1 = require("./NetworkIcons");
 const InspectorContext_1 = require("./Inspector/InspectorContext");
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
@@ -79,10 +79,10 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
               </react_native_1.View>);
             })}
         </react_native_1.View>
-        <HighlightText_1.default text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>
+        <LogSyntaxHighlighter_1.default text={remainingText} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>
       </react_native_1.View>);
     }
-    return (<HighlightText_1.default text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
+    return (<LogSyntaxHighlighter_1.default text={message} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
 };
 exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', }) {
     const { setSelectedLog } = (0, InspectorContext_1.useInspector)();
@@ -240,10 +240,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
           {jsonContent ? (<>
               {jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 2)) : null}
               {jsonPreview && (<react_native_1.View style={styles.jsonPreviewContainer}>
-                  <HighlightText_1.default text={jsonPreview.text} search={searchStr} style={[
+                  <LogSyntaxHighlighter_1.default text={jsonPreview.text} search={searchStr} style={[
                     styles.jsonPreviewText,
                     { color: AppColors_1.AppColors.primaryBlack },
-                ]} highlightStyle={styles.highlight} detectLinks={false} numberOfLines={5}/>
+                ]} detectLinks={false} numberOfLines={5}/>
                 </react_native_1.View>)}
             </>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 3))}
         </react_native_1.View>

package/dist/commonjs/components/CopyButton.js

@@ -42,6 +42,7 @@ const react_native_1 = require("react-native");
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Helpers
 const helpers_1 = require("../helpers");
+const NativeInspector_1 = require("../native/NativeInspector");
 // Assets
 const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
@@ -50,6 +51,7 @@ const styles_1 = __importDefault(require("../styles"));
 const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const handlePress = (0, react_1.useCallback)(() => {
+        (0, NativeInspector_1.triggerNativeHaptic)('success');
         const resolvedValue = typeof value === 'function' ? value() : value;
         (0, helpers_1.copyToClipboard)(resolvedValue, label);
         setCopied(true);
@@ -57,6 +59,7 @@ const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) =>
     }, [value, label]);
     const handleLongPress = (0, react_1.useCallback)(() => {
         try {
+            (0, NativeInspector_1.triggerNativeHaptic)('medium');
             const resolvedValue = typeof value === 'function' ? value() : value;
             const textToShare = typeof resolvedValue === 'string'
                 ? resolvedValue

package/dist/commonjs/components/EndOfListFooter.js

@@ -33,7 +33,7 @@ const styles = react_native_1.StyleSheet.create({
         justifyContent: 'center',
         paddingHorizontal: 16,
         paddingTop: 16,
-        paddingBottom: 28,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 44 : 32,
         gap: 8,
     },
     dividerLine: {

package/dist/commonjs/components/ErrorBoundary.js

@@ -43,6 +43,7 @@ const i18n_1 = require("../i18n");
 const NetworkIcons_1 = require("./NetworkIcons");
 const crashHandler_1 = require("../customHooks/crashHandler");
 const enums_1 = require("../types/enums");
+const NativeInspector_1 = require("../native/NativeInspector");
 function parseStackTrace(stack) {
     if (!stack)
         return { rootFrame: null, frames: [] };
@@ -145,6 +146,8 @@ ${error.stack || 'No stack trace available'}
         try {
             const stack = error?.stack || errorInfo?.componentStack || '';
             (0, crashHandler_1.handleInterceptedCrash)(error, stack, false, enums_1.CrashType.Render, errorInfo?.componentStack);
+            (0, NativeInspector_1.showNativeFloatingButton)();
+            (0, NativeInspector_1.setNativeFloatingButtonBadge)(true);
         }
         catch { }
     }

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

@@ -40,7 +40,6 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const AnalyticsEventCard_1 = __importDefault(require("../AnalyticsEventCard"));
-const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
 const AnalyticsFilterModal_1 = __importDefault(require("./AnalyticsFilterModal"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
 const styles_1 = __importDefault(require("../../styles"));
@@ -59,6 +58,10 @@ const AnalyticsHeader = react_1.default.memo(() => {
     const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
     const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
     const isTrackingEnabled = (0, analyticsLogger_1.getCollectionEnabled)();
+    // If there are no analytics events in the session, hide the graph, category breakdown, and realtime card
+    if (analyticsEvents.length === 0) {
+        return null;
+    }
     const hasUserProps = Object.keys(userProperties).length > 0;
     const hasDefaultParams = Object.keys(defaultParams).length > 0;
     const totalEvents = filteredAnalyticsEvents.length;
@@ -157,16 +160,25 @@ const AnalyticsHeader = react_1.default.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] = (0, react_1.useState)(null);
+    const [liveTick, setLiveTick] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!isTrackingEnabled)
+            return;
+        const interval = setInterval(() => {
+            setLiveTick(t => (t + 1) % 100000);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [isTrackingEnabled]);
     const histogramData = (0, react_1.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({
@@ -231,7 +243,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             peakVal,
             eventRate,
         };
-    }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
+    }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
       {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
@@ -303,7 +315,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             }}/>)}
         </react_native_1.View>
 
-        {/* Multi-Select Category Buttons with Checkboxes */}
+        {/* Multi-Select Category Buttons */}
         <react_native_1.View style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -332,18 +344,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo400,
-                    backgroundColor: isAllSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isAllSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.indigo600Alt} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.LayersIcon color={isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -379,18 +379,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber500,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.amber600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -426,18 +414,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky400,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.sky600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -473,18 +449,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple400,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.violet600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -520,18 +484,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink400,
-                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.pink600} size={8}/>}
-                </react_native_1.View>
                 <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
@@ -628,8 +580,8 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
 
         {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
-        <react_native_1.View style={{ height: chartHeight, position: 'relative' }}>
-          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
+        <react_native_1.View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
+          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <react_native_svg_1.Defs>
               <react_native_svg_1.LinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
                 <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
@@ -727,7 +679,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>)}
 
-        {/* Timeline Axis Labels */}
+        {/* Timeline Axis Labels (60s Realtime Rolling Stream) */}
         <react_native_1.View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -739,21 +691,21 @@ const AnalyticsHeader = react_1.default.memo(() => {
             fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            {t('analytics.time30mAgo')}
+            -60s
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            {t('analytics.time20mAgo')}
+            -40s
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            {t('analytics.time10mAgo')}
+            -20s
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
@@ -993,7 +945,7 @@ const AnalyticsTab = react_1.default.memo(() => {
       <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <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={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+        {isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} 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>