react-native-debug-toolkit 0.3.0 → 0.3.1

package/index.js

@@ -9,6 +9,8 @@ import { createNetworkFeature } from './lib/features/NetworkFeature'
 import { createPerformanceFeature } from './lib/features/PerformanceFeature'
 import { createConsoleLogFeature } from './lib/features/ConsoleLogFeature'
 import { createZustandLogFeature, addZustandLog } from './lib/features/ZustandLogFeature'
+import { createNavigationLogFeature, addNavigationLog } from './lib/features/NavigationLogFeature'
+import { useNavigationLogger } from './lib/hooks/useNavigationLogger'
 
 export {
   DebugToolKit,
@@ -17,7 +19,10 @@ export {
   createPerformanceFeature,
   createConsoleLogFeature,
   createZustandLogFeature,
-  addZustandLog
+  addZustandLog,
+  createNavigationLogFeature,
+  addNavigationLog,
+  useNavigationLogger
 }
 
 export default DebugToolKit

package/lib/features/NavigationLogFeature.js

@@ -0,0 +1,47 @@
+const MAX_LOGS = 200; // Max number of navigation logs to store
+const logs = [];
+const originalNavigationMethods = {}; // Store original navigation methods
+
+const setup = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // Note: Actual navigation interception will be done in the main app code
+  // This is just a setup function for compatibility with the feature API
+};
+
+// Function to add navigation log
+export const addNavigationLog = (action, from, to, startTime, duration) => {
+  // Store log data
+  logs.push({
+    timestamp: new Date(),
+    action: action, // push, pop, replace, etc.
+    from: from,     // source route info
+    to: to,         // destination route info
+    startTime: startTime,
+    duration: duration,
+  });
+
+  // Trim logs if they exceed the maximum limit
+  if (logs.length > MAX_LOGS) {
+    logs.splice(0, logs.length - MAX_LOGS);
+  }
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  logs.length = 0; // Clear array
+};
+
+export const createNavigationLogFeature = () => {
+  return {
+    name: 'navigation',
+    label: 'Navigation Logs',
+    setup: setup,
+    getData: getData,
+    cleanup: cleanup,
+  };
+}; 

package/lib/hooks/useNavigationLogger.js

@@ -0,0 +1,92 @@
+import { useEffect, useRef } from 'react';
+import { addNavigationLog } from '../features/NavigationLogFeature';
+
+/**
+ * Custom hook to log React Navigation events for debugging
+ * 
+ * Usage:
+ * 
+ * // In your navigation container
+ * import { useNavigationLogger } from 'react-native-debug-toolkit';
+ * 
+ * function App() {
+ *   const navigationRef = useRef();
+ *   
+ *   // Enable navigation logging
+ *   useNavigationLogger(navigationRef);
+ *   
+ *   return (
+ *     <NavigationContainer ref={navigationRef}>
+ *       // ... your navigation structure
+ *     </NavigationContainer>
+ *   );
+ * }
+ */
+export function useNavigationLogger(navigationRef) {
+  // Track previous state
+  const routeRef = useRef(null);
+  
+  useEffect(() => {
+    if (!__DEV__ || !navigationRef.current) {
+      return;
+    }
+
+    // Create listeners for navigation events
+    const unsubscribeReady = navigationRef.current?.addListener('state', (e) => {
+      if (!navigationRef.current) return;
+      
+      const state = navigationRef.current.getRootState();
+      if (!state) return;
+      
+      const currentRoute = navigationRef.current.getCurrentRoute();
+      
+      if (!currentRoute) return;
+      
+      // First render won't have a previous state
+      if (!routeRef.current) {
+        routeRef.current = currentRoute;
+        return;
+      }
+      
+      // Determine the navigation action
+      let action = 'navigate';
+      
+      // Check if this was a push (adding to history) or replace
+      const routes = state.routes;
+      if (routes.length > 0) {
+        const prevIndex = routes.findIndex(route => route.key === routeRef.current.key);
+        const currentIndex = routes.findIndex(route => route.key === currentRoute.key);
+        
+        if (currentIndex > prevIndex) {
+          action = 'push';
+        } else if (currentIndex < prevIndex) {
+          action = 'pop';
+        } else if (currentIndex === prevIndex) {
+          action = 'replace';
+        }
+      }
+      
+      // Log the navigation
+      addNavigationLog(
+        action,
+        {
+          name: routeRef.current.name,
+          params: routeRef.current.params,
+        },
+        {
+          name: currentRoute.name,
+          params: currentRoute.params,
+        },
+        performance.now(), // Approximate time
+        0 // No duration measurement available for this event type
+      );
+      
+      // Update the reference
+      routeRef.current = currentRoute;
+    });
+    
+    return () => {
+      unsubscribeReady && unsubscribeReady();
+    };
+  }, [navigationRef]);
+}

