react-native-inapp-inspector 1.1.15 → 1.1.17

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, and Redux state directly inside your app.
+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.
 
 <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,25 +22,28 @@ A self-contained in-app debugging overlay for React Native. Inspect network traf
 
 ---
 
-## Features
+## ✨ Features
 
-| 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. |
-| 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.                                                    |
-| Error boundary     | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely.                                                                                     |
+| Feature | Description |
+| --- | --- |
+| 🌐 **Network Inspector** | Intercepts `fetch` and Axios (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`). Inspect status codes, request/response headers, body JSON, duration, caller origin, and instant cURL / fetch export snippets. |
+| 🪵 **Console Logger & Stack Trace** | Captures `console.log`, `info`, `warn`, and `error`. Displays trigger file (`TSX`, `JSX`, `TS`, `JS`) & line numbers via **Metro Symbolication**, call stack frames, individual arguments inspection, and duplicate collapsing (`×N`). |
+| ⏸️ **Live Stream Pause / Resume** | Freeze incoming network requests, console logs, and analytics streams on the fly to inspect active traffic without list jumping. |
+| 📊 **Analytics Tracker** | Tracks manual events and auto-patches `@react-native-firebase/analytics` calls (`logEvent`, `logScreenView`, `setUserProperties`, and `setUserId`). |
+| 🔄 **Redux State & Actions** | Connects to Redux / Redux Toolkit. Inspect dispatched actions with deep state diffs, payload breakdown, slice state trees, and `redux-persist` metadata. |
+| 📦 **Bundle Visualizer** | In-app JavaScript bundle size breakdown, Hermes engine bytecode metrics, visual package treemap, and integrated `react-native-bundle-visualizer` CLI. |
+| 🪟 **Rich JSON Viewer** | Explore data in **Pretty**, **Raw**, and **Table** modes with full-text search highlighting and uniform typography. |
+| 🛡️ **Error Boundary** | Built-in `ErrorBoundary` to gracefully catch and inspect React render crashes. |
 
 ---
 
-## Video Walkthrough
+## 🎬 Video Walkthrough
 
 [Download or watch the Video Walkthrough](https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/example/guidance/Video-WalkThrough.mp4)
 
 ---
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install --save-dev react-native-inapp-inspector axios
@@ -50,25 +53,22 @@ npm install --save-dev react-native-inapp-inspector axios
 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`.
+### Peer & Native Dependencies
 
-Install optional integrations when you use Firebase Analytics capture:
+The package has React and React Native as peer dependencies. It depends on `@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`.
 
-```bash
-npm install @react-native-firebase/analytics
-```
-
-For iOS, install pods after adding native dependencies:
+*(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
+## 🚀 Basic Setup
 
-Mount the inspector once near the root of your app.
+Mount `<NetworkInspector />` near the root of your application:
 
 ```tsx
 import React from 'react';
@@ -78,7 +78,7 @@ import NetworkInspector from 'react-native-inapp-inspector';
 const App = () => {
   return (
     <SafeAreaView style={{flex: 1}}>
-      {/* Your app */}
+      {/* Your application components */}
       <NetworkInspector />
     </SafeAreaView>
   );
@@ -87,77 +87,59 @@ const App = () => {
 export default App;
 ```
 
-When mounted, the inspector sets up network logging, clears previous network logs, patches console logging, and attempts Firebase Analytics auto-setup if `@react-native-firebase/analytics` is installed.
+When mounted, the inspector automatically sets up network logging, intercepts console methods, and attaches Firebase Analytics if available.
 
-If you need to capture requests that happen before the component mounts, call `setupNetworkLogger()` at module level in your app entry file.
+### Early Startup Network Logging
+
+If your application makes API calls before the root component finishes mounting, initialize the logger at the module level in your entry file (`index.js` or `App.tsx`):
 
 ```tsx
 import NetworkInspector, {
   setupNetworkLogger,
+  setupConsoleLogger,
 } from 'react-native-inapp-inspector';
 
 setupNetworkLogger();
+setupConsoleLogger();
 ```
 
-You can disable the overlay without removing it from your tree:
-
-```tsx
-<NetworkInspector enabled={false} />
-```
-
-Use `isEnabled` (defaults to `true`) to fully hide the floating launcher button:
-
-```tsx
-<NetworkInspector isEnabled={false} />
-```
-
----
-
-## Settings Persistence
+### Toggling Visibility
 
-By default, the inspector preserves configuration preferences (such as dark mode, default landing tab, and module visibilities):
-- **iOS:** Settings are persisted automatically using React Native's built-in `Settings` module (`NSUserDefaults`) with zero configuration or additional packages required.
-- **Android / Custom:** To persist settings on Android (or to use a custom storage mechanism on both platforms), pass a storage instance such as `@react-native-async-storage/async-storage` or `react-native-mmkv` to the `storage` prop:
+You can disable or hide the floating launcher overlay conditionally:
 
 ```tsx
-import AsyncStorage from '@react-native-async-storage/async-storage';
+// Fully disable the overlay and interception
+<NetworkInspector enabled={__DEV__} />
 
-<NetworkInspector storage={AsyncStorage} />
+// Hide the floating trigger button while keeping background interception active
+<NetworkInspector isEnabled={false} />
 ```
 
-If no `storage` prop is passed, Android will fall back to an in-memory store (settings reset when the app is restarted).
-
 ---
 
-## Navigation & Screen Tracking
+## 🪵 Console Logger & Stack Trace
 
-To group network requests, console logs, and analytics events by the specific navigation screen where they occurred, the inspector automatically hooks into React Navigation context.
+The console logger provides deep insight into every `console.log`, `info`, `warn`, and `error` call:
 
-If you mount `<NetworkInspector />` globally at the root of your application (outside of the `<NavigationContainer>`), it won't have access to React Navigation's context. To enable accurate screen tracking in this setup, create a navigation ref and pass it to the `navigationRef` prop:
+- **Metro Source Map Symbolication**: In development mode, stack traces are automatically symbolicated against Metro to point directly to your exact project source files (`HomeScreen.tsx:42:15`, `App.tsx:20`).
+- **File Type Badges**: Distinct visual chips identifying `.tsx`, `.jsx`, `.ts`, and `.js` callers.
+- **Detailed Sub-Tabs**:
+  - **Output / Message**: Full message with JSON Viewer (Pretty, Raw, Table modes) and link detection.
+  - **Args (N)**: Inspect each passed argument individually with type detection (`Array[5]`, `Object{4}`).
+  - **Call Stack Trace**: Structured frame cards (with Frame `#`, Function, File, and `L:C` pills) and Raw Trace view.
+  - **Error Stack**: Automatically captures the thrown Error stack trace when logging Error objects.
+  - **Metadata**: Structured table of log properties, timestamp, character count, and duplicate counter.
 
 ```tsx
-import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';
-import NetworkInspector from 'react-native-inapp-inspector';
-
-const navigationRef = createNavigationContainerRef();
-
-const App = () => {
-  return (
-    <>
-      <NavigationContainer ref={navigationRef}>
-        {/* Navigators / Screens */}
-      </NavigationContainer>
-      <NetworkInspector navigationRef={navigationRef} />
-    </>
-  );
-};
+console.log('[API] User authenticated successfully', {userId: 42, role: 'admin'});
+console.error(new Error('Payment gateway timeout'));
 ```
 
 ---
 
-## Network Logging
+## 🌐 Network Logging
 
-`setupNetworkLogger()` patches global `fetch`, the default axios instance, and future axios instances created with `axios.create()`.
+`setupNetworkLogger()` intercepts global `fetch`, the default Axios instance, and instances created with `axios.create()`.
 
 ```tsx
 import axios from 'axios';
@@ -171,7 +153,7 @@ await fetch('https://api.example.com/users');
 await api.post('/login', {email, password});
 ```
 
-If an axios instance was created before `setupNetworkLogger()` ran, attach interceptors manually:
+If an Axios instance was instantiated before `setupNetworkLogger()` ran, attach interceptors manually:
 
 ```tsx
 import {addAxiosInterceptors} from 'react-native-inapp-inspector';
@@ -179,27 +161,46 @@ import {addAxiosInterceptors} from 'react-native-inapp-inspector';
 addAxiosInterceptors(api);
 ```
 
-Network logs are capped at 100 entries and ignore React Native symbolication requests.
-
 ---
 
-## Console Logging
+## 🔄 Redux State & Action Inspection
 
-The inspector captures console output automatically when mounted. You can also set it up manually:
+Connect your Redux store once during application startup:
 
 ```tsx
-import {setupConsoleLogger} from 'react-native-inapp-inspector';
+import {connectReduxStore} from 'react-native-inapp-inspector';
+import store from './store';
 
-setupConsoleLogger();
+connectReduxStore(store);
+```
+
+### RTK Query, Thunks & Sagas (Recommended)
+
+To capture actions dispatched from inside async thunks, sagas, or RTK Query, add `inspectorReduxMiddleware`:
+
+```tsx
+import {configureStore} from '@reduxjs/toolkit';
+import {inspectorReduxMiddleware, connectReduxStore} from 'react-native-inapp-inspector';
+import rootReducer from './slices';
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat(inspectorReduxMiddleware),
+});
+
+connectReduxStore(store);
 ```
 
-Captured levels are `log`, `info`, `warn`, and `error`.
+The Redux tab provides:
+- **Action History**: Action type badge, timestamp, payload size, affected slices, deep state diffs, and snapshot viewer.
+- **Slice Tree**: Live state tree per slice, persisted slice detection (`_persist`), search filtering, and JSON table exploration.
 
 ---
 
-## Analytics Logging
+## 📊 Analytics Logging
 
-Manual events can be pushed into the Analytics tab:
+Log manual analytics events or connect Firebase Analytics:
 
 ```tsx
 import {logAnalyticsEvent} from 'react-native-inapp-inspector';
@@ -211,7 +212,7 @@ logAnalyticsEvent('purchase_completed', {
 });
 ```
 
-For Firebase Analytics, pass the result of `analytics()` to `setupAnalyticsLogger()` before analytics calls begin:
+### Firebase Analytics Integration
 
 ```tsx
 import analytics from '@react-native-firebase/analytics';
@@ -220,80 +221,101 @@ import {setupAnalyticsLogger} from 'react-native-inapp-inspector';
 setupAnalyticsLogger(analytics());
 ```
 
-The logger patches `logEvent`, `logScreenView`, `setUserProperty`, `setUserProperties`, and `setUserId`. Analytics events are capped at 200 entries.
-
 ---
 
-## Redux Inspection
+## 🧭 Navigation & Screen Tracking
 
-Connect your Redux store once during app startup.
+To group network requests, logs, and analytics by the active screen, pass your navigation container ref:
 
 ```tsx
-import {connectReduxStore} from 'react-native-inapp-inspector';
-import store from './store';
+import {NavigationContainer, createNavigationContainerRef} from '@react-navigation/native';
+import NetworkInspector from 'react-native-inapp-inspector';
 
-connectReduxStore(store);
+const navigationRef = createNavigationContainerRef();
+
+const App = () => {
+  return (
+    <>
+      <NavigationContainer ref={navigationRef}>
+        {/* Your screens */}
+      </NavigationContainer>
+      <NetworkInspector navigationRef={navigationRef} />
+    </>
+  );
+};
 ```
 
-**Recommended:** if you use thunks, sagas or RTK Query, also add the inspector middleware so actions dispatched from inside them are captured with full type/payload attribution (they bypass the wrapped outer dispatch otherwise):
+---
 
-```tsx
-import {inspectorReduxMiddleware} from 'react-native-inapp-inspector';
+## 📦 Application Bundle Size & Asset Inspector
 
-const store = configureStore({
-  reducer,
-  middleware: getDefaultMiddleware =>
-    getDefaultMiddleware().concat(inspectorReduxMiddleware),
-});
-```
+The inspector includes a dedicated **Bundle** tab (placed right after Redux) with **5 specialized sub-tabs** to inspect and optimize bundle assets:
 
-Using both together is safe — they de-duplicate automatically.
+1. 📊 **Overview & Treemap**: Real-time stacked visual ratio bar, total bundle size (`MB`), Hermes Bytecode engine detection, and category weight cards.
+2. 📁 **Files Explorer**: Searchable file-by-file footprint breakdown (`PNG`, `TSX`, `JS`, `TTF`, `JSON`) with lines, resolution, and optimization status.
+3. 📦 **Packages**: Node modules footprint audit (`react-native`, `@react-navigation`, `axios`, `react-native-svg`), version tags, and direct vs. transitive dependency analysis.
+4. 🖼️ **Media Auditor**: Dedicated asset compression analysis for images and custom fonts with potential WebP savings calculators.
+5. ⚡ **Optimizer Checklist**: Actionable best-practice tips for Hermes engine, selective path imports (tree-shaking), font subsetting, and screen lazy-loading.
 
-The Redux tab shows the latest state tree, recent dispatches, payloads, and changed top-level state slices. Action history is capped at 50 entries.
+---
+
+## ⚙️ Settings Persistence
+
+Inspector preferences (dark mode, active modules, default landing tab) persist across app launches:
+- **iOS**: Uses React Native's built-in `Settings` module (`NSUserDefaults`) with zero extra configuration.
+- **Android / Custom Storage**: Pass `@react-native-async-storage/async-storage` or `react-native-mmkv` to the `storage` prop:
+
+```tsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+<NetworkInspector storage={AsyncStorage} />
+```
 
 ---
 
-## Error Boundary
+## 🛡️ Error Boundary
+
+Catch and inspect unhandled React component render crashes:
 
 ```tsx
 import {ErrorBoundary} from 'react-native-inapp-inspector';
 
 <ErrorBoundary>
-  <YourComponent />
-</ErrorBoundary>;
+  <YourApp />
+</ErrorBoundary>
 ```
 
 ---
 
-## Public API
-
-| Export                                              | Type              | Description                                                                |
-| --------------------------------------------------- | ----------------- | -------------------------------------------------------------------------- |
-| `NetworkInspector`                                  | default component | Floating inspector overlay. Mount once near the root of the app.           |
-| `setupNetworkLogger()`                              | function          | Patches `fetch`, default axios, and future `axios.create()` instances.     |
-| `addAxiosInterceptors(instance)`                    | function          | Manually attaches axios interceptors to an existing instance.              |
-| `clearNetworkLogs()`                                | function          | Clears captured network logs.                                              |
-| `subscribeNetworkLogs(callback)`                    | function          | Subscribes to network log updates and returns an unsubscribe function.     |
-| `setupConsoleLogger()`                              | function          | Patches console methods.                                                   |
-| `clearConsoleLogs()`                                | function          | Clears captured console logs.                                              |
-| `subscribeConsoleLogs(callback)`                    | function          | Subscribes to console log updates and returns an unsubscribe function.     |
-| `setupAnalyticsLogger(instance)`                    | function          | Patches a Firebase Analytics instance.                                     |
-| `logAnalyticsEvent(name, params?, userProperties?)` | function          | Adds a manual analytics event to the inspector.                            |
-| `clearAnalyticsEvents()`                            | function          | Clears captured analytics events.                                          |
-| `subscribeAnalyticsEvents(callback)`                | function          | Subscribes to analytics event updates and returns an unsubscribe function. |
-| `connectReduxStore(store)`                          | function          | Connects a Redux store for live state and action inspection.               |
-| `inspectorReduxMiddleware`                          | middleware        | Redux middleware to capture actions dispatched from thunks/sagas.          |
-| `getReduxState()`                                   | function          | Returns the latest captured Redux state.                                   |
-| `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.                                           |
-| `ErrorBoundary`                                     | component         | React error boundary component.                                            |
+## 📚 Public API Reference
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `NetworkInspector` | Component | Floating inspector overlay. Mount near app root. |
+| `setupNetworkLogger()` | Function | Patches `fetch`, default Axios, and future `axios.create()` instances. |
+| `addAxiosInterceptors(instance)` | Function | Manually attaches Axios interceptors to an existing instance. |
+| `clearNetworkLogs()` | Function | Clears captured network requests. |
+| `subscribeNetworkLogs(cb)` | Function | Subscribes to network log updates. |
+| `setupConsoleLogger()` | Function | Intercepts `console.log`, `info`, `warn`, and `error`. |
+| `clearConsoleLogs()` | Function | Clears captured console logs. |
+| `subscribeConsoleLogs(cb)` | Function | Subscribes to console log updates. |
+| `connectReduxStore(store)` | Function | Connects a Redux store for state and action inspection. |
+| `inspectorReduxMiddleware` | Middleware | Redux middleware for capturing thunks, sagas, and RTK Query actions. |
+| `getReduxState()` | Function | Returns the current captured Redux state snapshot. |
+| `subscribeReduxState(cb)` | Function | Subscribes to Redux state changes. |
+| `getActionHistory()` | Function | Returns the history of dispatched Redux actions. |
+| `clearActionHistory()` | Function | Clears Redux action history. |
+| `setupAnalyticsLogger(instance)` | Function | Patches a Firebase Analytics instance. |
+| `logAnalyticsEvent(name, params?, userProps?)` | Function | Logs a manual analytics event. |
+| `clearAnalyticsEvents()` | Function | Clears captured analytics events. |
+| `subscribeAnalyticsEvents(cb)` | Function | Subscribes to analytics event updates. |
+| `ErrorBoundary` | Component | React error boundary component. |
 
 ---
 
-## Example App
+## 📱 Example App
 
-The `example` directory contains a React Native sample app and video walkthrough.
+Check out the `example` directory for a complete demo application:
 
 ```bash
 cd example
@@ -304,17 +326,15 @@ npm run ios
 
 ---
 
-## Contributing 🤝
+## 🤝 Contributing
 
-Contributions are welcome! Please check out our [Contributing Guidelines](CONTRIBUTING.md) to learn how to get started, set up the development environment, or request features.
+Contributions are welcome! Please check out our [Contributing Guidelines](CONTRIBUTING.md) to get started.
 
 ---
 
-## Support & Sponsoring 💖
-
-This library is a completely free, open-source utility maintained in the author's spare time. If this tool has saved you or your team hours of debugging, please consider supporting its continuous development.
+## 💖 Support & Sponsoring
 
-Sponsoring helps prioritize your bug fixes, maintain compatibility with new React Native versions, and support new features.
+This library is a free, open-source utility maintained in spare time. If it saved you or your team time debugging, please consider supporting its continuous development.
 
 👉 **[Sponsor @vengatmacuser on GitHub Sponsors](https://github.com/sponsors/vengatmacuser)**
 
@@ -322,6 +342,6 @@ Sponsoring helps prioritize your bug fixes, maintain compatibility with new Reac
 
 ---
 
-## License
+## 📄 License
 
-MIT - see the [LICENSE](LICENSE) file for details.
+MIT © [vengatmacuser](LICENSE)

package/dist/commonjs/components/AnimatedEntrance.js

@@ -36,6 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
+    if (react_native_1.Platform.OS === 'android') {
+        return <react_native_1.View style={style}>{children}</react_native_1.View>;
+    }
     const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         progress.setValue(0);

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+interface AppHeaderLogoProps {
+    size?: number;
+    customIcon?: ImageSourcePropType | null;
+}
+export declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
+export default AppHeaderLogo;

package/dist/commonjs/components/AppHeaderLogo.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppHeaderLogo = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const BrandSquareIcon_1 = __importDefault(require("./BrandSquareIcon"));
+const AppColors_1 = require("../styles/AppColors");
+const AppHeaderLogo = ({ size = 46, customIcon, }) => {
+    const [loadError, setLoadError] = (0, react_1.useState)(false);
+    // 1. If customIcon is explicitly provided, render it directly
+    if (customIcon) {
+        return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
+        <react_native_1.Image source={customIcon} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover"/>
+      </react_native_1.View>);
+    }
+    // 2. Dynamically query installed native app icon (AppIcon on iOS, ic_launcher on Android)
+    if (!loadError && react_native_1.Platform.OS !== 'web') {
+        const nativeSource = react_native_1.Platform.select({
+            ios: { uri: 'AppIcon' },
+            android: { uri: 'ic_launcher' },
+            default: { uri: 'AppIcon' },
+        });
+        return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
+        <react_native_1.Image source={nativeSource} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover" onError={() => setLoadError(true)}/>
+      </react_native_1.View>);
+    }
+    // 3. Fallback: Inspector's Signature Owl Brand Logo
+    return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
+      <BrandSquareIcon_1.default size={size - 4}/>
+    </react_native_1.View>);
+};
+exports.AppHeaderLogo = AppHeaderLogo;
+const logoStyles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        backgroundColor: `${AppColors_1.AppColors.white}24`,
+        borderWidth: 1.5,
+        borderColor: `${AppColors_1.AppColors.white}4D`,
+        overflow: 'hidden',
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+});
+exports.default = exports.AppHeaderLogo;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CopyButtonProps } from '../types';
-declare const CopyButton: ({ value, label, iconType }: CopyButtonProps) => React.JSX.Element;
+declare const CopyButton: React.MemoExoticComponent<({ value, label, iconType }: CopyButtonProps) => React.JSX.Element>;
 export default CopyButton;

