react-native-inapp-inspector 1.0.14 → 1.0.16

package/README.md

@@ -8,66 +8,75 @@
   </picture>
 </p>
 
-A premium, self-contained, and interactive in-app debugger for React Native applications. Inspect network requests, console logs, analytics events, and WebView states directly from your device.
+<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://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>
+</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.
+
+---
 
 ## Features
 
-- **🌐 Network Inspector**: Intercept and view HTTP requests and responses, track latency, export as cURL or Fetch, search logs, and view differences between subsequent requests.
-- **💻 Console Logger**: In-app terminal displaying your `console.log`, `console.warn`, and `console.error` logs with customizable filters.
-- **📊 Analytics Event Tracker**: Real-time logging and analytics debugging (e.g. Firebase Analytics, GA events).
-- **🕸️ WebView Inspector**: Live tracking of navigation history, console logs, and inspection of HTML, CSS, and JS inside your `WebView` components.
-- **📈 Embedded Visualizations**: Built-in mini charts visualizing metrics like latency, payload size, and errors over time.
-- **🎨 Modern Dark UI**: Sleek, glassmorphism-inspired dark design with smooth micro-animations.
+| 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. |
 
 ---
 
 ## Video Walkthrough
 
-Watch the library in action, demonstrating network inspection, Redux state tree analysis, WebView debugging, and console logging:
-
-[🎬 Download or watch the Video Walkthrough](https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/example/guidance/Video-WalkThrough.mp4)
+[Download or watch the Video Walkthrough](https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/example/guidance/Video-WalkThrough.mp4)
 
 ---
 
 ## Installation
 
-Install the package as a development dependency in your React Native project:
+```bash
+npm install --save-dev react-native-inapp-inspector axios
+```
 
 ```bash
-npm install --save-dev react-native-inapp-inspector
-# OR
-yarn add -D react-native-inapp-inspector
+yarn add -D react-native-inapp-inspector axios
 ```
 
-The package will automatically install its dependencies (`@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`).
+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:
 
-For iOS projects, don't forget to run pod install:
 ```bash
-cd ios && pod install
+npm install react-native-webview @react-native-firebase/analytics
 ```
 
-### Dependency Isolation
+For iOS, install pods after adding native dependencies:
 
-This package is designed to operate in strict isolation. If the host application already uses `@react-navigation/native`, `react-native-linear-gradient`, or `react-native-svg`, the package's dependencies will not conflict with the application's runtime. The bundler (Metro/Webpack) and autolink systems automatically resolve duplicate native module links without affecting your main application environment.
+```bash
+cd ios && pod install
+```
 
 ---
 
-## Integration
+## Basic Setup
 
-### 1. Embed the Inspector Component
-Place the `<NetworkInspector />` component at the root level of your application (usually in `App.tsx` or your root navigation container):
+Mount the inspector once near the root of your app.
 
 ```tsx
 import React from 'react';
-import { SafeAreaView } from 'react-native';
+import {SafeAreaView} from 'react-native';
 import NetworkInspector from 'react-native-inapp-inspector';
 
 const App = () => {
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-      {/* Your application components */}
-      
-      {/* Floating Inspector overlay */}
+    <SafeAreaView style={{flex: 1}}>
+      {/* Your app */}
       <NetworkInspector />
     </SafeAreaView>
   );
@@ -76,38 +85,188 @@ const App = () => {
 export default App;
 ```
 
-### 2. Auto-Intercept Network Requests (Axios / Fetch)
-The library automatically intercepts standard `fetch` and `XMLHttpRequest` requests when loaded. If you are using `axios`, you can register it to intercept requests:
+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.
+
+If you need to capture requests that happen before the component mounts, call `setupNetworkLogger()` at module level in your app entry file.
+
+```tsx
+import NetworkInspector, {setupNetworkLogger} from 'react-native-inapp-inspector';
+
+setupNetworkLogger();
+```
+
+You can disable the overlay without removing it from your tree:
+
+```tsx
+<NetworkInspector enabled={false} />
+```
+
+---
 
-```typescript
+## Network Logging
+
+`setupNetworkLogger()` patches global `fetch`, the default axios instance, and future axios instances created with `axios.create()`.
+
+```tsx
 import axios from 'axios';
