react-native-inapp-inspector 1.1.14 → 1.1.16

package/dist/commonjs/components/HeadersSection.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
 const react_native_1 = require("react-native");
 // Components
 const CopyButton_1 = __importDefault(require("./CopyButton"));
@@ -96,6 +97,7 @@ const HeaderRow = react_1.default.memo(function HeaderRow({ headerKey, value, is
     </react_native_1.Animated.View>);
 });
 const HeadersSection = ({ title, headers, search, resetKey, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(false, 2400, 300);
     (0, react_1.useEffect)(() => {
         forceOpen(false);
@@ -142,12 +144,12 @@ const HeadersSection = ({ title, headers, search, resetKey, }) => {
 
       <react_native_1.Animated.View style={bodyStyle}>
         <react_native_1.View style={styles_1.default.htColHeadRow}>
-          <react_native_1.Text style={[styles_1.default.htColHead, { width: '30%' }]}>KEY</react_native_1.Text>
-          <react_native_1.Text style={[styles_1.default.htColHead, { flex: 1 }]}>VALUE</react_native_1.Text>
+          <react_native_1.Text style={[styles_1.default.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</react_native_1.Text>
+          <react_native_1.Text style={[styles_1.default.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</react_native_1.Text>
         </react_native_1.View>
 
         {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<react_native_1.View style={styles_1.default.htEmpty}>
-            <react_native_1.Text style={styles_1.default.htEmptyText}>No matching headers</react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.htEmptyText}>{t('network.noMatchingHeaders')}</react_native_1.Text>
           </react_native_1.View>)}
       </react_native_1.Animated.View>
     </react_native_1.View>);

package/dist/commonjs/components/HighlightText.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const HighlightText: ({ text, search, style, highlightStyle, detectLinks, ...rest }: any) => React.JSX.Element;
+declare const HighlightText: React.NamedExoticComponent<any>;
 export default HighlightText;

package/dist/commonjs/components/HighlightText.js

@@ -7,9 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 // Helpers
 const helpers_1 = require("../helpers");
-const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
-    const hasNumberOfLines = 'numberOfLines' in rest;
-    const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
+const HighlightText = react_1.default.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
     // Regex to detect absolute URLs
     const URL_REGEX = /(https?:\/\/[^\s]+)/g;
     const renderNormalOrHighlighted = (subText, keyPrefix) => {
@@ -26,7 +24,7 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
     };
     if (detectLinks && text) {
         const parts = text.split(URL_REGEX);
-        return (<react_native_1.Text style={style} numberOfLines={numLines} {...rest}>
+        return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
         {parts.map((part, i) => {
                 if (part.match(URL_REGEX)) {
                     return (<react_native_1.Text key={`link-${i}`} style={{
@@ -43,15 +41,15 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
       </react_native_1.Text>);
     }
     if (!search)
-        return (<react_native_1.Text style={style} numberOfLines={numLines} {...rest}>
+        return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
         {text}
       </react_native_1.Text>);
     const regex = new RegExp(`(${(0, helpers_1.escapeRegex)(search)})`, 'gi');
     const parts = text.split(regex);
-    return (<react_native_1.Text style={style} numberOfLines={numLines} {...rest}>
+    return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
       {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<react_native_1.Text key={i} style={highlightStyle}>
             {part}
           </react_native_1.Text>) : (<react_native_1.Text key={i}>{part}</react_native_1.Text>))}
     </react_native_1.Text>);
-};
+});
 exports.default = HighlightText;

package/dist/commonjs/components/Inspector/AnalyticsTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AnalyticsTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default AnalyticsTab;

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

@@ -0,0 +1,231 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
+const NetworkIcons_1 = require("../NetworkIcons");
+const AnalyticsHeader = react_1.default.memo(() => {
+    const { filteredAnalyticsEvents, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = (0, InspectorContext_1.useInspector)();
+    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={() => {
+            (0, InspectorContext_1.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>);
+});
+const AnalyticsTab = react_1.default.memo(() => {
+    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, } = (0, InspectorContext_1.useInspector)();
+    const keyExtractor = (0, react_1.useCallback)((item, index) => item?.id?.toString() ?? index.toString(), []);
+    const renderItem = (0, react_1.useCallback)(({ 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 (<AnalyticsEventCard_1.default event={item} onPress={() => {
+                (0, InspectorContext_1.animateNextLayout)();
+                setSelectedEvent(item);
+            }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
+                if (!item)
+                    return '';
+                const rawScreenName = 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;
+                let screenName = typeof rawScreenName === 'string'
+                    ? rawScreenName
+                    : (rawScreenName ? JSON.stringify(rawScreenName) : '');
+                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;
+            })()}/>);
+    }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent, logRouteMapRef]);
+    return (<>
+      {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+      {selectedEvent == null && (<react_native_1.View style={[
+                styles_1.default.toolbarRow,
+                { marginTop: 12, marginBottom: 8 },
+            ]}>
+        <react_native_1.View style={styles_1.default.searchContainer}>
+          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+          <react_native_1.TextInput placeholder="Search events..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+          {analyticsSearch.length > 0 && (<react_native_1.Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+              <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+            </react_native_1.Pressable>)}
+        </react_native_1.View>
+        <react_native_1.View style={styles_1.default.toolbarRight}>
+          <react_native_1.TouchableOpacity style={[
+                styles_1.default.toolbarBtn,
+                isAnalyticsPaused && {
+                    borderColor: `${AppColors_1.AppColors.darkOrange}50`,
+                    backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
+                },
+            ]} onPress={() => setIsAnalyticsPaused(p => !p)} hitSlop={6}>
+            <NetworkIcons_1.HeaderPauseIcon isPaused={isAnalyticsPaused} color={isAnalyticsPaused
+                ? AppColors_1.AppColors.darkOrange
+                : AppColors_1.AppColors.grayTextStrong} size={16}/>
+          </react_native_1.TouchableOpacity>
+          <react_native_1.TouchableOpacity style={[
+                styles_1.default.toolbarBtn,
+                {
+                    borderColor: `${AppColors_1.AppColors.errorColor}38`,
+                    backgroundColor: `${AppColors_1.AppColors.errorColor}0F`,
+                },
+            ]} onPress={handleDelete} hitSlop={6}>
+            <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+      </react_native_1.View>)}
+
+      <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}>
+                <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>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter_1.default count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
+                styles_1.default.listContent,
+                filteredAnalyticsEvents.length === 0 && {
+                    flexGrow: 1,
+                },
+            ]} keyboardShouldPersistTaps="handled"/>) : null}
+      </react_native_1.View>
+    </>);
+});
+exports.default = AnalyticsTab;

package/dist/commonjs/components/Inspector/ConsoleTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ConsoleTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default ConsoleTab;