package/lib/index.js

@@ -3,6 +3,7 @@ import { createNetworkFeature } from './features/NetworkFeature'
 import { createPerformanceFeature} from './features/PerformanceFeature'
 import { createConsoleLogFeature } from './features/ConsoleLogFeature'
 import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
+import { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature'
 
 // Registry mapping feature names (strings) to their creator functions
 const featureRegistry = {
@@ -10,12 +11,13 @@ const featureRegistry = {
   console: createConsoleLogFeature,
   performance: createPerformanceFeature,
   zustand: createZustandLogFeature,
+  navigation: createNavigationLogFeature,
   // Add other built-in features here
   // 'storage': createStorageFeature,
 }
 
 // List of default features (can use strings now)
-const defaultFeatures = ['network', 'console', 'zustand']
+const defaultFeatures = ['network', 'console', 'zustand', 'navigation']
 
 /**
  * Initializes and shows the Debug ToolKit panel with specified features.
@@ -81,6 +83,8 @@ export {
   createPerformanceFeature, 
   createConsoleLogFeature, 
   createZustandLogFeature,
+  createNavigationLogFeature,
+  addNavigationLog,
   zustandLogMiddleware,  // Export middleware for use in Zustand stores
   featureRegistry 
 };

package/lib/navigation/NavigationLogger.js

@@ -0,0 +1 @@
+ 

package/lib/utils/DebugConst.js

@@ -19,15 +19,15 @@ export const DebugColors = {
 export const getLogLevelColor = (level) => {
     switch (level?.toLowerCase()) {
       case 'log':
-        return '#333';
+        return '#333'; // Dark gray for standard log
       case 'info':
-        return '#0D96F2';
+        return '#0D96F2'; // Blue for info
       case 'warn':
-        return '#FCA130';
+        return '#FCA130'; // Orange for warning
       case 'error':
-        return '#F93E3E';
+        return '#F93E3E'; // Red for error
       default:
-        return '#666666';
+        return '#666666'; // Default gray
     }
   };
 export const DebugImgs = {
@@ -47,3 +47,21 @@ export const getZustandActionColor = (action) => {
   
   return '#0D96F2'; // Default blue for other actions
 };
+
+// Navigation action colors
+export const getNavigationActionColor = (action) => {
+  switch (action?.toLowerCase()) {
+    case 'push':
+      return '#0D96F2'; // Blue for push
+    case 'pop':
+      return '#6E7072'; // Gray for pop
+    case 'replace':
+      return '#4CAF50'; // Green for replace
+    case 'reset':
+      return '#FCA130'; // Orange for reset
+    case 'goback':
+      return '#9C27B0'; // Purple for go back
+    default:
+      return '#0D96F2'; // Default blue for navigation
+  }
+};

package/lib/utils/StorageUtils.js

@@ -12,6 +12,7 @@ const STORAGE_KEYS = {
   NETWORK_LOGS: 'network_logs',
   PERFORMANCE_DATA: 'performance_data',
   ZUSTAND_LOGS: 'zustand_logs',
+  NAVIGATION_LOGS: 'navigation_logs',
 };
 
 /**

package/lib/views/FloatPanelView.js

@@ -8,15 +8,18 @@ import {
   Dimensions,
   Pressable,
   SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  Modal,
+  FlatList,
 } from 'react-native'
 // import AsyncStorage from '@react-native-async-storage/async-storage'
 import { IconRadius, DebugColors } from '../utils/DebugConst'
 import SubViewHTTPLogs from './SubViewHTTPLogs'
 import SubViewPerformance from './SubViewPerformance'
-import TabView from './TabView'
 import SubViewConsoleLogs from './SubViewConsoleLogs'
 import SubViewZustandLogs from './SubViewZustandLogs'
-
+import SubViewNavigationLogs from './SubViewNavigationLogs'
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
 export default class FloatPanelView extends Component {
@@ -38,8 +41,12 @@ export default class FloatPanelView extends Component {
       activeTab: 0,
       panelTranslateY: new Animated.Value(screenHeight),
       backdropOpacity: new Animated.Value(0),
+      isTabMenuVisible: false,
+      panelLayout: { width: 0, height: 0 },
     }
 
+    this.tabScrollViewRef = React.createRef()
+
     this.gestureResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
@@ -197,6 +204,8 @@ export default class FloatPanelView extends Component {
   }
 
   _closePanel = () => {
+    this.setState({ isTabMenuVisible: false })
+    
     Animated.parallel([
       Animated.spring(this.state.panelTranslateY, {
         toValue: screenHeight,
@@ -214,6 +223,26 @@ export default class FloatPanelView extends Component {
     })
   }
 
+  _toggleTabMenu = () => {
+    this.setState(prevState => ({ isTabMenuVisible: !prevState.isTabMenuVisible }))
+  }
+
+  _handleTabChange = (index) => {
+    this.setState({ 
+      activeTab: index,
+      isTabMenuVisible: false
+    }, () => {
+      // Scroll to make active tab visible
+      if (this.tabScrollViewRef.current) {
+        const tabWidth = 80; // Approximate tab width
+        this.tabScrollViewRef.current.scrollTo({
+          x: Math.max(0, index * tabWidth - 50), // Center the tab
+          animated: true
+        });
+      }
+    })
+  }
+
   renderFloatBtn() {
     const { isOpen, toFloat } = this.state
 
@@ -287,6 +316,10 @@ export default class FloatPanelView extends Component {
       return <SubViewZustandLogs logs={data} />
     }
 
+    if (feature.name === 'navigation') {
+      return <SubViewNavigationLogs logs={data} />
+    }
+
     // Generic fallback for other feature types
     return (
       <View style={styles.genericContent}>
@@ -309,9 +342,46 @@ export default class FloatPanelView extends Component {
     return this.renderFeatureContent(tabs[activeTab].id)
   }
 
+  renderTabBar() {
+    const tabs = this.getFeatureTabs()
+    const { activeTab } = this.state
+    
+    if (!tabs.length) return null
+    
+    return (
+      <View style={styles.tabBarContainer}>
+        <View style={styles.tabsRow}>
+          <ScrollView 
+            ref={this.tabScrollViewRef}
+            horizontal 
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.tabsScrollContainer}>
+            {tabs.map((tab, index) => {
+              const isActive = index === activeTab
+              
+              return (
+                <TouchableOpacity
+                  key={`tab-${tab.id}`}
+                  style={[styles.tab, isActive && styles.activeTab]}
+                  onPress={() => this._handleTabChange(index)}>
+                  <Text 
+                    style={[styles.tabText, isActive && styles.activeTabText]}
+                    numberOfLines={1}
+                    ellipsizeMode="tail">
+                    {tab.label}
+                  </Text>
+                </TouchableOpacity>
+              )
+            })}
+          </ScrollView>
+          
+        </View>
+      </View>
+    )
+  }
+  
   renderPanel() {
     const { isOpen, panelTranslateY, backdropOpacity } = this.state
-    const tabs = this.getFeatureTabs()
 
     if (!isOpen) {
       return null
@@ -329,7 +399,11 @@ export default class FloatPanelView extends Component {
           style={[
             styles.panel,
             { transform: [{ translateY: panelTranslateY }] },
-          ]}>
+          ]}
+          onLayout={(e) => {
+            const { width, height } = e.nativeEvent.layout
+            this.setState({ panelLayout: { width, height } })
+          }}>
           <View {...this.panelResponder.panHandlers} style={styles.dragHandle}>
             <View style={styles.dragIndicator} />
           </View>
@@ -340,12 +414,12 @@ export default class FloatPanelView extends Component {
                 <Text style={styles.closeButtonText}>×</Text>
               </Pressable>
             </View>
-            <TabView
-              tabs={tabs}
-              activeTab={this.state.activeTab}
-              onTabChange={(index) => this.setState({ activeTab: index })}>
+            
+            {this.renderTabBar()}
+            
+            <View style={styles.contentContainer}>
               {this.renderContent()}
-            </TabView>
+            </View>
           </SafeAreaView>
         </Animated.View>
       </View>
@@ -445,6 +519,9 @@ const styles = StyleSheet.create({
   panelContent: {
     flex: 1,
   },
+  contentContainer: {
+    flex: 1,
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -467,6 +544,41 @@ const styles = StyleSheet.create({
     color: DebugColors.text,
     fontWeight: 'bold',
   },
+  tabBarContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: DebugColors.border,
+    backgroundColor: DebugColors.background,
+  },
+  tabsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tabsScrollContainer: {
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tab: {
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    marginRight: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 50,
+  },
+  activeTab: {
+    borderBottomWidth: 2,
+    borderBottomColor: DebugColors.blue,
+  },
+  tabText: {
+    fontSize: 13,
+    color: DebugColors.textLight,
+    textAlign: 'center',
+  },
+  activeTabText: {
+    color: DebugColors.blue,
+    fontWeight: '600',
+  },
   emptyText: {
     padding: 20,
     textAlign: 'center',
@@ -501,5 +613,5 @@ const styles = StyleSheet.create({
     fontFamily: 'monospace',
     fontSize: 12,
     color: DebugColors.text,
-  },
+  }
 })

package/lib/views/NavigationLogDetails.js

@@ -0,0 +1,294 @@
+import React from 'react'
+import { View, Text, StyleSheet, Clipboard } from 'react-native'
+import { ScrollView, Pressable } from 'react-native'
+import JSONTree from 'react-native-json-tree'
+import { getNavigationActionColor } from '../utils/DebugConst'
+
+// Re-using the theme from ConsoleLogDetails for consistency
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = React.useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+// Basic JSONValue renderer
+const JSONValue = ({ value }) => {
+  if (value === null) {
+    return <Text style={styles.jsonNull}>null</Text>
+  }
+
+  if (value === undefined) {
+    return <Text style={styles.jsonNull}>undefined</Text>
+  }
+
+  if (typeof value === 'boolean') {
+    return <Text style={styles.jsonBoolean}>{value.toString()}</Text>
+  }
+
+  if (typeof value === 'number') {
+    return <Text style={styles.jsonNumber}>{value}</Text>
+  }
+
+  if (typeof value === 'string') {
+    return (
+      <Text style={styles.jsonString} selectable={true}>
+        "{value}"
+      </Text>
+    )
+  }
+
+  if (typeof value === 'object') {
+    return (
+      <JSONTree
+         data={value}
+         theme={theme}
+         invertTheme={true}
+         hideRoot={true}
+         shouldExpandNode={(keyPath, nodeData, currentLevel) => currentLevel < 1}
+      />
+    )
+  }
+
+  return <Text style={styles.jsonOther}>{String(value)}</Text>
+}
+
+const NavigationLogDetails = ({ log }) => {
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Navigation log data is missing</Text>
+      </View>
+    )
+  }
+
+  const { action, from, to, timestamp, startTime, duration } = log
+  const actionColor = getNavigationActionColor(action)
+
+  // Format the log data for text display and copying
+  const formatLogForCopy = () => {
+    try {
+      return `Navigation: ${action}
+From: ${JSON.stringify(from, null, 2)}
+To: ${JSON.stringify(to, null, 2)}
+Time: ${timestamp ? new Date(timestamp).toLocaleString() : 'Unknown'}
+Duration: ${duration || 'N/A'} ms`;
+    } catch (e) {
+      return 'Failed to format navigation log';
+    }
+  };
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'>
+
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+           <Text style={[styles.actionIndicator, { color: actionColor }]}>
+            {action?.toUpperCase() || 'UNKNOWN'}
+          </Text>
+          <Text style={styles.timestamp}>
+            {timestamp
+              ? new Date(timestamp).toLocaleString()
+              : 'Unknown time'}
+          </Text>
+          {duration && (
+            <Text style={styles.duration}>
+              {`${duration} ms`}
+            </Text>
+          )}
+        </View>
+        <CopyButton text={formatLogForCopy()} />
+      </View>
+
+      <CollapsibleSection title='From Route' initiallyExpanded={true}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONValue value={from} />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='To Route' initiallyExpanded={true}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONValue value={to} />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+    </ScrollView>
+  )
+}
+
+// Styles adapted from ConsoleLogDetails
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerInfo: {
+    flexShrink: 1,
+    marginRight: 10,
+  },
+  actionIndicator: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  timestamp: {
+    fontSize: 13,
+    color: '#666',
+    marginBottom: 2,
+  },
+  duration: {
+    fontSize: 12,
+    color: '#888',
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  content: {
+    padding: 15,
+  },
+  dataContentWrapper: {
+    flex: 1,
+    padding: 10,
+  },
+  dataContent: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+  copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    flexShrink: 0,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  // JSON Value Styles (reused from ConsoleLogDetails)
+  jsonString: {
+    color: '#CB772F',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonNumber: {
+    color: '#AE81FF',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonBoolean: {
+    color: '#66D9EF',
+    fontWeight: 'bold',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonNull: {
+    color: '#F92672',
+    fontStyle: 'italic',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonOther: {
+    color: '#75715e',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+});
+
+export default NavigationLogDetails

package/lib/views/SubViewNavigationLogs.js

@@ -0,0 +1,199 @@
+import React, { useState, useMemo } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native'
+import NavigationLogDetails from './NavigationLogDetails'
+import { getNavigationActionColor } from '../utils/DebugConst'
+
+const SubViewNavigationLogs = ({ logs = [] }) => {
+  const [selectedLog, setSelectedLog] = useState(null)
+
+  // Memoize the sorted logs
+  const sortedLogs = useMemo(() => {
+    // Create a stable copy before sorting if FlatList relies on reference equality
+    return [...logs].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+  }, [logs]);
+
+  // Helper to format navigation data for preview
+  const formatNavigationPreview = (action, from, to) => {
+    const fromName = from?.name || 'Unknown';
+    const toName = to?.name || 'Unknown';
+    
+    let preview = `${action || 'Navigate'}: ${fromName} → ${toName}`;
+    
+    // Add params summary if available
+    if (to?.params) {
+      try {
+        const paramsStr = JSON.stringify(to.params);
+        const shortParams = paramsStr.length > 30 ? paramsStr.substring(0, 27) + '...' : paramsStr;
+        preview += ` ${shortParams}`;
+      } catch (e) {
+        preview += ' [with params]';
+      }
+    }
+    
+    return preview;
+  };
+
+  const renderLogItem = ({ item }) => {
+    const action = item.action || 'navigate';
+    const actionColor = getNavigationActionColor(action);
+    const previewText = formatNavigationPreview(action, item.from, item.to);
+    const timestamp = item.timestamp
+      ? new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
+      : '';
+
+    return (
+      <TouchableOpacity
+        style={styles.logItem}
+        onPress={() => setSelectedLog(item)}>
+        <View style={styles.logItemContainer}>
+          <View
+            style={[styles.actionIndicator, { backgroundColor: actionColor }]}
+          />
+
+          <View style={styles.logContent}>
+            <View style={styles.logHeader}>
+              <Text style={[styles.actionText, { color: actionColor }]}>
+                {action.toUpperCase()}
+              </Text>
+              <Text style={styles.time}>{timestamp}</Text>
+            </View>
+
+            <Text style={styles.logMessage} numberOfLines={2}>
+              {previewText}
+            </Text>
+            
+            {item.duration && (
+              <Text style={styles.duration}>{`${item.duration} ms`}</Text>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  // If a log is selected, show the details view
+  if (selectedLog) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>Navigation Details</Text>
+        </View>
+        <NavigationLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
+  return (
+    <View style={styles.container}>
+      {sortedLogs.length === 0 ? (
+        <Text style={styles.emptyText}>No navigation events logged yet</Text>
+      ) : (
+        <FlatList
+          data={sortedLogs}
+          renderItem={renderLogItem}
+          keyExtractor={(item, index) => `${item.timestamp}-${index}`}
+          style={styles.list}
+        />
+      )}
+    </View>
+  )
+}
+
+// Adapted styles from SubViewConsoleLogs
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  list: {
+    flex: 1,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+  },
+  logItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  logItemContainer: {
+    flexDirection: 'row',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  actionIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 10,
+  },
+  logContent: {
+    flex: 1,
+  },
+  logHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  actionText: {
+    fontSize: 13,
+    fontWeight: 'bold',
+  },
+  time: {
+    fontSize: 12,
+    color: '#888',
+  },
+  logMessage: {
+    fontSize: 14,
+    color: '#333',
+    lineHeight: 18,
+    fontFamily: 'monospace',
+  },
+  duration: {
+    fontSize: 12,
+    color: '#888',
+    marginTop: 4,
+  },
+  // Details Header Styles
+  detailsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  backButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    backgroundColor: '#eee',
+    marginRight: 15,
+  },
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+})
+
+export default SubViewNavigationLogs 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",