-import { addAxiosInterceptors } from 'react-native-inapp-inspector';
+import {setupNetworkLogger} from 'react-native-inapp-inspector';
 
-const api = axios.create({
-  baseURL: 'https://api.example.com',
-});
+setupNetworkLogger();
+
+const api = axios.create({baseURL: 'https://api.example.com'});
+
+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:
+
+```tsx
+import {addAxiosInterceptors} from 'react-native-inapp-inspector';
 
-// Register the interceptor
 addAxiosInterceptors(api);
 ```
 
-### 3. Log Analytics Events
-Subscribe to and log custom analytics events:
+Network logs are capped at 100 entries and ignore React Native symbolication requests.
+
+---
 
-```typescript
-import { subscribeAnalyticsEvents } from 'react-native-inapp-inspector';
+## Console Logging
 
-// Log your custom events
-subscribeAnalyticsEvents((events) => {
-  // Access and analyze logged events
+The inspector captures console output automatically when mounted. You can also set it up manually:
+
+```tsx
+import {setupConsoleLogger} from 'react-native-inapp-inspector';
+
+setupConsoleLogger();
+```
+
+Captured levels are `log`, `info`, `warn`, and `error`.
+
+---
+
+## Analytics Logging
+
+Manual events can be pushed into the Analytics tab:
+
+```tsx
+import {logAnalyticsEvent} from 'react-native-inapp-inspector';
+
+logAnalyticsEvent('purchase_completed', {
+  item_id: 'SKU-42',
+  value: 29.99,
+  currency: 'USD',
 });
 ```
 
+For Firebase Analytics, pass the result of `analytics()` to `setupAnalyticsLogger()` before analytics calls begin:
+
+```tsx
+import analytics from '@react-native-firebase/analytics';
+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
+
+Connect your Redux store once during app startup.
+
+```tsx
+import {connectReduxStore} from 'react-native-inapp-inspector';
+import store from './store';
+
+connectReduxStore(store);
+```
+
+The Redux tab shows the latest state tree, recent dispatches, payloads, and changed top-level state slices. Action history is capped at 50 entries.
+
+---
+
+## 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
+import {ErrorBoundary} from 'react-native-inapp-inspector';
+
+<ErrorBoundary>
+  <YourComponent />
+</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. |
+| `getReduxState()` | function | Returns the latest captured Redux state. |
+| `subscribeReduxState(callback)` | function | Subscribes to Redux state updates and returns an unsubscribe function. |
+| `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. |
+
+---
+
+## Example App
+
+The `example` directory contains a React Native sample app and video walkthrough.
+
+```bash
+cd example
+npm install
+cd ios && pod install && cd ..
+npm run ios
+```
+
 ---
 
 ## Support
 
-If you find this project useful, consider sponsoring its development on GitHub Sponsors:
+If you find this project useful, consider sponsoring its development:
 
 [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-@vengatmacuser-ea4aaa?logo=githubsponsors&logoColor=white)](https://github.com/sponsors/vengatmacuser)
 
@@ -115,4 +274,4 @@ If you find this project useful, consider sponsoring its development on GitHub S
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+MIT - see the [LICENSE](LICENSE) file for details.

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface AnimatedEntranceProps {
+    children: React.ReactNode;
+    delay?: number;
+    distance?: number;
+    duration?: number;
+    index?: number;
+    style?: ViewStyle | ViewStyle[];
+}
+declare const AnimatedEntrance: ({ children, delay, distance, duration, index, style, }: AnimatedEntranceProps) => React.JSX.Element;
+export default AnimatedEntrance;

package/dist/commonjs/components/AnimatedEntrance.js

@@ -0,0 +1,72 @@
+"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;
+    };
+})();
+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 progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        progress.setValue(0);
+        react_native_1.Animated.timing(progress, {
+            toValue: 1,
+            duration,
+            delay: delay + Math.min(index, 12) * 18,
+            useNativeDriver: true,
+        }).start();
+    }, [delay, duration, index, progress]);
+    return (<react_native_1.Animated.View style={[
+            style,
+            {
+                opacity: progress,
+                transform: [
+                    {
+                        translateY: progress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [distance, 0],
+                        }),
+                    },
+                    {
+                        scale: progress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0.985, 1],
+                        }),
+                    },
+                ],
+            },
+        ]}>
+      {children}
+    </react_native_1.Animated.View>);
+};
+exports.default = AnimatedEntrance;

package/dist/commonjs/components/ConsoleLogCard.js

@@ -109,7 +109,10 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const remainingText = message.substring(fullPrefix.length);
         const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
         const getTagColor = (tag) => {
-            const cleanTag = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            const cleanTag = tag
+                .replace(/[\[\]]/g, '')
+                .trim()
+                .toUpperCase();
             if (cleanTag === 'API')
                 return '#0284C7';
             if (cleanTag === 'TEST')
@@ -126,7 +129,14 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
             for (let i = 0; i < cleanTag.length; i++) {
                 hash = cleanTag.charCodeAt(i) + ((hash << 5) - hash);
             }
-            const colors = ['#0891B2', '#0D9488', '#2563EB', '#D97706', '#E11D48', '#8B5CF6'];
+            const colors = [
+                '#0891B2',
+                '#0D9488',
+                '#2563EB',
+                '#D97706',
+                '#E11D48',
+                '#8B5CF6',
+            ];
             return colors[Math.abs(hash) % colors.length];
         };
         return (<react_native_1.Text style={textStyle} numberOfLines={numberOfLines}>
@@ -147,6 +157,7 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
 };
 exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
     const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const jsonContent = getJsonContent(item.message);
     const isAnalyticsError = item.message
         .toLowerCase()
@@ -230,6 +241,26 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         }
     };
     const colors = getLogColors();
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'android') {
+            react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(chevronAnim, {
+            toValue: expanded ? 1 : 0,
+            duration: 180,
+            useNativeDriver: true,
+        }).start();
+    }, [chevronAnim, expanded]);
+    const toggleExpanded = () => {
+        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        setExpanded(prev => !prev);
+    };
+    const chevronRotate = chevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg'],
+    });
     // Show limited lines unless expanded
     const numLines = expanded ? undefined : 5;
     const hasLongMessage = jsonContent
@@ -250,10 +281,8 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 paddingRight: 4,
             },
         ]}>
-        
         {/* Left Content Area */}
-        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{ flex: 1, paddingRight: 6 }}>
-          
+        <react_native_1.Pressable onPress={toggleExpanded} style={{ flex: 1, paddingRight: 6 }}>
           <react_native_1.View style={styles.cardHeader}>
             <react_native_1.View style={styles.headerLeft}>
               <CopyButton_1.default value={item.message} label="Log message"/>
@@ -271,7 +300,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             },
         ]}>
                 <react_native_1.Text style={[styles.badgeText, { color: '#6B4EFF' }]}>
-                  console.{('sourceMethod' in item ? item.sourceMethod : undefined) || item.type || 'log'}
+                  console.
+                  {('sourceMethod' in item ? item.sourceMethod : undefined) ||
+            item.type ||
+            'log'}
                 </react_native_1.Text>
               </react_native_1.View>
               {jsonContent && (<react_native_1.View style={[
@@ -283,7 +315,9 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 },
             ]}>
                   <react_native_1.Text style={[styles.badgeText, { color: '#0D9488' }]}>
-                    {Array.isArray(jsonContent.data) ? `Array[${jsonContent.data.length}]` : `Object{${Object.keys(jsonContent.data).length}}`}
+                    {Array.isArray(jsonContent.data)
+                ? `Array[${jsonContent.data.length}]`
+                : `Object{${Object.keys(jsonContent.data).length}}`}
                   </react_native_1.Text>
                 </react_native_1.View>)}
               {isAnalyticsError && (<react_native_1.View style={[
@@ -302,7 +336,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     borderWidth: 1,
                 },
             ]}>
-                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayTextStrong }]}>
+                  <react_native_1.Text style={[
+                styles.badgeText,
+                { color: AppColors_1.AppColors.grayTextStrong },
+            ]}>
                     user-log
                   </react_native_1.Text>
                 </react_native_1.View>)}
@@ -318,43 +355,92 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     webview
                   </react_native_1.Text>
                 </react_native_1.View>)}
-              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>#{item.id + 1}</react_native_1.Text>
-              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>{formatTime(item.timestamp)}</react_native_1.Text>
+              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>
+                #{item.id + 1}
+              </react_native_1.Text>
+              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
+                {formatTime(item.timestamp)}
+              </react_native_1.Text>
             </react_native_1.View>
-            
-            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[styles.callerText, { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 }]} numberOfLines={1} ellipsizeMode="middle">
+
+            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[
+                styles.callerText,
+                { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 },
+            ]} numberOfLines={1} ellipsizeMode="middle">
                 {caller.split('/').pop() || caller}
               </react_native_1.Text>)}
           </react_native_1.View>
 
-          <react_native_1.View style={[styles.cardBody, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.dividerColor }]}>
+          <react_native_1.View style={[
+            styles.cardBody,
+            {
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            },
+        ]}>
             {jsonContent ? (<>
-                {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+                {jsonContent.header ? (<react_native_1.Pressable onPress={toggleExpanded}>
                     {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
                   </react_native_1.Pressable>) : null}
-                {expanded ? (<react_native_1.View style={[styles.jsonContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
+                {expanded ? (<react_native_1.View style={[
+                    styles.jsonContainer,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                    },
+                ]}>
                     <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                  </react_native_1.View>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={[styles.jsonPreviewContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
-                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[styles.jsonPreviewText, { color: AppColors_1.AppColors.primaryBlack }]} highlightStyle={styles.highlight} detectLinks={true}/>
+                  </react_native_1.View>) : (<react_native_1.Pressable onPress={toggleExpanded} style={[
+                    styles.jsonPreviewContainer,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                    },
+                ]}>
+                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[
+                    styles.jsonPreviewText,
+                    { color: AppColors_1.AppColors.primaryBlack },
+                ]} highlightStyle={styles.highlight} detectLinks={true}/>
                   </react_native_1.Pressable>)}
-              </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+              </>) : (<react_native_1.Pressable onPress={toggleExpanded}>
                 {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
               </react_native_1.Pressable>)}
-            {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+            {hasLongMessage && (<react_native_1.Pressable onPress={toggleExpanded} style={styles.seeMoreBtn} hitSlop={8}>
                 <react_native_1.Text style={styles.seeMoreText}>
                   {expanded ? 'See Less' : 'See More'}
                 </react_native_1.Text>
               </react_native_1.Pressable>)}
           </react_native_1.View>
 
-          {expanded && (<react_native_1.View style={[styles.cardFooter, { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 }]}>
-              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10.5, color: AppColors_1.AppColors.grayTextWeak }}>
-                  Length: {item.message.length} chars • Size: {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length} bytes
+          {expanded && (<react_native_1.View style={[
+                styles.cardFooter,
+                { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 },
+            ]}>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.grayTextWeak,
+            }}>
+                  Length: {item.message.length} chars • Size:{' '}
+                  {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length}{' '}
+                  bytes
                 </react_native_1.Text>
               </react_native_1.View>
-              {caller && caller !== 'Unknown' && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
-                  <react_native_1.Text style={[styles.fullCallerText, { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 }]} numberOfLines={2}>
+              {caller && caller !== 'Unknown' && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginTop: 4,
+                }}>
+                  <react_native_1.Text style={[
+                    styles.fullCallerText,
+                    { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 },
+                ]} numberOfLines={2}>
                     Caller: {caller}
                   </react_native_1.Text>
                   <CopyButton_1.default value={caller} label="Caller stack frame"/>
@@ -363,7 +449,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         </react_native_1.Pressable>
 
         {/* Right Isolated Chevron Area */}
-        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{
+        <react_native_1.Pressable onPress={toggleExpanded} style={{
             width: 28,
             alignItems: 'center',
             justifyContent: 'center',
@@ -371,11 +457,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             marginTop: expanded ? 8 : 0,
             height: expanded ? 32 : undefined,
         }} hitSlop={12}>
-          <react_native_1.View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+          <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
             <NetworkIcons_1.ChevronIcon size={16} color={AppColors_1.AppColors.grayTextWeak}/>
-          </react_native_1.View>
+          </react_native_1.Animated.View>
         </react_native_1.Pressable>
-
       </react_native_1.View>
     </react_native_1.View>);
 });