react-native-inapp-inspector 1.1.14 → 1.1.16

package/dist/esm/components/AnalyticsEventCard.js

@@ -2,18 +2,19 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
+import { formatGap, formatTime } from '../helpers';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
 // ─── Palette (Google Analytics colours) ───────────────────────────────────────
 const EVENT_PALETTE = [
-    '#4285F4', // blue
-    '#34A853', // green
-    '#9C27B0', // purple
-    '#00897B', // teal
-    '#E53935', // red
-    '#F57C00', // orange
-    '#1565C0', // dark blue
-    '#2E7D32', // dark green
+    AppColors.googleBlue, // blue
+    AppColors.googleGreen, // green
+    AppColors.googlePurple, // purple
+    AppColors.googleTeal, // teal
+    AppColors.googleRed, // red
+    AppColors.googleOrange, // orange
+    AppColors.blue700, // dark blue
+    AppColors.materialGreen, // dark green
 ];
 export function getEventColor(name) {
     const safeName = typeof name === 'string' ? name : String(name || '');
@@ -24,24 +25,6 @@ export function getEventColor(name) {
     return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
 }
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatTime(ts) {
-    const d = new Date(ts);
-    const hh = String(d.getHours()).padStart(2, '0');
-    const mm = String(d.getMinutes()).padStart(2, '0');
-    const ss = String(d.getSeconds()).padStart(2, '0');
-    const ms = String(d.getMilliseconds()).padStart(3, '0');
-    return `${hh}:${mm}:${ss}.${ms}`;
-}
-function formatGap(ms) {
-    if (ms < 1000)
-        return `+${ms}ms`;
-    const s = Math.round(ms / 1000);
-    if (s < 60)
-        return `+${s}s`;
-    const m = Math.floor(s / 60);
-    const rem = s % 60;
-    return rem > 0 ? `+${m}m ${rem}s` : `+${m}m`;
-}
 function getEventCategory(name) {
     if (!name)
         return 'Custom';
@@ -75,27 +58,27 @@ function getCategoryColors(category) {
     switch (category) {
         case 'Page View':
             return {
-                bg: '#E3F2FD',
-                border: '#BBDEFB',
-                text: '#1976D2',
+                bg: AppColors.blueBg,
+                border: AppColors.blueBorder,
+                text: AppColors.blue800,
             };
         case 'Ecommerce':
             return {
-                bg: '#E8F5E9',
-                border: '#C8E6C9',
-                text: '#2E7D32',
+                bg: AppColors.greenBg,
+                border: AppColors.greenBorder,
+                text: AppColors.materialGreen,
             };
         case 'System':
             return {
-                bg: '#F5F5F5',
-                border: '#E0E0E0',
-                text: '#616161',
+                bg: AppColors.greyBg,
+                border: AppColors.greyBorder,
+                text: AppColors.grey600,
             };
         default:
             return {
-                bg: '#F3E5F5',
-                border: '#E1BEE7',
-                text: '#7B1FA2',
+                bg: AppColors.purpleBg,
+                border: AppColors.purpleBorder,
+                text: AppColors.purpleText,
             };
     }
 }
@@ -215,8 +198,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
-                    <Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts.interBold }]}>
+                return (<View style={[cardStyles.chip, { backgroundColor: AppColors.amberBg, borderColor: AppColors.amberBorder }]}>
+                    <Text style={[cardStyles.chipText, { color: AppColors.amber700, fontFamily: AppFonts.interBold }]}>
                       🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
                     </Text>
                   </View>);
@@ -230,8 +213,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
             if (isPrimitive) {
                 const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
-                return (<View style={[cardStyles.chip, { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }]}>
-                    <Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts.interBold }]}>
+                return (<View style={[cardStyles.chip, { backgroundColor: AppColors.emeraldBg, borderColor: AppColors.emeraldBorder }]}>
+                    <Text style={[cardStyles.chipText, { color: AppColors.emerald600, fontFamily: AppFonts.interBold }]}>
                       💰 {String(val)} {currencyStr}
                     </Text>
                   </View>);
