react-native-inapp-inspector 1.1.14 → 1.1.16

package/dist/esm/types/enums.d.ts

@@ -0,0 +1,9 @@
+export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux';
+export type Method = 'ALL' | 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+export type StatusFilter = 'ALL' | '2xx' | '3xx' | '4xx' | '5xx' | 'Failed';
+export type SortOrder = 'newest' | 'oldest';
+export type LocalFilter = 'success' | 'failed' | 'loading';
+export type ModalAnimationType = 'slide' | 'fade' | 'none';
+export type SettingsPage = 'main' | 'apis' | 'logs' | 'analytics' | 'redux' | null;
+export type SettingsSubTab = 'module' | 'ui';
+export type LogFilter = 'all' | 'info' | 'warn' | 'error' | 'user-log' | 'analytics';

package/dist/esm/types/enums.js

@@ -0,0 +1,3 @@
+// ─── Enum-like union types ────────────────────────────────────────────────────
+// The codebase treats these as string enums (used for tab keys, filters, etc.).
+export {};

package/dist/esm/types/index.d.ts

@@ -1,54 +1,7 @@
-import React from 'react';
-export type ActiveTab = 'insights' | 'apis' | 'analytics' | 'logs' | 'webview' | 'redux';
-export interface ConsoleLog {
-    id: number;
-    type: 'info' | 'warn' | 'error';
-    message: string;
-    timestamp: number;
-    caller?: string;
-    sourceMethod?: 'log' | 'info' | 'warn' | 'error';
-    /** #9 — number of consecutive identical logs collapsed into this entry. */
-    duplicateCount?: number;
-}
-export interface AnalyticsEvent {
-    id: number;
-    name: string;
-    screenName: string;
-    screenClass: string;
-    userId: string;
-    params: Record<string, any>;
-    userProperties: Record<string, any>;
-    timestamp: number;
-    source: 'firebase' | 'manual';
-    raw?: string;
-    trackingId?: string;
-    clientId?: string;
-    sessionId?: string;
-    pageTitle?: string;
-    pageLocation?: string;
-}
-export interface NetworkLog {
-    id: number;
-    url: string;
-    method: string;
-    status: number | null;
-    duration: number | null;
-    startTime: number;
-    request?: unknown;
-    response?: unknown;
-    requestHeaders?: Record<string, string>;
-    responseHeaders?: Record<string, string>;
-    /** #9 — number of consecutive identical requests collapsed into this entry. */
-    duplicateCount?: number;
-}
-export interface RouteInfo {
-    path: string;
-    params: any;
-}
-export type Method = 'ALL' | 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-export type StatusFilter = 'ALL' | '2xx' | '3xx' | '4xx' | '5xx' | 'Failed';
-export type SortOrder = 'newest' | 'oldest';
-export type LocalFilter = 'success' | 'failed' | 'loading';
+import type { NetworkLog } from './interfaces';
+import type { LocalFilter } from './enums';
+export * from './interfaces';
+export * from './enums';
 export type GroupedListItem = {
     type: 'header';
     id: string;
@@ -76,63 +29,3 @@ export type DiffResult = {
     oldVal?: any;
     newVal?: any;
 };
-export interface CopyButtonProps {
-    value: unknown | (() => unknown);
-    label: string;
-    iconType?: 'copy' | 'terminal' | 'fetch';
-}
-export interface SectionHeaderProps {
-    title: string;
-    value: unknown;
-    expanded: boolean | undefined;
-    onToggleExpand: () => void;
-    showDiff?: boolean;
-    isDiffing?: boolean;
-    onToggleDiff?: () => void;
-    showSearch?: boolean;
-    isSearching?: boolean;
-    onToggleSearch?: () => void;
-}
-export interface TreeNodeProps {
-    data: unknown;
-    name?: string | number;
-    level?: number;
-    search?: string;
-    forceOpen?: boolean;
-    defaultExpandDepth?: number;
-}
-export interface LogCardProps {
-    item: NetworkLog;
-    onPress: () => void;
-    timelineMinStart: number;
-    timelineTotalRange: number;
-    isNew?: boolean;
-    isSelected: boolean;
-    onToggleSelect: (id: number) => void;
-    searchStr?: string;
-}
-export interface MetaAccordionProps {
-    status: number | null;
-    statusColor: string;
-    duration: number | null;
-    size: string;
-    triggeredAt: string;
-    method?: string;
-    contentType?: string;
-    url?: string;
-}
-export interface HeadersSectionProps {
-    title: string;
-    headers: Record<string, string> | undefined;
-    search?: string;
-    resetKey?: string | number;
-}
-export interface SourcePageCardProps {
-    routeInfo: RouteInfo;
-}
-export interface SectionCardProps {
-    title?: string;
-    count?: number;
-    accentColor?: string;
-    children?: React.ReactNode;
-}

package/dist/esm/types/index.js

@@ -1 +1,2 @@
-export {};
+export * from './interfaces';
+export * from './enums';

package/dist/esm/types/interfaces.d.ts

@@ -0,0 +1,337 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { Animated, PanResponderInstance } from 'react-native';
+import type { ActiveTab, GroupedListItem, LocalFilter, LogFilter, Method, SettingsPage, SettingsSubTab, SortOrder, StatusFilter } from './index';
+export interface ConsoleLog {
+    id: number;
+    type: 'info' | 'warn' | 'error';
+    message: string;
+    timestamp: number;
+    caller?: string;
+    stack?: string;
+    errorStack?: string;
+    rawArgs?: any[];
+    sourceMethod?: 'log' | 'info' | 'warn' | 'error';
+    /** #9 — number of consecutive identical logs collapsed into this entry. */
+    duplicateCount?: number;
+}
+export interface AnalyticsEvent {
+    id: number;
+    name: string;
+    screenName: string;
+    screenClass: string;
+    userId: string;
+    params: Record<string, any>;
+    userProperties: Record<string, any>;
+    timestamp: number;
+    source: 'firebase' | 'manual';
+    raw?: string;
+    trackingId?: string;
+    clientId?: string;
+    sessionId?: string;
+    pageTitle?: string;
+    pageLocation?: string;
+}
+export interface NetworkLog {
+    id: number;
+    url: string;
+    method: string;
+    status: number | null;
+    duration: number | null;
+    startTime: number;
+    request?: unknown;
+    response?: unknown;
+    requestHeaders?: Record<string, string>;
+    responseHeaders?: Record<string, string>;
+    /** #9 — number of consecutive identical requests collapsed into this entry. */
+    duplicateCount?: number;
+}
+export interface RouteInfo {
+    path: string;
+    params: any;
+}
+export interface ReduxHistoryEntry {
+    id: number;
+    type: string;
+    payload: any;
+    timestamp: string;
+    affectedSlices: string[];
+    prevState?: any;
+    nextState?: any;
+}
+export interface InspectorStorage {
+    getItem: (key: string) => string | null | Promise<string | null>;
+    setItem: (key: string, value: string) => void | Promise<void>;
+    removeItem?: (key: string) => void | Promise<void>;
+}
+export interface PersistedSettings {
+    isDark?: boolean;
+    modalHeightPercent?: number;
+    modalAnimationType?: string;
+    tabVisibility?: Record<string, boolean>;
+    defaultTab?: string;
+    maxNetworkLogs?: number;
+    maxConsoleLogs?: number;
+    showConsoleLevels?: {
+        info: boolean;
+        warn: boolean;
+        error: boolean;
+    };
+    reduxAutoRefresh?: boolean;
+    reduxExpandDepth?: number;
+    showDuplicateLogs?: boolean;
+}
+export interface NetworkInspectorProps {
+    enabled?: boolean;
+    isEnabled?: boolean;
+    storage?: InspectorStorage;
+    navigationRef?: any;
+}
+export interface NavigationTrackerProps {
+    onStateChange: (state: any) => void;
+}
+export interface InspectorContextValue {
+    visible: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    closeModal: () => void;
+    isReady: boolean;
+    isEnabled: boolean;
+    modalHeightPercent: number;
+    setModalHeightPercent: React.Dispatch<React.SetStateAction<number>>;
+    modalAnimationType: 'slide' | 'fade' | 'none';
+    setModalAnimationType: React.Dispatch<React.SetStateAction<'slide' | 'fade' | 'none'>>;
+    hasNavigationContext: boolean;
+    setNavState: React.Dispatch<React.SetStateAction<any>>;
+    activeTab: ActiveTab;
+    switchActiveTab: (key: ActiveTab) => void;
+    tabVisibility: Record<ActiveTab, boolean>;
+    toggleTabVisibility: (key: ActiveTab) => void;
+    lastReadApisCount: number;
+    lastReadLogsCount: number;
+    selected: NetworkLog | null;
+    setSelected: React.Dispatch<React.SetStateAction<NetworkLog | null>>;
+    selectedEvent: AnalyticsEvent | null;
+    setSelectedEvent: React.Dispatch<React.SetStateAction<AnalyticsEvent | null>>;
+    selectedLog: ConsoleLog | null;
+    setSelectedLog: React.Dispatch<React.SetStateAction<ConsoleLog | null>>;
+    showHeaderInfo: boolean;
+    setShowHeaderInfo: React.Dispatch<React.SetStateAction<boolean>>;
+    settingsPage: SettingsPage;
+    setSettingsPage: React.Dispatch<React.SetStateAction<SettingsPage>>;
+    updateAvailable: boolean;
+    latestNpmVersion: string | null;
+    clearAnim: Animated.Value;
+    activePulseAnim: Animated.Value;
+    unreadPulseAnim: Animated.Value;
+    runClearAllWithAnimation: () => void;
+    fabPan: Animated.ValueXY;
+    fabPanResponder: PanResponderInstance;
+    fabDraggedRef: React.MutableRefObject<boolean>;
+    pulseAnim: Animated.Value;
+    fabShineAnim: Animated.Value;
+    logs: NetworkLog[];
+    filteredLogs: NetworkLog[];
+    groupedData: GroupedListItem[];
+    search: string;
+    setSearch: React.Dispatch<React.SetStateAction<string>>;
+    statusFilters: Set<StatusFilter>;
+    setStatusFilters: React.Dispatch<React.SetStateAction<Set<StatusFilter>>>;
+    methodFilters: Set<Method>;
+    setMethodFilters: React.Dispatch<React.SetStateAction<Set<Method>>>;
+    availableMethods: Method[];
+    sortOrder: SortOrder;
+    setSortOrder: React.Dispatch<React.SetStateAction<SortOrder>>;
+    selectedLogs: Set<number>;
+    toggleSelect: (id: number) => void;
+    minStart: number;
+    totalRange: number;
+    newLogIds: Set<number>;
+    toggleSectionFilter: (pageName: string, filter: LocalFilter) => void;
+    toggleSectionCollapse: (pageName: string) => void;
+    handleDelete: () => void;
+    isNetworkPaused: boolean;
+    setIsNetworkPaused: React.Dispatch<React.SetStateAction<boolean>>;
+    detailTitle: string;
+    detailDisplayUrl: string;
+    apiDetailActiveTab: 'metadata' | 'headers' | 'request' | 'response';
+    setApiDetailActiveTab: React.Dispatch<React.SetStateAction<'metadata' | 'headers' | 'request' | 'response'>>;
+    detailSearch: string;
+    setDetailSearch: React.Dispatch<React.SetStateAction<string>>;
+    reqExpanded: boolean | undefined;
+    setReqExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    resExpanded: boolean | undefined;
+    setResExpanded: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    showReqDiff: boolean;
+    setShowReqDiff: React.Dispatch<React.SetStateAction<boolean>>;
+    showResDiff: boolean;
+    setShowResDiff: React.Dispatch<React.SetStateAction<boolean>>;
+    prevRequestData: unknown;
+    prevResponseData: unknown;
+    logRouteMapRef: React.MutableRefObject<Map<number, RouteInfo>>;
+    consoleLogs: ConsoleLog[];
+    visibleConsoleLogs: ConsoleLog[];
+    filteredConsoleLogs: ConsoleLog[];
+    logSearch: string;
+    setLogSearch: React.Dispatch<React.SetStateAction<string>>;
+    logFilters: Set<LogFilter>;
+    setLogFilters: React.Dispatch<React.SetStateAction<Set<LogFilter>>>;
+    logCounts: Record<string, string>;
+    logSortOrder: SortOrder;
+    setLogSortOrder: React.Dispatch<React.SetStateAction<SortOrder>>;
+    isConsolePaused: boolean;
+    setIsConsolePaused: React.Dispatch<React.SetStateAction<boolean>>;
+    analyticsEvents: AnalyticsEvent[];
+    filteredAnalyticsEvents: (AnalyticsEvent & {
+        count?: number;
+    })[];
+    analyticsSearch: string;
+    setAnalyticsSearch: React.Dispatch<React.SetStateAction<string>>;
+    newEventIds: Set<number>;
+    isAnalyticsLayoutReady: boolean;
+    setIsAnalyticsLayoutReady: React.Dispatch<React.SetStateAction<boolean>>;
+    analyticsHeaderExpanded: boolean;
+    setAnalyticsHeaderExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    isAnalyticsPaused: boolean;
+    setIsAnalyticsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+    reduxState: any;
+    setReduxState: React.Dispatch<React.SetStateAction<any>>;
+    reduxLastActionMap: Record<string, any>;
+    reduxSearch: string;
+    setReduxSearch: React.Dispatch<React.SetStateAction<string>>;
+    settingsActiveSubTab: SettingsSubTab;
+    setSettingsActiveSubTab: React.Dispatch<React.SetStateAction<SettingsSubTab>>;
+    defaultTab: ActiveTab;
+    setDefaultTab: React.Dispatch<React.SetStateAction<ActiveTab>>;
+    isDark: boolean;
+    setIsDark: React.Dispatch<React.SetStateAction<boolean>>;
+    showDuplicateLogs: boolean;
+    setShowDuplicateLogs: React.Dispatch<React.SetStateAction<boolean>>;
+    showConsoleLevels: {
+        info: boolean;
+        warn: boolean;
+        error: boolean;
+    };
+    setShowConsoleLevels: React.Dispatch<React.SetStateAction<{
+        info: boolean;
+        warn: boolean;
+        error: boolean;
+    }>>;
+    resetToDefaults: () => Promise<void>;
+    storage: InspectorStorage | undefined;
+    maxNetworkLogs: number;
+    setMaxNetworkLogs: React.Dispatch<React.SetStateAction<number>>;
+    maxConsoleLogs: number;
+    setMaxConsoleLogs: React.Dispatch<React.SetStateAction<number>>;
+    reduxAutoRefresh: boolean;
+    setReduxAutoRefreshState: React.Dispatch<React.SetStateAction<boolean>>;
+    reduxExpandDepth: number;
+    setReduxExpandDepth: React.Dispatch<React.SetStateAction<number>>;
+}
+export interface CopyButtonProps {
+    value: unknown | (() => unknown);
+    label: string;
+    iconType?: 'copy' | 'terminal' | 'fetch';
+}
+export interface SectionHeaderProps {
+    title: string;
+    value: unknown;
+    expanded: boolean | undefined;
+    onToggleExpand: () => void;
+    showDiff?: boolean;
+    isDiffing?: boolean;
+    onToggleDiff?: () => void;
+    showSearch?: boolean;
+    isSearching?: boolean;
+    onToggleSearch?: () => void;
+}
+export interface TreeNodeProps {
+    data: unknown;
+    name?: string | number;
+    level?: number;
+    search?: string;
+    forceOpen?: boolean;
+    defaultExpandDepth?: number;
+}
+export interface LogCardProps {
+    item: NetworkLog;
+    onPress: () => void;
+    timelineMinStart: number;
+    timelineTotalRange: number;
+    isNew?: boolean;
+    isSelected: boolean;
+    onToggleSelect: (id: number) => void;
+    searchStr?: string;
+}
+export interface MetaAccordionProps {
+    status: number | null | undefined;
+    statusColor: string;
+    duration: number | null | undefined;
+    size: string;
+    triggeredAt: string;
+    method: string;
+    contentType?: string;
+    url: string;
+}
+export interface HeadersSectionProps {
+    title: string;
+    headers: Record<string, string> | undefined;
+    search?: string;
+    resetKey?: string | number;
+}
+export interface SourcePageCardProps {
+    routeInfo: RouteInfo;
+}
+export interface SectionCardProps {
+    title?: string;
+    count?: number;
+    accentColor?: string;
+    children?: React.ReactNode;
+}
+export interface AnalyticsEventCardProps {
+    event: AnalyticsEvent & {
+        count?: number;
+    };
+    onPress: () => void;
+    isNew?: boolean;
+    searchStr?: string;
+    isFirst: boolean;
+    isLast: boolean;
+    msSincePrev?: number;
+    showTimestamp?: boolean;
+    computedScreenName?: string;
+}
+export interface CodeSnippetProps {
+    code: string;
+    language: 'html' | 'css' | 'javascript';
+    search?: string;
+}
+export interface AnimatedEntranceProps {
+    children: React.ReactNode;
+    delay?: number;
+    distance?: number;
+    duration?: number;
+    index?: number;
+    style?: ViewStyle | ViewStyle[];
+}
+export interface ConsoleLogCardProps {
+    item: ConsoleLog;
+    searchStr?: string;
+}
+export interface JsonContent {
+    header: string;
+    data: any;
+}
+export interface AnalyticsGraphProps {
+    event: AnalyticsEvent;
+    accentColor: string;
+}
+export interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    onClose?: () => void;
+    onReset?: () => void;
+    fallbackType?: 'modal' | 'inline';
+}
+export interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}

