react-native-inapp-inspector 1.1.12 → 1.1.14

package/dist/commonjs/styles/index.d.ts

@@ -305,6 +305,25 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         color: string;
         fontSize: number;
     };
+    fabGreenDot: {
+        position: string;
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
     statBox: {
         flex: number;
         alignItems: string;
@@ -1670,15 +1689,22 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         marginTop: number;
     };
     analyticsCardRow: {};
-    analyticsTopEventsCard: {
-        marginHorizontal: number;
-        marginBottom: number;
+    analyticsIconCircle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+    };
+    analyticsHeaderCard: {
         backgroundColor: string;
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
-        paddingHorizontal: number;
-        paddingVertical: number;
+        padding: number;
+        marginHorizontal: number;
+        marginTop: number;
+        marginBottom: number;
         shadowColor: string;
         shadowOpacity: number;
         shadowRadius: number;
@@ -1688,61 +1714,94 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         };
         elevation: number;
     };
-    analyticsTopEventsHeaderRow: {
+    analyticsHeaderTop: {
         flexDirection: string;
-        alignItems: string;
         justifyContent: string;
+        alignItems: string;
         marginBottom: number;
     };
-    analyticsTopEventsTitle: {
+    analyticsHeaderTitle: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        letterSpacing: number;
-        textTransform: string;
     };
-    analyticsTopEventsSubtitle: {
+    statusDot: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    analyticsHeaderSubtitle: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        letterSpacing: number;
+        marginTop: number;
     };
-    analyticsTopEventRow: {
-        flexDirection: string;
-        alignItems: string;
-        marginBottom: number;
-        gap: number;
+    analyticsHeaderToggle: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
     };
-    analyticsTopEventName: {
+    analyticsHeaderToggleText: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        flex: number;
     };
-    analyticsTopEventBarWrap: {
+    analyticsStatsRow: {
+        flexDirection: string;
+        gap: number;
+        borderTopWidth: number;
+        borderTopColor: string;
+        paddingTop: number;
+    };
+    analyticsStatBox: {
         flex: number;
-        height: number;
         backgroundColor: string;
         borderRadius: number;
-        overflow: string;
+        paddingVertical: number;
+        alignItems: string;
     };
-    analyticsTopEventBar: {
-        height: string;
-        borderRadius: number;
+    analyticsStatValue: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
     };
-    analyticsTopEventCount: {
+    analyticsStatLabel: {
         fontFamily: string;
         fontSize: number;
         color: string;
-        width: number;
-        textAlign: string;
+        marginTop: number;
     };
-    analyticsIconCircle: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        alignItems: string;
+    analyticsHeaderDetails: {
+        borderTopWidth: number;
+        borderTopColor: string;
+        paddingTop: number;
+        marginTop: number;
+    };
+    detailsGroupTitle: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+        marginBottom: number;
+    };
+    detailsRow: {
+        flexDirection: string;
         justifyContent: string;
+        paddingVertical: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    detailsKey: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
+    detailsValue: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
     };
 };
 declare const styles: any;

package/dist/commonjs/styles/index.js

@@ -297,6 +297,22 @@ const getRawStyles = (colors) => ({
         color: colors.primaryLight,
         fontSize: 11,
     },
+    fabGreenDot: {
+        position: 'absolute',
+        top: 2,
+        right: 2,
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: '#00E676',
+        borderWidth: 2,
+        borderColor: colors.primaryLight,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 1.5,
+        elevation: 2,
+    },
     statBox: {
         flex: 1,
         alignItems: 'center',
@@ -1561,76 +1577,116 @@ const getRawStyles = (colors) => ({
         marginTop: 2,
     },
     analyticsCardRow: {},
-    analyticsTopEventsCard: {
-        marginHorizontal: 16,
-        marginBottom: 12,
+    analyticsIconCircle: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    analyticsHeaderCard: {
         backgroundColor: colors.primaryLight,
         borderRadius: 12,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
+        padding: 14,
+        marginHorizontal: 12,
+        marginTop: 8,
+        marginBottom: 8,
+        shadowColor: '#000000',
+        shadowOpacity: 0.03,
         shadowRadius: 4,
         shadowOffset: { width: 0, height: 1 },
         elevation: 1,
     },
-    analyticsTopEventsHeaderRow: {
+    analyticsHeaderTop: {
         flexDirection: 'row',
-        alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: 12,
+        alignItems: 'center',
+        marginBottom: 10,
     },
-    analyticsTopEventsTitle: {
+    analyticsHeaderTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-        color: colors.grayTextWeak,
-        letterSpacing: 0.8,
-        textTransform: 'uppercase',
+        fontSize: 14,
+        color: colors.primaryBlack,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
     },
-    analyticsTopEventsSubtitle: {
+    analyticsHeaderSubtitle: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 9,
-        color: colors.grayTextWeak,
-        letterSpacing: 0.4,
+        fontSize: 11,
+        color: colors.grayText,
+        marginTop: 2,
+    },
+    analyticsHeaderToggle: {
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        backgroundColor: colors.grayBackground,
+        borderWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+    },
+    analyticsHeaderToggleText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: colors.purple,
     },
-    analyticsTopEventRow: {
+    analyticsStatsRow: {
         flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 8,
         gap: 8,
+        borderTopWidth: 1,
+        borderTopColor: colors.dividerColor,
+        paddingTop: 10,
     },
-    analyticsTopEventName: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 12,
-        color: colors.primaryBlack,
+    analyticsStatBox: {
         flex: 1,
-    },
-    analyticsTopEventBarWrap: {
-        flex: 0.8,
-        height: 3,
         backgroundColor: colors.grayBackground,
-        borderRadius: 2,
-        overflow: 'hidden',
+        borderRadius: 6,
+        paddingVertical: 6,
+        alignItems: 'center',
     },
-    analyticsTopEventBar: {
-        height: '100%',
-        borderRadius: 2,
+    analyticsStatValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: colors.primaryBlack,
     },
-    analyticsTopEventCount: {
+    analyticsStatLabel: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 9,
+        color: colors.grayText,
+        marginTop: 1,
+    },
+    analyticsHeaderDetails: {
+        borderTopWidth: 1,
+        borderTopColor: colors.dividerColor,
+        paddingTop: 10,
+        marginTop: 10,
+    },
+    detailsGroupTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 11,
-        color: colors.grayText,
-        width: 24,
-        textAlign: 'right',
+        color: colors.purple,
+        marginBottom: 6,
     },
-    analyticsIconCircle: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
+    detailsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 4,
+        borderBottomWidth: 0.5,
+        borderBottomColor: colors.dividerColor,
+    },
+    detailsKey: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: colors.primaryBlack,
+    },
+    detailsValue: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: colors.grayText,
     },
 });
 exports.getRawStyles = getRawStyles;