@@ -260,12 +243,12 @@ const cardStyles = StyleSheet.create({
         letterSpacing: 0.5,
     },
     modernCard: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
+        borderColor: AppColors.dividerColor,
         padding: 8,
-        shadowColor: '#000',
+        shadowColor: AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
@@ -295,7 +278,7 @@ const cardStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
     highlight: {
-        backgroundColor: '#FFE44D',
+        backgroundColor: AppColors.yellowHighlight,
         color: AppColors.primaryBlack,
         borderRadius: 2,
     },
@@ -333,8 +316,8 @@ const cardStyles = StyleSheet.create({
         marginRight: 4,
     },
     duplicateBadge: {
-        backgroundColor: '#FFE4E6',
-        borderColor: '#FCC2D7',
+        backgroundColor: AppColors.roseBg,
+        borderColor: AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
         paddingVertical: 2,
@@ -343,7 +326,7 @@ const cardStyles = StyleSheet.create({
     duplicateText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#E11D48',
+        color: AppColors.rose600,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },

package/dist/esm/components/AnalyticsGraph.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-import { AnalyticsEvent } from '../types';
-interface Props {
-    event: AnalyticsEvent;
-    accentColor: string;
-}
-declare const AnalyticsGraph: ({ event, accentColor }: Props) => React.JSX.Element;
+import { AnalyticsGraphProps } from '../types';
+declare const AnalyticsGraph: ({ event, accentColor }: AnalyticsGraphProps) => React.JSX.Element;
 export default AnalyticsGraph;

package/dist/esm/components/AnalyticsGraph.js

@@ -53,7 +53,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     const typeData = [
         { label: 'Strings', value: paramTypes.string, color: AppColors.purple },
         { label: 'Numbers', value: paramTypes.number, color: AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: '#F59E0B' }, // Amber
+        { label: 'Booleans', value: paramTypes.boolean, color: AppColors.amber500 }, // Amber
         { label: 'Objects', value: paramTypes.object, color: AppColors.greenColor },
     ].filter(d => d.value > 0);
     strings.sort((a, b) => b.value - a.value);
@@ -94,7 +94,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
           <BarChart data={filteredItems.map((item, i) => ({
                 label: item.item_name || item.item_id || `Item ${i + 1}`,
                 value: item.price,
-            }))} accentColor={AppColors.successGreen || '#22C55E'} maxBarWidth={maxBarWidth} isGradient={false}/>
+            }))} accentColor={AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
         </View>)}
     </View>);
 };
@@ -181,12 +181,12 @@ const GaugeChart = ({ data, accentColor, }) => {
             paddingTop: 6,
             paddingBottom: 6,
         }}>
