react-native-inapp-inspector 1.1.13 → 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/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/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.13";
+export declare const LIB_VERSION = "1.1.14";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '1.1.13';
+export const LIB_VERSION = '1.1.14';

package/dist/esm/customHooks/analyticsLogger.d.ts

@@ -2,6 +2,14 @@ import { AnalyticsEvent } from '../types';
 export declare const subscribeAnalyticsEvents: (callback: (events: AnalyticsEvent[]) => void) => () => void;
 export declare const clearAnalyticsEvents: () => void;
 export declare const getAnalyticsEvents: () => AnalyticsEvent[];
+export declare const getCurrentUserProperties: () => {
+    [x: string]: any;
+};
+export declare const getCurrentUserId: () => string;
+export declare const getDefaultEventParameters: () => {
+    [x: string]: any;
+};
+export declare const getCollectionEnabled: () => boolean;
 /**
  * Directly push an event into the inspector without going through Firebase.
  * Useful for custom analytics wrappers or testing.

package/dist/esm/customHooks/analyticsLogger.js

@@ -27,6 +27,8 @@ let counter = 0;
 // Running snapshot of user properties set so far — attached to every event
 let currentUserProperties = {};
 let currentUserId;
+let currentDefaultEventParameters = {};
+let isCollectionEnabled = true;
 // ─── Core helpers ─────────────────────────────────────────────────────────────
 const notify = () => {
     const snapshot = [...events];
@@ -50,6 +52,10 @@ export const clearAnalyticsEvents = () => {
     notify();
 };
 export const getAnalyticsEvents = () => [...events];
+export const getCurrentUserProperties = () => ({ ...currentUserProperties });
+export const getCurrentUserId = () => currentUserId;
+export const getDefaultEventParameters = () => ({ ...currentDefaultEventParameters });
+export const getCollectionEnabled = () => isCollectionEnabled;
 // ─── Manual logging (escape hatch, rarely needed) ────────────────────────────
 /**
  * Directly push an event into the inspector without going through Firebase.
@@ -147,8 +153,39 @@ export const setupAnalyticsLogger = (analyticsInstance) => {
     const originalSetUserId = analyticsInstance.setUserId.bind(analyticsInstance);
     analyticsInstance.setUserId = async (id) => {
         currentUserId = id ?? undefined;
+        notify();
         return originalSetUserId(id);
     };
+    // ── setDefaultEventParameters ──────────────────────────────────────────────
+    if (typeof analyticsInstance.setDefaultEventParameters === 'function') {
+        const originalSetDefaultEventParameters = analyticsInstance.setDefaultEventParameters.bind(analyticsInstance);
+        analyticsInstance.setDefaultEventParameters = async (params) => {
+            currentDefaultEventParameters = params ?? {};
+            notify();
+            return originalSetDefaultEventParameters(params);
+        };
+    }
+    // ── setAnalyticsCollectionEnabled ───────────────────────────────────────────
+    if (typeof analyticsInstance.setAnalyticsCollectionEnabled === 'function') {
+        const originalSetAnalyticsCollectionEnabled = analyticsInstance.setAnalyticsCollectionEnabled.bind(analyticsInstance);
+        analyticsInstance.setAnalyticsCollectionEnabled = async (enabled) => {
+            isCollectionEnabled = enabled;
+            notify();
+            return originalSetAnalyticsCollectionEnabled(enabled);
+        };
+    }
+    // ── resetAnalyticsData ──────────────────────────────────────────────────────
+    if (typeof analyticsInstance.resetAnalyticsData === 'function') {
+        const originalResetAnalyticsData = analyticsInstance.resetAnalyticsData.bind(analyticsInstance);
+        analyticsInstance.resetAnalyticsData = async () => {
+            clearAnalyticsEvents();
+            currentUserProperties = {};
+            currentUserId = undefined;
+            currentDefaultEventParameters = {};
+            notify();
+            return originalResetAnalyticsData();
+        };
+    }
 };
 export const autoSetupAnalyticsLogger = () => {
     if (globalThis.__INSPECTOR_ANALYTICS_AUTOSETUP__)

package/dist/esm/index.d.ts

@@ -3,7 +3,7 @@ declare const NetworkInspectorWrapper: (props: any) => React.JSX.Element;
 export default NetworkInspectorWrapper;
 export { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, addAxiosInterceptors, } from './customHooks/networkLogger';
 export { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, } from './customHooks/consoleLogger';
-export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, } from './customHooks/analyticsLogger';
+export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, getCurrentUserProperties, getCurrentUserId, getDefaultEventParameters, getCollectionEnabled, } from './customHooks/analyticsLogger';
 export { WebView, getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, } from './customHooks/reduxLogger';