react-native-inapp-inspector 1.1.20 → 1.1.22

package/README.md

@@ -10,11 +10,16 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/v/react-native-inapp-inspector?color=6366f1&label=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
+  <a href="https://bundlephobia.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/bundlephobia/minzip/react-native-inapp-inspector?color=10b981&label=minzipped" alt="bundle size" /></a>
   <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
-  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/badge/platform-iOS%20%7C%20Android-blue" alt="platform" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/badge/platform-iOS%20%7C%20Android%20%7C%20Expo-blue" alt="platform" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6" alt="TypeScript" /></a>
 </p>
 
-A self-contained, developer-first in-app debugging overlay for React Native. Inspect network traffic, console logs, stack traces, analytics events, and Redux state directly on your device or simulator with zero external dependencies.
+The **zero-config, all-in-one in-app debugging overlay for React Native & Expo**. Inspect network traffic (fetch/Axios), console logs with Metro symbolicated stack traces, Redux state diffs, Firebase Analytics events, and JavaScript bundle size directly on your device or simulator with zero native setup.
+
+> 🚀 **The modern, lightweight alternative to Flipper and Chucker** — works standalone on device, in test builds, and across standalone APKs/IPAs without desktop companion apps, cables, or open debugger ports.
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px;" />
@@ -22,6 +27,22 @@ A self-contained, developer-first in-app debugging overlay for React Native. Ins
 
 ---
 
+## ⚡ Why Choose `react-native-inapp-inspector`?
+
+| Capability | **react-native-inapp-inspector** | react-native-network-logger | Flipper / RN Debugger |
+| :--- | :---: | :---: | :---: |
+| **Zero Native Setup / No Cables** | ✅ | ✅ | ❌ (Requires desktop app/cables) |
+| **Network Inspector (Fetch & Axios)** | ✅ | ✅ | ✅ |
+| **cURL & Fetch Snippet Export** | ✅ | ❌ | ⚠️ |
+| **Console Logger + Stack Traces** | ✅ (Metro Symbolicated) | ❌ | ✅ |
+| **Redux State & Action Diffs** | ✅ | ❌ | ⚠️ |
+| **Firebase Analytics Tracker** | ✅ | ❌ | ❌ |
+| **JS Bundle Size & Hermes Analyzer** | ✅ | ❌ | ❌ |
+| **Live Traffic Stream Freeze** | ✅ | ❌ | ❌ |
+| **Expo & Bare React Native** | ✅ | ✅ | ⚠️ |
+
+---
+
 ## ✨ Features
 
 | Feature | Description |
@@ -45,25 +66,28 @@ A self-contained, developer-first in-app debugging overlay for React Native. Ins
 
 ## 📦 Installation
 
+### Bare React Native
 ```bash
 npm install --save-dev react-native-inapp-inspector axios
+# or
+yarn add -D react-native-inapp-inspector axios
 ```
 
 ```bash
-yarn add -D react-native-inapp-inspector axios
+# iOS Pods
+cd ios && pod install
 ```
 
-### Peer & Native Dependencies
+### Expo Projects
+```bash
+npx expo install react-native-inapp-inspector react-native-svg react-native-linear-gradient
+```
 
-The package has React and React Native as peer dependencies. It depends on `@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`.
+### Dependencies
+The package requires React (`>=18.0.0`) and React Native (`>=0.60.0`) as peer dependencies and utilizes `@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`.
 
 *(Optional)* If you use `@react-native-clipboard/clipboard` in your project, the inspector automatically detects and utilizes native clipboard bridges for seamless emulator-to-host copying.
 
-```bash
-# iOS Pods installation
-cd ios && pod install
-```
-
 ---
 
 ## 🚀 Basic Setup

package/dist/commonjs/components/AnalyticsDetail.js