-      {data.map((d, i) => {
+      {data.map(d => {
             const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
             const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001); // avoid exact 0
             return (<View key={d.label} style={{ alignItems: 'center', width: 70 }}>
             <Svg width="60" height="60" viewBox="0 0 60 60">
-              <Circle cx="30" cy="30" r={radius} stroke="#F3F4F6" strokeWidth={stroke} fill="none"/>
+              <Circle cx="30" cy="30" r={radius} stroke={AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
               <Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
             </Svg>
             <View style={{
@@ -248,12 +248,12 @@ const CalendarChart = ({ data, accentColor, }) => {
             <View style={{
                     width: 58,
                     height: 62,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors.white,
                     borderRadius: 8,
                     borderWidth: 1,
                     borderColor: AppColors.grayBorderSecondary,
                     overflow: 'hidden',
-                    shadowColor: '#000',
+                    shadowColor: AppColors.black,
                     shadowOpacity: 0.05,
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
@@ -269,7 +269,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                 <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 9,
-                    color: '#FFF',
+                    color: AppColors.white,
                     textTransform: 'uppercase',
                     letterSpacing: 0.5,
                 }}>
@@ -281,7 +281,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                     flex: 1,
                     justifyContent: 'center',
                     alignItems: 'center',
-                    backgroundColor: '#FAFAFA',
+                    backgroundColor: AppColors.grayBackground,
                 }}>
                 <Text style={{
                     fontFamily: AppFonts.interBold,

package/dist/esm/components/AnalyticsTabView.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+interface AnalyticsTabViewProps {
+    analyticsSearch: string;
+    onSetAnalyticsSearch: (val: string) => void;
+    onDeleteEvents: () => void;
+    selectedEvent: AnalyticsEvent | null;
+    onSelectEvent: (event: AnalyticsEvent | null) => void;
+    filteredAnalyticsEvents: AnalyticsEvent[];
+    visibleAnalyticsEvents: AnalyticsEvent[];
+    currentUserProperties: Record<string, any>;
+    currentUserId: string | null;
+}
+export declare const AnalyticsTabView: React.FC<AnalyticsTabViewProps>;
+export default AnalyticsTabView;

package/dist/esm/components/AnalyticsTabView.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import { FlatList, Pressable, Text, TextInput, View, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import AnalyticsEventCard from './AnalyticsEventCard';
+import AnalyticsDetail from './AnalyticsDetail';
+import EmptyState from './EmptyState';
+import AnimatedEntrance from './AnimatedEntrance';
+import { SearchIcon, ClearIcon, WipeIcon, UserIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
+export const AnalyticsTabView = React.memo(({ analyticsSearch, onSetAnalyticsSearch, onDeleteEvents, selectedEvent, onSelectEvent, filteredAnalyticsEvents, visibleAnalyticsEvents, currentUserProperties, currentUserId, }) => {
+    const { t } = useTranslation();
+    const [userPropsExpanded, setUserPropsExpanded] = React.useState(false);
+    const renderItem = React.useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
+        <AnalyticsEventCard event={item} searchStr={analyticsSearch} onPress={() => onSelectEvent(item)}/>
+      </AnimatedEntrance>), [analyticsSearch, onSelectEvent]);
+    const keyExtractor = React.useCallback((item, index) => item.id != null ? item.id.toString() : index.toString(), []);
+    const renderAnalyticsHeader = () => {
+        const hasProps = Object.keys(currentUserProperties ?? {}).length > 0;
+        const total = visibleAnalyticsEvents.length;
+        const filtered = filteredAnalyticsEvents.length;
+        return (<View style={{ paddingHorizontal: 16, paddingTop: 8, paddingBottom: 4 }}>
+        {(hasProps || currentUserId) && (<View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    marginBottom: 10,
+                    overflow: 'hidden',
+                }}>
+            <Pressable onPress={() => setUserPropsExpanded(v => !v)} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: 10,
+                    backgroundColor: AppColors.grayBackground,
+                }}>
+              <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                <UserIcon color={AppColors.purple} size={14}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 12,
+                    color: AppColors.primaryBlack,
+                }}>
+                  {t('analytics.user_context')}
+                </Text>
+                {currentUserId && (<View style={{
+                        backgroundColor: 'rgba(104,75,155,0.1)',
+                        paddingHorizontal: 6,
+                        paddingVertical: 1,
+                        borderRadius: 4,
+                    }}>
+                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: AppColors.purple,
+                    }}>
+                      {t('analytics.id')}: {currentUserId}
+                    </Text>
+                  </View>)}
+              </View>
+              <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 11,
+                    color: AppColors.purple,
+                }}>
+                {userPropsExpanded ? t('analytics.hide_props') : t('analytics.show_props')}
+              </Text>
+            </Pressable>
+
+            {userPropsExpanded && hasProps && (<View style={{
+                        padding: 10,
+                        borderTopWidth: 1,
+                        borderTopColor: AppColors.dividerColor,
+                        gap: 4,
+                    }}>
+                {Object.entries(currentUserProperties ?? {}).map(([k, v]) => (<View key={k} style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                        }}>
+                    <Text style={{
+                            fontFamily: AppFonts.interMedium,
+                            fontSize: 11,
+                            color: AppColors.grayTextWeak,
+                        }}>
+                      {k}
+                    </Text>
+                    <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.primaryBlack,
+                        }}>
+                      {String(v)}
+                    </Text>
+                  </View>))}
+              </View>)}
+          </View>)}
+
+        <Text style={[styles.resultCount, { marginBottom: 4 }]}>
+          {t('filters.showing_analytics', { filtered, total })}
+        </Text>
+      </View>);
+    };
+    return (<View style={{ flex: 1 }}>
+      {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent} onClose={() => onSelectEvent(null)}/>) : (<View style={{ flex: 1 }}>
+          <View style={{
+                backgroundColor: AppColors.white,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors.dividerColor,
+                paddingBottom: 6,
+            }}>
+            <View style={[
+                styles.toolbarRow,
+                { marginTop: 12, marginBottom: 8 },
+            ]}>
+              <View style={styles.searchContainer}>
+                <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+                <TextInput placeholder={t('search.analytics_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={onSetAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {analyticsSearch.length > 0 && (<Pressable onPress={() => onSetAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
+                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                  </Pressable>)}
+              </View>
+
+              <View style={styles.toolbarRight}>
+                <TouchableScale style={[
+                styles.toolbarBtn,
+                {
+                    borderColor: 'rgba(255,46,87,0.22)',
+                    backgroundColor: 'rgba(255,46,87,0.06)',
+                },
+            ]} onPress={onDeleteEvents} hitSlop={6}>
+                  <WipeIcon color={AppColors.errorColor} size={15}/>
+                </TouchableScale>
+              </View>
+            </View>
+          </View>
+
+          <FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={renderAnalyticsHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0}/>} contentContainerStyle={[
+                styles.listContent,
+                filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+            ]} keyboardShouldPersistTaps="handled"/>
+        </View>)}
+    </View>);
+});
+export default AnalyticsTabView;