package/dist/commonjs/components/CopyButton.js

@@ -46,14 +46,14 @@ const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const CopyButton = ({ value, label, iconType = 'copy' }) => {
+const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
-    const handlePress = () => {
+    const handlePress = (0, react_1.useCallback)(() => {
         const resolvedValue = typeof value === 'function' ? value() : value;
         (0, helpers_1.copyToClipboard)(resolvedValue, label);
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
-    };
+    }, [value, label]);
     const containerStyle = [
         styles_1.default.iconSquareBtn,
         copied && styles_1.default.iconSquareBtnSuccess,
@@ -66,5 +66,5 @@ const CopyButton = ({ value, label, iconType = 'copy' }) => {
     return (<TouchableScale_1.default onPress={handlePress} hitSlop={12} style={containerStyle}>
       {copied ? (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors_1.AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale_1.default>);
-};
+});
 exports.default = CopyButton;

package/dist/commonjs/components/EndOfListFooter.js

@@ -9,7 +9,7 @@ const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const NetworkIcons_1 = require("./NetworkIcons");
-const EndOfListFooter = ({ count, label, message = "You've reached the end of the list", }) => {
+exports.EndOfListFooter = react_1.default.memo(({ count, label, message = "You've reached the end of the list", }) => {
     return (<react_native_1.View style={styles.container}>
       <react_native_1.View style={styles.dividerLine}/>
       <react_native_1.View style={styles.badgePill}>
@@ -25,8 +25,7 @@ const EndOfListFooter = ({ count, label, message = "You've reached the end of th
       </react_native_1.View>
       <react_native_1.View style={styles.dividerLine}/>
     </react_native_1.View>);
-};
-exports.EndOfListFooter = EndOfListFooter;
+});
 const styles = react_native_1.StyleSheet.create({
     container: {
         flexDirection: 'row',

package/dist/commonjs/components/Inspector/AnalyticsTab.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const AnalyticsTab: () => React.JSX.Element;
+declare const AnalyticsTab: React.MemoExoticComponent<() => React.JSX.Element>;
 export default AnalyticsTab;