@@ -47,7 +47,9 @@ const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
+const i18n_1 = require("../i18n");
 const AnalyticsDetail = ({ event, }) => {
+    const { t } = (0, i18n_1.useTranslation)();
     const [expandDepth, setExpandDepth] = (0, react_1.useState)(1);
     const [treeKey, setTreeKey] = (0, react_1.useState)(0);
     const params = event.params ?? {};
@@ -67,7 +69,7 @@ const AnalyticsDetail = ({ event, }) => {
     }
     else if (isArray) {
         typeLabel = 'array';
-        countLabel = `${jsonData.length} items`;
+        countLabel = `${jsonData.length} ${t('analytics.items')}`;
     }
     else if (isObject) {
         typeLabel = 'object';
@@ -107,7 +109,7 @@ const AnalyticsDetail = ({ event, }) => {
             fontSize: 12,
             color: AppColors_1.AppColors.purple,
         }}>
-              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+              {expandDepth === 99 ? t('common.collapseAll') : t('common.expandAll')}
             </react_native_1.Text>
           </TouchableScale_1.default>
           <react_native_1.View style={{
@@ -144,7 +146,7 @@ const AnalyticsDetail = ({ event, }) => {
           </react_native_1.View>
         </react_native_1.View>
 
-        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
+        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label={t('common.copyJson')}/>
       </react_native_1.View>
 
       {/* Direct JSON Viewer View */}

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { AnalyticsEventCardProps } from '../types';
-export declare function getEventColor(name: string): string;
 declare const AnalyticsEventCard: React.NamedExoticComponent<AnalyticsEventCardProps>;
 export default AnalyticsEventCard;

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -36,94 +36,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEventColor = getEventColor;
 const react_1 = __importStar(require("react"));
 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 i18n_1 = require("../i18n");
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-// ─── Palette (Google Analytics colours) ───────────────────────────────────────
-const EVENT_PALETTE = [
-    AppColors_1.AppColors.googleBlue, // blue
-    AppColors_1.AppColors.googleGreen, // green
-    AppColors_1.AppColors.googlePurple, // purple
-    AppColors_1.AppColors.googleTeal, // teal
-    AppColors_1.AppColors.googleRed, // red
-    AppColors_1.AppColors.googleOrange, // orange
-    AppColors_1.AppColors.blue700, // dark blue
-    AppColors_1.AppColors.materialGreen, // dark green
-];
-function getEventColor(name) {
-    const safeName = typeof name === 'string' ? name : String(name || '');
-    let hash = 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];
-}
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-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: AppColors_1.AppColors.blueBg,
-                border: AppColors_1.AppColors.blueBorder,
-                text: AppColors_1.AppColors.blue800,
-            };
-        case 'Ecommerce':
-            return {
-                bg: AppColors_1.AppColors.greenBg,
-                border: AppColors_1.AppColors.greenBorder,
-                text: AppColors_1.AppColors.materialGreen,
-            };
-        case 'System':
-            return {
-                bg: AppColors_1.AppColors.greyBg,
-                border: AppColors_1.AppColors.greyBorder,
-                text: AppColors_1.AppColors.grey600,
-            };
-        default:
-            return {
-                bg: AppColors_1.AppColors.purpleBg,
-                border: AppColors_1.AppColors.purpleBorder,
-                text: AppColors_1.AppColors.purpleText,
-            };
-    }
-}
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
-    const color = getEventColor(event.name);
+    const { t } = (0, i18n_1.useTranslation)();
+    const color = (0, helpers_1.getEventColor)(event.name);
     const paramCount = event.params ? Object.keys(event.params).length : 0;
     const userPropCount = event.userProperties
         ? Object.keys(event.userProperties).length
@@ -143,11 +67,19 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
     return (<react_native_1.View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<react_native_1.View style={cardStyles.gapContainer}>
-          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>{(0, helpers_1.formatGap)(msSincePrev)}</react_native_1.Text>
+          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>
+            {(0, helpers_1.formatGap)(msSincePrev)}
+          </react_native_1.Text>
         </react_native_1.View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
-      <TouchableScale_1.default onPress={onPress} style={[cardStyles.modernCard, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+      <TouchableScale_1.default onPress={onPress} style={[
+            cardStyles.modernCard,
+            {
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            },
+        ]}>
         <react_native_1.Animated.View style={[
             react_native_1.StyleSheet.absoluteFill,
             {
@@ -170,14 +102,21 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             </react_native_1.View>
 
             {(() => {
-            const category = getEventCategory(event.name);
-            const tagColors = getCategoryColors(category);
+            const catKey = (0, helpers_1.getEventCategory)(event.name);
+            const tagColors = (0, helpers_1.getCategoryColors)(catKey);
+            const categoryLabel = catKey === 'page_view'
+                ? t('analytics.pageViewCategory')
+                : catKey === 'ecommerce'
+                    ? t('analytics.ecommerceCategory')
+                    : catKey === 'system'
+                        ? t('analytics.systemCategory')
+                        : t('analytics.customCategory');
             return (<react_native_1.View style={[
                     cardStyles.categoryBadge,
                     { backgroundColor: tagColors.bg, borderColor: tagColors.border },
                 ]}>
                   <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
-                    {category}
+                    {categoryLabel}
                   </react_native_1.Text>
                 </react_native_1.View>);
         })()}
@@ -193,7 +132,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 cardStyles.duplicateText,
                 event.count === 1 && { color: AppColors_1.AppColors.grayTextStrong },
             ]}>
-                  {event.count}×{event.count > 1 ? ' Duplicate' : ''}
+                  {event.count}×
+                  {event.count > 1 ? ` ${t('analytics.duplicate')}` : ''}
                 </react_native_1.Text>
               </react_native_1.View>) : null}
           </react_native_1.View>
@@ -216,7 +156,13 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const screenNameStr = typeof rawScreenName === 'object'
                 ? JSON.stringify(rawScreenName)
                 : String(rawScreenName);
-            return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+            return (<react_native_1.View style={[
+                    cardStyles.chip,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    },
+                ]}>
                   <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
                   <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
                     {screenNameStr}
@@ -224,22 +170,51 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 </react_native_1.View>);
         })()}
 