package/dist/esm/components/AnimatedEntrance.d.ts

@@ -8,5 +8,5 @@ interface AnimatedEntranceProps {
     index?: number;
     style?: ViewStyle | ViewStyle[];
 }
-declare const AnimatedEntrance: ({ children, delay, distance, duration, index, style, }: AnimatedEntranceProps) => React.JSX.Element;
+declare const AnimatedEntrance: React.NamedExoticComponent<AnimatedEntranceProps>;
 export default AnimatedEntrance;

package/dist/esm/components/AnimatedEntrance.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated } from 'react-native';
-const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+const AnimatedEntrance = React.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
     const progress = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         progress.setValue(0);
@@ -33,5 +33,5 @@ const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220,
         ]}>
       {children}
     </Animated.View>);
-};
+});
 export default AnimatedEntrance;

package/dist/esm/components/ApiDetailView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NetworkLog } from '../types';
+import { ApiDetailTab } from '../enums';
+interface ApiDetailViewProps {
+    selected: NetworkLog;
+    apiDetailActiveTab: ApiDetailTab | 'metadata' | 'headers' | 'request' | 'response';
+    onSetApiDetailActiveTab: (tab: ApiDetailTab | 'metadata' | 'headers' | 'request' | 'response') => void;
+    detailSearch: string;
+    onSetDetailSearch: (val: string) => void;
+    reqExpanded: boolean;
+    onToggleReqExpanded: () => void;
+    resExpanded: boolean;
+    onToggleResExpanded: () => void;
+    showReqDiff: boolean;
+    onToggleShowReqDiff: () => void;
+    showResDiff: boolean;
+    onToggleShowResDiff: () => void;
+    prevRequestData: any;
+    prevResponseData: any;
+}
+export declare const ApiDetailView: React.FC<ApiDetailViewProps>;
+export default ApiDetailView;