react-native-inapp-inspector 1.1.14 → 1.1.15

package/README.md

@@ -14,7 +14,7 @@
   <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>
 </p>
 
-A self-contained in-app debugging overlay for React Native. Inspect network traffic, console output, analytics events, Redux state, and WebView activity directly inside your app.
+A self-contained in-app debugging overlay for React Native. Inspect network traffic, console output, analytics events, and Redux state directly inside your app.
 
 <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;" />
@@ -27,11 +27,9 @@ A self-contained in-app debugging overlay for React Native. Inspect network traf
 | Feature            | Description                                                                                                                                                                 |
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Network inspector  | Captures `fetch` and axios `GET`, `POST`, `PUT`, `PATCH`, and `DELETE` calls with URL, method, status, headers, body, response, duration, caller, cURL, and fetch snippets. |
-| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts.                                                                  |
 | Console logger     | Captures `console.log`, `console.info`, `console.warn`, and `console.error` with source method and caller details.                                                          |
 | Analytics tracker  | Captures manual analytics events and patched `@react-native-firebase/analytics` calls including `logEvent`, `logScreenView`, user properties, and user id.                  |
 | Redux inspector    | Connects to a Redux store, displays the live state tree, tracks dispatched actions, affected slices, and action history.                                                    |
-| WebView inspector  | Provides an instrumented `WebView` with console capture, navigation history, HTML/CSS/JS snapshots, and optional loading overlay.                                           |
 | Error boundary     | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely.                                                                                     |
 
 ---
@@ -54,10 +52,10 @@ yarn add -D react-native-inapp-inspector axios
 
 The package has React and React Native as peer dependencies. It depends on `@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`. The current network logger imports `axios` for axios interception, so install `axios` even if most of your requests use `fetch`.
 
-Install optional integrations when you use WebView or Firebase Analytics capture:
+Install optional integrations when you use Firebase Analytics capture:
 
 ```bash
-npm install react-native-webview @react-native-firebase/analytics
+npm install @react-native-firebase/analytics
 ```
 
 For iOS, install pods after adding native dependencies:
@@ -107,6 +105,12 @@ You can disable the overlay without removing it from your tree:
 <NetworkInspector enabled={false} />
 ```
 
+Use `isEnabled` (defaults to `true`) to fully hide the floating launcher button:
+
+```tsx
+<NetworkInspector isEnabled={false} />
+```
+
 ---
 
 ## Settings Persistence
@@ -249,26 +253,6 @@ The Redux tab shows the latest state tree, recent dispatches, payloads, and chan
 
 ---
 
-## WebView Inspection
-
-Use the exported `WebView` as a drop-in wrapper around `react-native-webview`.
-
-```tsx
-import {WebView} from 'react-native-inapp-inspector';
-
-<WebView source={{uri: 'https://example.com'}} />;
-```
-
-The wrapper forwards your props and ref, preserves your `onMessage`, `onNavigationStateChange`, `onLoadStart`, and `onLoadEnd` handlers, and injects scripts for WebView console logs, navigation history, and source snapshots.
-
-Disable the loading overlay with `showLoader={false}`:
-
-```tsx
-<WebView source={{uri: 'https://example.com'}} showLoader={false} />
-```
-
----
-
 ## Error Boundary
 
 ```tsx
@@ -303,15 +287,6 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
 | `subscribeReduxState(callback)`                     | function          | Subscribes to Redux state updates and returns an unsubscribe function.     |
 | `getActionHistory()`                                | function          | Returns the recent dispatched Redux actions.                               |
 | `clearActionHistory()`                              | function          | Clears the Redux action history.                                           |
-| `WebView`                                           | component         | Instrumented WebView wrapper.                                              |
-| `getWebViewLogs()`                                  | function          | Returns captured WebView console logs.                                     |
-| `getWebViewNavHistory()`                            | function          | Returns captured WebView navigation history.                               |
-| `getWebViewHtml()`                                  | function          | Returns the latest captured WebView HTML.                                  |
-| `getWebViewCss()`                                   | function          | Returns the latest captured WebView CSS.                                   |
-| `getWebViewJs()`                                    | function          | Returns the latest captured WebView JavaScript.                            |
-| `getWebViewHtmlUrl()`                               | function          | Returns the URL for the latest captured WebView source snapshot.           |
-| `clearWebViewData()`                                | function          | Clears captured WebView logs, navigation, and source data.                 |
-| `subscribeWebView(callback)`                        | function          | Subscribes to WebView data changes and returns an unsubscribe function.    |
 | `ErrorBoundary`                                     | component         | React error boundary component.                                            |
 
 ---