package/dist/commonjs/types/index.d.ts

@@ -89,6 +89,9 @@ export interface SectionHeaderProps {
     showDiff?: boolean;
     isDiffing?: boolean;
     onToggleDiff?: () => void;
+    showSearch?: boolean;
+    isSearching?: boolean;
+    onToggleSearch?: () => void;
 }
 export interface TreeNodeProps {
     data: unknown;

package/dist/esm/components/AnalyticsDetail.js

@@ -6,6 +6,7 @@ import JsonViewer from './JsonViewer';
 import TouchableScale from './TouchableScale';
 // Utils
 import { AppFonts } from '../styles/AppFonts';
+import { getSize } from '../helpers';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 const AnalyticsDetail = ({ event, }) => {
@@ -14,6 +15,26 @@ const AnalyticsDetail = ({ event, }) => {
     const params = event.params ?? {};
     const userProperties = event.userProperties ?? {};
     const upCount = Object.keys(userProperties).length;
+    const jsonData = {
+        name: event.name,
+        params: params,
+        ...(upCount > 0 ? { userProperties } : {}),
+    };
+    const isObject = typeof jsonData === 'object' && jsonData !== null;
+    const isArray = Array.isArray(jsonData);
+    let typeLabel = typeof jsonData;
+    let countLabel = '';
+    if (jsonData === null) {
+        typeLabel = 'null';
+    }
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${jsonData.length} items`;
+    }
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(jsonData).length} keys`;
+    }
     return (<ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
       
       {/* Clean Toolbar */}
@@ -27,7 +48,8 @@ const AnalyticsDetail = ({ event, }) => {
             borderBottomColor: AppColors.grayBorderSecondary,
             backgroundColor: AppColors.primaryLight,
         }}>
-        <TouchableScale style={{
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <TouchableScale style={{
             flexDirection: 'row',
             alignItems: 'center',
             gap: 6,
@@ -42,20 +64,49 @@ const AnalyticsDetail = ({ event, }) => {
             setExpandDepth(nextDepth);
             setTreeKey(prev => prev + 1);
         }}>
-          <Text style={{
+            <Text style={{
             fontFamily: AppFonts.interBold,
             fontSize: 12,
             color: AppColors.purple,
         }}>
-            {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
-          </Text>
-        </TouchableScale>
+              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+            </Text>
+          </TouchableScale>
+          <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: AppColors.grayBackground,
+            borderRadius: 6,
+            overflow: 'hidden',
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+        }}>
+            <View style={{ paddingHorizontal: 6, paddingVertical: 4, backgroundColor: AppColors.purple + '18' }}>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 9, color: AppColors.purple, letterSpacing: 0.3 }}>
+                {typeLabel.toUpperCase()}
+              </Text>
+            </View>
+            {countLabel ? (<View style={{ paddingHorizontal: 6, paddingVertical: 4 }}>
+                <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9, color: AppColors.grayText }}>
+                  {countLabel}
+                </Text>
+              </View>) : null}
+          </View>
+          <View style={{
+            backgroundColor: AppColors.grayBackground,
+            borderRadius: 6,
+            paddingHorizontal: 6,
+            paddingVertical: 4,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+        }}>
+            <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9, color: AppColors.grayText }}>
+              {getSize(jsonData)}
+            </Text>
+          </View>
+        </View>
 