-            <react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+            <react_native_1.View style={[
+            cardStyles.chip,
+            {
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            },
+        ]}>
               <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
-                {'{} '} {paramCount} params
+                {'{} '} {paramCount} {t('analytics.params')}
               </react_native_1.Text>
             </react_native_1.View>
 
-            {userPropCount > 0 && (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>★ {userPropCount} props</react_native_1.Text>
+            {userPropCount > 0 && (<react_native_1.View style={[
+                cardStyles.chip,
+                {
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                },
+            ]}>
+                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
+                  ★ {userPropCount} {t('analytics.props')}
+                </react_native_1.Text>
               </react_native_1.View>)}
 
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.amberBg, borderColor: AppColors_1.AppColors.amberBorder }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.amber700, fontFamily: AppFonts_1.AppFonts.interBold }]}>
-                      🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
+                return (<react_native_1.View style={[
+                        cardStyles.chip,
+                        {
+                            backgroundColor: AppColors_1.AppColors.amberBg,
+                            borderColor: AppColors_1.AppColors.amberBorder,
+                        },
+                    ]}>
+                    <react_native_1.Text style={[
+                        cardStyles.chipText,
+                        {
+                            color: AppColors_1.AppColors.amber700,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                        },
+                    ]}>
+                      🛒 {items.length}{' '}
+                      {items.length === 1
+                        ? t('analytics.item')
+                        : t('analytics.items')}
                     </react_native_1.Text>
                   </react_native_1.View>);
             }
@@ -251,9 +226,23 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const currency = event.params?.currency ?? '';
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
             if (isPrimitive) {
-                const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.emeraldBg, borderColor: AppColors_1.AppColors.emeraldBorder }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.emerald600, fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                const currencyStr = typeof currency === 'string' || typeof currency === 'number'
+                    ? String(currency)
+                    : '';
+                return (<react_native_1.View style={[
+                        cardStyles.chip,
+                        {
+                            backgroundColor: AppColors_1.AppColors.emeraldBg,
+                            borderColor: AppColors_1.AppColors.emeraldBorder,
+                        },
+                    ]}>
+                    <react_native_1.Text style={[
+                        cardStyles.chipText,
+                        {
+                            color: AppColors_1.AppColors.emerald600,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                        },
+                    ]}>
                       💰 {String(val)} {currencyStr}
                     </react_native_1.Text>
                   </react_native_1.View>);

package/dist/commonjs/components/ConsoleLogCard.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConsoleLogCard = void 0;
 const react_1 = __importDefault(require("react"));
-const react_i18next_1 = require("react-i18next");
+const i18n_1 = require("../i18n");
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
@@ -64,7 +64,7 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
 };
 exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', }) {
     const { setSelectedLog } = (0, InspectorContext_1.useInspector)();
-    const { t } = (0, react_i18next_1.useTranslation)();
+    const { t } = (0, i18n_1.useTranslation)();
     const jsonContent = (0, helpers_1.getJsonContent)(item.message);
     const isAnalyticsError = item.message
         .toLowerCase()

package/dist/commonjs/components/DiffViewer.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_i18next_1 = require("react-i18next");
+const i18n_1 = require("../i18n");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // Helpers
@@ -45,7 +45,7 @@ const helpers_1 = require("../helpers");
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
 const DiffViewer = react_1.default.memo(({ oldData, newData, forceOpen, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
+    const { t } = (0, i18n_1.useTranslation)();
     const diffs = (0, react_1.useMemo)(() => (0, helpers_1.getDiff)(oldData, newData), [oldData, newData]);
     if (forceOpen === false) {
         return (<react_native_1.View style={styles_1.default.codeBlock}>

package/dist/commonjs/components/HeadersSection.js

@@ -37,7 +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 i18n_1 = require("../i18n");
 const react_native_1 = require("react-native");
 // Components
 const CopyButton_1 = __importDefault(require("./CopyButton"));
@@ -97,7 +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 { t } = (0, i18n_1.useTranslation)();
     const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(false, 2400, 300);
     (0, react_1.useEffect)(() => {
         forceOpen(false);