package/dist/esm/types/interfaces.js

@@ -0,0 +1 @@
+export {};

package/example/App.tsx

@@ -13,7 +13,6 @@ import { NavigationContainer, createNavigationContainerRef } from '@react-naviga
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import axios from 'axios';
 import NetworkInspector, {
-  WebView,
   ErrorBoundary,
   connectReduxStore,
   setupNetworkLogger,
@@ -22,6 +21,7 @@ import NetworkInspector, {
   logAnalyticsEvent,
   subscribeAnalyticsEvents,
 } from 'react-native-inapp-inspector';
+import {WebView} from 'react-native-webview';
 
 // ⚡ Call BEFORE any component renders so axios.create() is already patched
 setupNetworkLogger();
@@ -239,6 +239,71 @@ function HomeScreen({ navigation }: any) {
     console.error('[App] Simulated error! Critical DB connection timeout.');
   };
 
+  const triggerSampleAll = () => {
+    // Fire every sample action at once (with a few random extras)
+    const randomConsoleMessages = [
+      '[Sample] Fetching latest feed...',
+      '[Sample] Cache refreshed for user session',
+      '[Sample] Push notification permission granted',
+      '[Sample] Background sync completed',
+    ];
+    const randomAnalyticsEvents = [
+      'screen_view',
+      'button_tapped',
+      'list_scrolled',
+      'session_started',
+    ];
+
+    console.log(
+      `[Sample] Firing sample-all at ${new Date().toLocaleTimeString()}`,
+    );
+    console.warn('[Sample] Randomized warning: throttled API response');
+    console.error('[Sample] Randomized error: timeout on retry attempt #3');
+    console.log(
+      randomConsoleMessages[
+        Math.floor(Math.random() * randomConsoleMessages.length)
+      ],
+    );
+
+    triggerAxiosGet();
+    triggerAxiosPost();
+    triggerAxiosPut();
+    triggerAxiosPatch();
+    triggerAxiosDelete();
+    triggerNetworkRequest();
+    triggerFailedNetworkRequest();
+
+    logAnalyticsEvent(
+      randomAnalyticsEvents[
+        Math.floor(Math.random() * randomAnalyticsEvents.length)
+      ],
+      {
+        sample_batch: 'all',
+        triggered_at: new Date().toISOString(),
+        random_value: Math.floor(Math.random() * 1000),
+      },
+    );
+    logAnalyticsEvent('item_purchase', {
+      item_id: 'prod_999',
+      item_name: 'Premium Debug Kit',
+      price: 29.99,
+      currency: 'USD',
+    });
+
+    mockStore.dispatch({type: 'TOGGLE_SIDEBAR'});
+    mockStore.dispatch({type: 'UPDATE_USER_TIME'});
+
+    // Random extra fetch to spice up the flood
+    fetch(
+      `https://jsonplaceholder.typicode.com/posts/${Math.floor(
+        Math.random() * 8 + 1,
+      )}`,
+    )
+      .then(r => r.json())
+      .then(d => console.log('[Sample] Random fetch completed:', d.title))
+      .catch(e => console.error('[Sample] Random fetch failed:', e));
+  };
+
   const handleToggleSidebar = () => {
     mockStore.dispatch({ type: 'TOGGLE_SIDEBAR' });
     mockStore.dispatch({ type: 'UPDATE_USER_TIME' });
@@ -286,6 +351,28 @@ function HomeScreen({ navigation }: any) {
           </View>
         </View>
 
+        {/* Trigger Sample All Logs */}
+        <View
+          style={[
+            styles.panelCard,
+            { borderColor: '#22D3EE', marginBottom: 20 },
+          ]}>
+          <Text style={[styles.panelHeader, { color: '#22D3EE' }]}>
+            🎲 SAMPLE ALL LOGS
+          </Text>
+          <TouchableOpacity
+            style={[
+              styles.fullWidthBtn,
+              { backgroundColor: '#0891B2' },
+            ]}
+            onPress={triggerSampleAll}
+          >
+            <Text style={styles.fullWidthBtnText}>
+              Trigger Sample All Logs At Once
+            </Text>
+          </TouchableOpacity>
+        </View>
+
         {/* Action Panel Grid */}
         <View style={styles.panelCard}>
           <Text style={styles.panelHeader}>🌐 API & NETWORK TESTS</Text>
@@ -371,6 +458,39 @@ function HomeScreen({ navigation }: any) {
               Trigger Log, Warn & Error Logs
             </Text>
           </TouchableOpacity>
+
+          <View style={[styles.btnRow, {marginTop: 8}]}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#8B5CF6' }]}
+              onPress={() => {
+                console.log(
+                  'Multi-argument payload inspection:',
+                  { userId: 101, username: 'venkatesh', role: 'Lead Architect' },
+                  ['permissions.read', 'permissions.write', 'permissions.admin'],
+                  { device: 'iPhone 15 Pro', os: 'iOS 18.0', battery: '92%' },
+                );
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#8B5CF6' }]}>
+                Multi-Arg Log
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#EF4444' }]}
+              onPress={() => {
+                try {
+                  throw new TypeError('Cannot read properties of undefined (reading "authToken")');
+                } catch (err) {
+                  console.error(err);
+                }
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#EF4444' }]}>
+                Error Stack Log
+              </Text>
+            </TouchableOpacity>
+          </View>
         </View>
 
         <View style={styles.panelCard}>
@@ -430,8 +550,31 @@ function HomeScreen({ navigation }: any) {
 
         <View style={styles.panelCard}>
           <Text style={styles.panelHeader}>⚙️ REDUX & STATE ACTIONS</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#10B981' }]}
+              onPress={handleToggleSidebar}
+            >
+              <Text style={[styles.btnText, { color: '#10B981' }]}>
+                Toggle Sidebar
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#06B6D4' }]}
+              onPress={() => {
+                mockStore.dispatch({
+                  type: 'SET_THEME',
+                  payload: mockStore.getState().settings.theme === 'dark' ? 'light' : 'dark',
+                });
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#06B6D4' }]}>
+                Toggle Theme
+              </Text>
+            </TouchableOpacity>
+          </View>
           <TouchableOpacity
-            style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]}
+            style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6', marginTop: 8 }]}
             onPress={handleToggleSidebar}
           >
             <Text style={styles.fullWidthBtnText}>