-        <CopyButton value={JSON.stringify({
-            name: event.name,
-            params: params,
-            ...(upCount > 0 ? { userProperties } : {}),
-        }, null, 2)} label="Copy JSON"/>
+        <CopyButton value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
       </View>
 
       {/* Direct JSON Viewer View */}
@@ -67,15 +118,7 @@ const AnalyticsDetail = ({ event, }) => {
                 marginTop: 16,
             },
         ]}>
-        <JsonViewer key={treeKey} data={{
-            name: event.name,
-            params: params,
-            ...(upCount > 0
-                ? {
-                    userProperties: userProperties,
-                }
-                : {}),
-        }} defaultExpandDepth={expandDepth}/>
+        <JsonViewer key={treeKey} data={jsonData} defaultExpandDepth={expandDepth} fullHeight/>
       </View>
     </ScrollView>);
 };
@@ -87,8 +130,8 @@ const detailStyles = StyleSheet.create({
     },
     jsonBlockContainer: {
         marginHorizontal: 16,
-        marginTop: 8,
-        padding: 12,
+        marginTop: 16,
+        marginBottom: 16,
         borderWidth: 1,
         borderRadius: 12,
     },

package/dist/esm/components/AnalyticsEventCard.js

@@ -16,9 +16,10 @@ const EVENT_PALETTE = [
     '#2E7D32', // dark green
 ];
 export function getEventColor(name) {
+    const safeName = typeof name === 'string' ? name : String(name || '');
     let hash = 0;
-    for (let i = 0; i < name.length; i++) {
-        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    for (let i = 0; i < safeName.length; i++) {
+        hash = (hash * 31 + safeName.charCodeAt(i)) | 0;
     }
     return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
 }
@@ -41,6 +42,63 @@ function formatGap(ms) {
     const rem = s % 60;
     return rem > 0 ? `+${m}m ${rem}s` : `+${m}m`;
 }
+function getEventCategory(name) {
+    if (!name)
+        return 'Custom';
+    const lowercaseName = name.toLowerCase();
+    if (lowercaseName === 'screen_view' || lowercaseName === 'page_view') {
+        return 'Page View';
+    }
+    // Ecommerce events
+    const ecommerceEvents = [
+        'purchase', 'add_to_cart', 'begin_checkout', 'view_item',
+        'select_item', 'remove_from_cart', 'view_cart',
+        'add_shipping_info', 'add_payment_info', 'refund',
+        'view_item_list', 'select_promotion', 'view_promotion'
+    ];
+    if (ecommerceEvents.includes(lowercaseName)) {
+        return 'Ecommerce';
+    }
+    // Firebase System Auto-events
+    const systemEvents = [
+        'first_open', 'session_start', 'user_engagement',
+        'app_clear_data', 'app_exception', 'app_update', 'os_update',
+        'notification_receive', 'notification_open', 'notification_dismiss',
+        'screen_active', 'screen_inactive'
+    ];
+    if (systemEvents.includes(lowercaseName) || lowercaseName.startsWith('firebase_') || lowercaseName.startsWith('_')) {
+        return 'System';
+    }
+    return 'Custom';
+}
+function getCategoryColors(category) {
+    switch (category) {
+        case 'Page View':
+            return {
+                bg: '#E3F2FD',
+                border: '#BBDEFB',
+                text: '#1976D2',
+            };
+        case 'Ecommerce':
+            return {
+                bg: '#E8F5E9',
+                border: '#C8E6C9',
+                text: '#2E7D32',
+            };
+        case 'System':
+            return {
+                bg: '#F5F5F5',
+                border: '#E0E0E0',
+                text: '#616161',
+            };
+        default:
+            return {
+                bg: '#F3E5F5',
+                border: '#E1BEE7',
+                text: '#7B1FA2',
+            };
+    }
+}
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
     const color = getEventColor(event.name);
@@ -89,6 +147,19 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
               <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
             </View>
 
+            {(() => {
+            const category = getEventCategory(event.name);
+            const tagColors = getCategoryColors(category);
+            return (<View style={[
+                    cardStyles.categoryBadge,
+                    { backgroundColor: tagColors.bg, borderColor: tagColors.border },
+                ]}>
+                  <Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
+                    {category}
+                  </Text>
+                </View>);
+        })()}
+
             {event.count !== undefined ? (<View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
@@ -112,20 +183,24 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
         {/* Bottom Row: Metadata Chips & Sparkline */}
         <View style={cardStyles.cardBody}>
           <View style={cardStyles.chipsRow}>
-            {computedScreenName ||
-            event.screenName ||
-            event.params?.firebase_screen ||
-            event.params?.screen_name ||
-            event.params?.firebase_screen_class ? (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
-                <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                <Text style={[cardStyles.chipText, { color: AppColors.grayText }]} numberOfLines={1}>
-                  {computedScreenName ||
+            {(() => {
+            const rawScreenName = computedScreenName ||
                 event.screenName ||
                 event.params?.firebase_screen ||
                 event.params?.screen_name ||
-                event.params?.firebase_screen_class}
-                </Text>
-              </View>) : null}
+                event.params?.firebase_screen_class;
+            if (!rawScreenName)
+                return null;
+            const screenNameStr = typeof rawScreenName === 'object'
+                ? JSON.stringify(rawScreenName)
+                : String(rawScreenName);
+            return (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
+                  <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
+                  <Text style={[cardStyles.chipText, { color: AppColors.grayText }]} numberOfLines={1}>
+                    {screenNameStr}
+                  </Text>
+                </View>);
+        })()}
 
             <View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
               <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>
@@ -272,6 +347,18 @@ const cardStyles = StyleSheet.create({
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },
+    categoryBadge: {
+        borderWidth: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    categoryText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
     miniGraphWrapper: {
         flexDirection: 'row',
         alignItems: 'flex-end',

package/dist/esm/components/HighlightText.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Text, Linking } from 'react-native';
+import { Text } from 'react-native';
 // Helpers
-import { escapeRegex } from '../helpers';
+import { escapeRegex, handleOpenExternalLink } from '../helpers';
 const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
     const hasNumberOfLines = 'numberOfLines' in rest;
     const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
@@ -28,7 +28,7 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
                             color: '#007AFF', // skyBlue link color
                             textDecorationLine: 'underline',
                         }} onPress={() => {
-                            Linking.openURL(part).catch(() => { });
+                            handleOpenExternalLink(part);
                         }}>
                 {part}
               </Text>);

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

@@ -1,9 +1,11 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, onModeChange, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
     wrap?: boolean;
+    fullHeight?: boolean;
+    onModeChange?: (mode: "pretty" | "raw" | "table") => void;
 }) => React.JSX.Element;
 export default JsonViewer;