package/dist/commonjs/assets/svgAssets.d.ts

@@ -0,0 +1,3 @@
+export declare const PRETTY_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z\" fill=\"currentColor\" opacity=\"0.9\"/>\n  <path d=\"M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z\" fill=\"currentColor\" opacity=\"0.6\"/>\n</svg>";
+export declare const RAW_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"1\" y=\"2\" width=\"10\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.9\"/>\n  <rect x=\"1\" y=\"5.5\" width=\"14\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.6\"/>\n  <rect x=\"1\" y=\"9\" width=\"8\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.45\"/>\n  <rect x=\"1\" y=\"12.5\" width=\"12\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.3\"/>\n</svg>";
+export declare const TABLE_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"1\" y=\"1\" width=\"14\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.2\" opacity=\"0.7\"/>\n  <path d=\"M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14\" stroke=\"currentColor\" stroke-width=\"0.8\" opacity=\"0.5\"/>\n</svg>";

package/dist/commonjs/assets/svgAssets.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TABLE_SVG = exports.RAW_SVG = exports.PRETTY_SVG = void 0;
+exports.PRETTY_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z" fill="currentColor" opacity="0.9"/>
+  <path d="M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z" fill="currentColor" opacity="0.6"/>
+</svg>`;
+exports.RAW_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="2" width="10" height="1.5" rx="0.75" fill="currentColor" opacity="0.9"/>
+  <rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill="currentColor" opacity="0.6"/>
+  <rect x="1" y="9" width="8" height="1.5" rx="0.75" fill="currentColor" opacity="0.45"/>
+  <rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill="currentColor" opacity="0.3"/>
+</svg>`;
+exports.TABLE_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
+  <path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke="currentColor" stroke-width="0.8" opacity="0.5"/>
+</svg>`;

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

@@ -1,18 +1,5 @@
 import React from 'react';
-import { AnalyticsEvent } from '../types';
+import { AnalyticsEventCardProps } from '../types';
 export declare function getEventColor(name: string): string;
-export interface AnalyticsEventCardProps {
-    event: AnalyticsEvent & {
-        count?: number;
-    };
-    onPress: () => void;
-    isNew?: boolean;
-    searchStr?: string;
-    isFirst: boolean;
-    isLast: boolean;
-    msSincePrev?: number;
-    showTimestamp?: boolean;
-    computedScreenName?: string;
-}
 declare const AnalyticsEventCard: React.NamedExoticComponent<AnalyticsEventCardProps>;
 export default AnalyticsEventCard;

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -41,18 +41,19 @@ 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 HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./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_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 || '');
@@ -63,24 +64,6 @@ 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';
@@ -114,27 +97,27 @@ function getCategoryColors(category) {
     switch (category) {
         case 'Page View':
             return {
-                bg: '#E3F2FD',
-                border: '#BBDEFB',
-                text: '#1976D2',
+                bg: AppColors_1.AppColors.blueBg,
+                border: AppColors_1.AppColors.blueBorder,
+                text: AppColors_1.AppColors.blue800,
             };
         case 'Ecommerce':
             return {
-                bg: '#E8F5E9',
-                border: '#C8E6C9',
-                text: '#2E7D32',
+                bg: AppColors_1.AppColors.greenBg,
+                border: AppColors_1.AppColors.greenBorder,
+                text: AppColors_1.AppColors.materialGreen,
             };
         case 'System':
             return {
-                bg: '#F5F5F5',
-                border: '#E0E0E0',
-                text: '#616161',
+                bg: AppColors_1.AppColors.greyBg,
+                border: AppColors_1.AppColors.greyBorder,
+                text: AppColors_1.AppColors.grey600,
             };
         default:
             return {
-                bg: '#F3E5F5',
-                border: '#E1BEE7',
-                text: '#7B1FA2',
+                bg: AppColors_1.AppColors.purpleBg,
+                border: AppColors_1.AppColors.purpleBorder,
+                text: AppColors_1.AppColors.purpleText,
             };
     }
 }
@@ -160,7 +143,7 @@ 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 }]}>{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 ─────────────────────────────────────────────────────── */}
@@ -215,7 +198,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
               </react_native_1.View>) : null}
           </react_native_1.View>
           <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {formatTime(event.timestamp)}
+            {(0, helpers_1.formatTime)(event.timestamp)}
           </react_native_1.Text>
         </react_native_1.View>
 
@@ -254,8 +237,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                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'}
                     </react_native_1.Text>
                   </react_native_1.View>);
@@ -269,8 +252,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             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: '#ECFDF5', borderColor: '#A7F3D0' }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                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>);
@@ -299,12 +282,12 @@ const cardStyles = react_native_1.StyleSheet.create({
         letterSpacing: 0.5,
     },
     modernCard: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
+        borderColor: AppColors_1.AppColors.dividerColor,
         padding: 8,
-        shadowColor: '#000',
+        shadowColor: AppColors_1.AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
@@ -334,7 +317,7 @@ const cardStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
     highlight: {
-        backgroundColor: '#FFE44D',
+        backgroundColor: AppColors_1.AppColors.yellowHighlight,
         color: AppColors_1.AppColors.primaryBlack,
         borderRadius: 2,
     },
@@ -372,8 +355,8 @@ const cardStyles = react_native_1.StyleSheet.create({
         marginRight: 4,
     },
     duplicateBadge: {
-        backgroundColor: '#FFE4E6',
-        borderColor: '#FCC2D7',
+        backgroundColor: AppColors_1.AppColors.roseBg,
+        borderColor: AppColors_1.AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
         paddingVertical: 2,
@@ -382,7 +365,7 @@ const cardStyles = react_native_1.StyleSheet.create({
     duplicateText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9,
-        color: '#E11D48',
+        color: AppColors_1.AppColors.rose600,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },

package/dist/commonjs/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/commonjs/components/AnalyticsGraph.js

@@ -91,7 +91,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     const typeData = [
         { label: 'Strings', value: paramTypes.string, color: AppColors_1.AppColors.purple },
         { label: 'Numbers', value: paramTypes.number, color: AppColors_1.AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: '#F59E0B' }, // Amber
+        { label: 'Booleans', value: paramTypes.boolean, color: AppColors_1.AppColors.amber500 }, // Amber
         { label: 'Objects', value: paramTypes.object, color: AppColors_1.AppColors.greenColor },
     ].filter(d => d.value > 0);
     strings.sort((a, b) => b.value - a.value);
@@ -132,7 +132,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_1.AppColors.successGreen || '#22C55E'} maxBarWidth={maxBarWidth} isGradient={false}/>
+            }))} accentColor={AppColors_1.AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
         </react_native_1.View>)}
     </react_native_1.View>);
 };
@@ -219,12 +219,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 (<react_native_1.View key={d.label} style={{ alignItems: 'center', width: 70 }}>
             <react_native_svg_1.default width="60" height="60" viewBox="0 0 60 60">
-              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke="#F3F4F6" strokeWidth={stroke} fill="none"/>
+              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={AppColors_1.AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
               <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
             </react_native_svg_1.default>
             <react_native_1.View style={{
@@ -286,12 +286,12 @@ const CalendarChart = ({ data, accentColor, }) => {
             <react_native_1.View style={{
                     width: 58,
                     height: 62,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors_1.AppColors.white,
                     borderRadius: 8,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     overflow: 'hidden',
-                    shadowColor: '#000',
+                    shadowColor: AppColors_1.AppColors.black,
                     shadowOpacity: 0.05,
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
@@ -307,7 +307,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 9,
-                    color: '#FFF',
+                    color: AppColors_1.AppColors.white,
                     textTransform: 'uppercase',
                     letterSpacing: 0.5,
                 }}>
@@ -319,7 +319,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                     flex: 1,
                     justifyContent: 'center',
                     alignItems: 'center',
-                    backgroundColor: '#FAFAFA',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
                 }}>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,

package/dist/commonjs/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/commonjs/components/AnalyticsTabView.js

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

package/dist/commonjs/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/commonjs/components/AnimatedEntrance.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
     const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         progress.setValue(0);
@@ -68,5 +68,5 @@ const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220,
         ]}>
       {children}
     </react_native_1.Animated.View>);
-};
+});
 exports.default = AnimatedEntrance;

package/dist/commonjs/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;