react-native-inapp-inspector 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vengateswaran Balakrishnan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# React Native In-App Inspector
+
+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.
+
+![React Native In-App Inspector](https://img.shields.io/badge/React_Native-In--App_Inspector-blue?style=for-the-badge&logo=react)
+
+## 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.
+
+---
+
+## Installation
+
+Install the package and its peer dependencies in your React Native project:
+
+```bash
+npm install react-native-inapp-inspector
+# OR
+yarn add react-native-inapp-inspector
+```
+
+### Peer Dependencies
+Make sure you have the following peer dependencies installed in your project:
+
+```bash
+npm install react-native-svg react-native-linear-gradient @react-navigation/native
+```
+
+For iOS projects, don't forget to run pod install:
+```bash
+cd ios && pod install
+```
+
+---
+
+## Integration
+
+### 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):
+
+```tsx
+import React from 'react';
+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 */}
+      <NetworkInspector />
+    </SafeAreaView>
+  );
+};
+
+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:
+
+```typescript
+import axios from 'axios';
+import { addAxiosInterceptors } from 'react-native-inapp-inspector';
+
+const api = axios.create({
+  baseURL: 'https://api.example.com',
+});
+
+// Register the interceptor
+addAxiosInterceptors(api);
+```
+
+### 3. Log Analytics Events
+Subscribe to and log custom analytics events:
+
+```typescript
+import { subscribeAnalyticsEvents } from 'react-native-inapp-inspector';
+
+// Log your custom events
+subscribeAnalyticsEvents((events) => {
+  // Access and analyze logged events
+});
+```
+
+---
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+declare const AnalyticsDetail: ({ event, }: {
+    event: AnalyticsEvent;
+}) => React.JSX.Element;
+export default AnalyticsDetail;

package/dist/commonjs/components/AnalyticsDetail.js

@@ -0,0 +1,558 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+// Components
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const JsonViewer_1 = __importDefault(require("./JsonViewer"));
+// Icons
+const NetworkIcons_1 = require("./NetworkIcons");
+// Utils
+const AppFonts_1 = require("../styles/AppFonts");
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+const styles_1 = __importDefault(require("../styles"));
+const AnalyticsEventCard_1 = require("./AnalyticsEventCard");
+// Helpers
+const helpers_1 = require("../helpers");
+// Sub Components
+const ParamRowItem = ({ paramKey, value, }) => {
+    const isObject = typeof value === 'object' && value !== null;
+    const valStr = isObject ? JSON.stringify(value, null, 2) : String(value);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const isLong = valStr.length > 80 || valStr.includes('\n') || isObject;
+    return (<react_native_1.View style={detailStyles.dataBox}>
+      <react_native_1.View style={detailStyles.dataBoxHeader}>
+        <react_native_1.Text style={detailStyles.dataBoxKey} numberOfLines={1}>
+          {paramKey}
+        </react_native_1.Text>
+        <CopyButton_1.default value={valStr} label={paramKey}/>
+      </react_native_1.View>
+      {expanded && isObject ? (<react_native_1.View style={detailStyles.jsonBlock}>
+          <JsonViewer_1.default data={value}/>
+        </react_native_1.View>) : (<react_native_1.Text style={detailStyles.dataBoxVal} selectable numberOfLines={expanded ? undefined : 2}>
+          {valStr}
+        </react_native_1.Text>)}
+      {isLong && (<react_native_1.Pressable onPress={() => setExpanded(!expanded)} style={detailStyles.showMoreBtn}>
+          <react_native_1.Text style={detailStyles.showMoreText}>
+            {expanded ? 'Show Less' : 'Show More'}
+          </react_native_1.Text>
+        </react_native_1.Pressable>)}
+    </react_native_1.View>);
+};
+const ParamTable = ({ data, emptyLabel, }) => {
+    const entries = Object.keys(data).map(key => ({
+        key,
+        value: data[key],
+    }));
+    if (entries.length === 0) {
+        return (<react_native_1.View style={detailStyles.emptyParams}>
+        <react_native_1.Text style={detailStyles.emptyParamsText}>
+          {emptyLabel ?? 'No parameters'}
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    return (<react_native_1.View style={detailStyles.paramList}>
+      {entries.map(({ key, value }) => (<ParamRowItem key={key} paramKey={key} value={value}/>))}
+    </react_native_1.View>);
+};
+const SectionCard = ({ title, children, count, accentColor = AppColors_1.AppColors.purple, }) => {
+    if (!title) {
+        return (<react_native_1.View style={{ paddingHorizontal: 16, paddingTop: 12, paddingBottom: 20 }}>
+        {children}
+      </react_native_1.View>);
+    }
+    return (<react_native_1.View style={detailStyles.sectionCard}>
+      <react_native_1.View style={detailStyles.sectionHeader}>
+        <react_native_1.View style={detailStyles.sectionTitleRow}>
+          <react_native_1.View style={[
+            detailStyles.sectionAccentDot,
+            { backgroundColor: accentColor },
+        ]}/>
+          <react_native_1.Text style={detailStyles.sectionTitle}>{title.toUpperCase()}</react_native_1.Text>
+        </react_native_1.View>
+        {typeof count === 'number' && (<react_native_1.View style={[
+                detailStyles.countBadge,
+                {
+                    borderColor: `${accentColor}55`,
+                    backgroundColor: `${accentColor}12`,
+                },
+            ]}>
+            <react_native_1.Text style={[detailStyles.countBadgeText, { color: accentColor }]}>
+              {count}
+            </react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.View>
+      <react_native_1.View style={{ paddingHorizontal: 14, paddingBottom: 14 }}>{children}</react_native_1.View>
+    </react_native_1.View>);
+};
+const AnalyticsDetail = ({ event, }) => {
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [activeTab, setActiveTab] = (0, react_1.useState)('unformatted');
+    const SOURCE_COLORS = {
+        firebase: '#E07B1A',
+        manual: AppColors_1.AppColors.purple,
+    };
+    const params = event.params ?? {};
+    const userProperties = event.userProperties ?? {};
+    const eventColor = (0, AnalyticsEventCard_1.getEventColor)(event.name);
+    const sourceColor = SOURCE_COLORS[event.source] ?? AppColors_1.AppColors.purple;
+    const paramCount = Object.keys(params).length;
+    const upCount = Object.keys(userProperties).length;
+    const topMetrics = [];
+    if (event.screenName) {
+        topMetrics.push({
+            key: 'Screen',
+            value: event.screenName,
+            color: AppColors_1.AppColors.skyBlue,
+        });
+    }
+    if (event.userId) {
+        topMetrics.push({
+            key: 'User ID',
+            value: event.userId,
+            color: AppColors_1.AppColors.greenColor,
+        });
+    }
+    if (event.pageTitle) {
+        topMetrics.push({
+            key: 'Page',
+            value: event.pageTitle,
+            color: AppColors_1.AppColors.purple,
+        });
+    }
+    if (params?.primary_category) {
+        topMetrics.push({
+            key: 'Category',
+            value: String(params.primary_category),
+            color: AppColors_1.AppColors.purple,
+        });
+    }
+    if (params?.flow) {
+        topMetrics.push({
+            key: 'Flow',
+            value: String(params.flow),
+            color: AppColors_1.AppColors.greenColor,
+        });
+    }
+    if (params?.market_language) {
+        topMetrics.push({
+            key: 'Language',
+            value: String(params.market_language),
+            color: '#F59E0B',
+        }); // Amber
+    }
+    if (params?.tripType) {
+        topMetrics.push({
+            key: 'Trip Type',
+            value: String(params.tripType),
+            color: '#3B82F6',
+        }); // Blue
+    }
+    if (userProperties?.platform_type) {
+        topMetrics.push({
+            key: 'Platform',
+            value: String(userProperties.platform_type),
+            color: AppColors_1.AppColors.skyBlue,
+        });
+    }
+    if (userProperties?.login_status) {
+        topMetrics.push({
+            key: 'Login Status',
+            value: String(userProperties.login_status),
+            color: '#64748B',
+        });
+    }
+    topMetrics.unshift({
+        key: 'Source',
+        value: event.source,
+        color: sourceColor,
+    });
+    return (<react_native_1.ScrollView style={detailStyles.scroll} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
+      <react_native_linear_gradient_1.default colors={[
+            `${eventColor}18`,
+            `${eventColor}06`,
+            AppColors_1.AppColors.grayBackground,
+        ]} style={detailStyles.hero}>
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            width: '100%',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            paddingHorizontal: 16,
+            paddingTop: 14,
+            marginBottom: 8,
+        }}>
+          <react_native_1.View style={{ flex: 1, paddingRight: 10 }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 18,
+            color: AppColors_1.AppColors.primaryBlack,
+            marginBottom: 4,
+        }} numberOfLines={2}>
+              {event.name}
+            </react_native_1.Text>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <react_native_1.View style={{
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: sourceColor,
+        }}/>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 12,
+            color: AppColors_1.AppColors.grayTextStrong,
+        }}>
+                {(0, helpers_1.formatDateTimeToAnalytics)(event.timestamp)}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <CopyButton_1.default value={JSON.stringify({ name: event.name, params: params }, null, 2)} label="Copy JSON"/>
+        </react_native_1.View>
+
+        {topMetrics.length > 0 && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={detailStyles.metricsScroll} contentContainerStyle={detailStyles.metricsGrid}>
+            {topMetrics.map((item, idx) => (<react_native_1.View key={idx} style={[
+                    detailStyles.metricCard,
+                    { borderLeftColor: item.color },
+                ]}>
+                <react_native_1.Text style={detailStyles.metricLabel}>{item.key}</react_native_1.Text>
+                <react_native_1.Text style={[detailStyles.metricValue, { color: item.color }]} numberOfLines={1}>
+                  {item.value}
+                </react_native_1.Text>
+              </react_native_1.View>))}
+          </react_native_1.ScrollView>)}
+      </react_native_linear_gradient_1.default>
+
+      <react_native_1.View style={detailStyles.tabRow}>
+        <react_native_1.Pressable style={[
+            detailStyles.tabButton,
+            activeTab === 'unformatted' && detailStyles.tabActive,
+        ]} onPress={() => setActiveTab('unformatted')}>
+          <react_native_1.Text style={[
+            detailStyles.tabText,
+            activeTab === 'unformatted' && detailStyles.tabTextActive,
+        ]}>
+            JSON Viewer
+          </react_native_1.Text>
+        </react_native_1.Pressable>
+        <react_native_1.Pressable style={[
+            detailStyles.tabButton,
+            activeTab === 'formatted' && detailStyles.tabActive,
+        ]} onPress={() => setActiveTab('formatted')}>
+          <react_native_1.Text style={[
+            detailStyles.tabText,
+            activeTab === 'formatted' && detailStyles.tabTextActive,
+        ]}>
+            Tabular View
+          </react_native_1.Text>
+        </react_native_1.Pressable>
+      </react_native_1.View>
+
+      {activeTab === 'unformatted' && (<react_native_1.View style={detailStyles.searchRow}>
+          <react_native_1.View style={styles_1.default.detailSearchBox}>
+            <react_native_1.TextInput placeholder="Search JSON data..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+            {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {activeTab === 'formatted' && (<react_native_1.View style={{ gap: 10 }}>
+          {paramCount > 0 && (<SectionCard title="Event Parameters" count={paramCount} accentColor={eventColor}>
+              <ParamTable data={params} emptyLabel="No parameters"/>
+            </SectionCard>)}
+
+          {upCount > 0 && (<SectionCard title="User Properties" count={upCount} accentColor={AppColors_1.AppColors.greenColor}>
+              <ParamTable data={userProperties} emptyLabel="No user properties"/>
+            </SectionCard>)}
+        </react_native_1.View>)}
+
+      {activeTab === 'unformatted' && (<SectionCard accentColor={AppColors_1.AppColors.purple}>
+          <react_native_1.View style={[detailStyles.jsonBlock, { marginLeft: 0, marginTop: 0 }]}>
+            <JsonViewer_1.default data={{
+                name: event.name,
+                params: params,
+                ...(upCount > 0
+                    ? {
+                        userProperties: userProperties,
+                    }
+                    : {}),
+            }} search={search}/>
+          </react_native_1.View>
+        </SectionCard>)}
+
+      {/* Empty state */}
+      {paramCount === 0 && upCount === 0 && activeTab !== 'unformatted' && (<react_native_1.View style={detailStyles.emptyParams}>
+          <react_native_1.Text style={detailStyles.emptyParamsText}>
+            No parameters recorded for this event
+          </react_native_1.Text>
+        </react_native_1.View>)}
+    </react_native_1.ScrollView>);
+};
+const detailStyles = react_native_1.StyleSheet.create({
+    scroll: { flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground },
+    content: {
+        paddingTop: 0,
+        paddingBottom: 40,
+    },
+    hero: {
+        paddingTop: 0,
+        paddingBottom: 16,
+        paddingHorizontal: 0,
+        gap: 8,
+        marginTop: 0,
+        marginBottom: 0,
+        width: '100%',
+        alignSelf: 'stretch',
+    },
+    searchRow: {
+        paddingHorizontal: 16,
+        marginVertical: 6,
+    },
+    sectionCard: {
+        marginHorizontal: 0,
+        borderRadius: 12,
+        overflow: 'hidden',
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    sectionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+    },
+    sectionTitleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flex: 1,
+    },
+    sectionAccentDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+    sectionTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    sectionActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    countBadge: {
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderRadius: 8,
+        borderWidth: 1,
+    },
+    countBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+    },
+    paramList: {
+        gap: 8,
+    },
+    emptyParams: {
+        marginVertical: 12,
+        paddingVertical: 18,
+        paddingHorizontal: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyParamsText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 13,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textAlign: 'center',
+        lineHeight: 18,
+    },
+    dataBox: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        padding: 12,
+    },
+    dataBoxHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    dataBoxKey: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontWeight: 'bold',
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+        flex: 1,
+        paddingRight: 8,
+    },
+    dataBoxVal: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 18,
+    },
+    showMoreBtn: {
+        marginTop: 8,
+        alignSelf: 'flex-start',
+        backgroundColor: '#F3F4F6',
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    showMoreText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: '#4B5563', // matching previous UI color
+    },
+    jsonBlock: {
+        padding: 12,
+        borderWidth: 1,
+        borderColor: '#E0E7FF',
+        borderRadius: 8,
+        backgroundColor: '#EEF2FF',
+    },
+    metricsScroll: {
+        height: 92,
+        overflow: 'visible',
+    },
+    metricsGrid: {
+        gap: 8,
+        marginTop: 4,
+        paddingHorizontal: 16,
+        paddingBottom: 14,
+    },
+    metricCard: {
+        backgroundColor: '#FFFFFF',
+        paddingVertical: 8,
+        paddingHorizontal: 10,
+        borderRadius: 6,
+        borderLeftWidth: 3,
+        width: 130, // fixed width for horizontal scrolling
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+        alignItems: 'flex-start',
+    },
+    metricLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textTransform: 'uppercase',
+        marginBottom: 4,
+    },
+    metricValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+    },
+    tabRow: {
+        flexDirection: 'row',
+        marginHorizontal: 16,
+        marginTop: 6,
+        backgroundColor: '#E5E7EB',
+        borderRadius: 8,
+        padding: 4,
+    },
+    tabButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 8,
+        borderRadius: 6,
+        gap: 6,
+    },
+    tabActive: {
+        backgroundColor: '#FFFFFF',
+        shadowColor: '#000',
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 2,
+    },
+    tabText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 13,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    tabTextActive: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    tabBadge: {
+        backgroundColor: '#D1D5DB',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 10,
+    },
+    tabBadgeActive: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+    },
+    tabBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: '#6B7280',
+    },
+    tabBadgeTextActive: {
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+});
+exports.default = AnalyticsDetail;