react-native-debug-toolkit 3.5.0 → 3.5.1

package/src/features/sessionHistory/SessionHistoryTab.tsx

@@ -51,12 +51,14 @@ interface FlatLogEntry {
 const FEATURE_LABELS: Record<LogFeatureKey, string> = {
   console_logs: 'Console',
   network_logs: 'Network',
+  native_logs: 'Native',
   track_logs: 'Track',
 };
 
 const FEATURE_COLORS: Record<LogFeatureKey, string> = {
   console_logs: Colors.info,
   network_logs: Colors.success,
+  native_logs: '#FF9500',
   track_logs: Colors.purple,
 };
 

package/src/features/sessionHistory/index.ts

@@ -3,7 +3,7 @@ import type { LogFeatureKey } from '../../types';
 import { createDebugTab } from '../../utils/createDebugTab';
 import { getDefaultLogRuntime, type LogRuntimeContext } from '../../utils/logRuntime';
 
-const FEATURE_KEYS: LogFeatureKey[] = ['console_logs', 'network_logs', 'track_logs'];
+const FEATURE_KEYS: LogFeatureKey[] = ['console_logs', 'network_logs', 'native_logs', 'track_logs'];
 
 export function createSessionHistoryFeature(
   runtime: LogRuntimeContext = getDefaultLogRuntime(),
@@ -28,7 +28,7 @@ export function createSessionHistoryFeature(
     const counts: Record<string, LogCounts> = {};
     await Promise.all(
       sessionIds.map(async (id) => {
-        const c: LogCounts = { console_logs: 0, network_logs: 0, track_logs: 0 };
+        const c: LogCounts = { console_logs: 0, network_logs: 0, native_logs: 0, track_logs: 0 };
         await Promise.all(
           FEATURE_KEYS.map(async (key) => {
             c[key] = await runtime.sessionManager.getSessionLogCount(id, key);

package/src/index.ts

@@ -23,6 +23,8 @@ export { createClipboardFeature } from './features/clipboard';
 export { createDevConnectFeature } from './features/devConnect';
 export type { DevConnectState } from './features/devConnect';
 export { createSessionHistoryFeature } from './features/sessionHistory';
+export { createNativeLogsFeature } from './features/nativeLogs';
+export type { NativeLogsFeatureConfig } from './features/nativeLogs';
 
 // Hooks
 export { useNavigationLogger } from './features/navigation/useNavigationLogger';
@@ -69,6 +71,9 @@ export type {
   FeatureDataProvider,
   NetworkLogEntry,
   ConsoleLogEntry,
+  NativeLogEntry,
+  NativeLogLevel,
+  NativeLogSource,
   ZustandLogEntry,
   NavigationLogEntry,
   TrackLogEntry,

package/src/types/feature.ts

@@ -5,6 +5,7 @@ export type DebugFeatureListener = () => void;
 export type BuiltInFeatureName =
   | 'network'
   | 'console'
+  | 'native'
   | 'zustand'
   | 'navigation'
   | 'track'

package/src/types/index.ts

@@ -10,6 +10,9 @@ export type {
 export type {
   ConsoleLogEntry,
   NavigationLogEntry,
+  NativeLogEntry,
+  NativeLogLevel,
+  NativeLogSource,
   NetworkLogEntry,
   TrackLogEntry,
   ZustandLogEntry,

package/src/types/logs.ts

@@ -52,3 +52,20 @@ export interface TrackLogEntry {
   eventName: string;
   [key: string]: unknown;
 }
+
+export type NativeLogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal' | 'unknown';
+export type NativeLogSource = 'logcat' | 'rctLog' | 'manual';
+
+export interface NativeLogEntry {
+  id: string;
+  timestamp: number;
+  platform: 'android' | 'ios' | 'unknown';
+  level: NativeLogLevel;
+  source: NativeLogSource;
+  message: string;
+  tag?: string;
+  thread?: string;
+  file?: string;
+  line?: number;
+  raw?: string;
+}

package/src/ui/DebugView.tsx

@@ -52,6 +52,7 @@ export function DebugView({
     const resolvedFeatures: FeatureConfigs = {
       network: true,
       console: true,
+      native: true,
       zustand: true,
       navigation: true,
       track: true,

package/src/ui/panel/FeatureIntroCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { View, Text, Pressable, TextInput, StyleSheet } from 'react-native';
 import { Colors } from '../theme/colors';
 import type { FeatureSummary } from './buildFeatureSummary';
 
@@ -13,6 +13,9 @@ interface FeatureIntroCardProps {
   summary: FeatureSummary;
   filterBad: boolean;
   onFilterBad: (bad: boolean) => void;
+  searchQuery?: string;
+  onSearchChange?: (text: string) => void;
+  showSearch?: boolean;
 }
 
 export function FeatureIntroCard({
@@ -20,12 +23,11 @@ export function FeatureIntroCard({
   summary,
   filterBad,
   onFilterBad,
+  searchQuery,
+  onSearchChange,
+  showSearch,
 }: FeatureIntroCardProps) {
-  const {
-    statusLabel,
-    statusColor,
-    supportsBadFilter,
-  } = summary;
+  const { statusLabel, statusColor, supportsBadFilter } = summary;
 
   return (
     <View style={styles.card}>
@@ -38,24 +40,32 @@ export function FeatureIntroCard({
             </Text>
           </View>
         )}
-      </View>
-      {supportsBadFilter && (
-        <View style={styles.actionRow}>
-          <Pressable
-            style={[styles.chip, !filterBad && styles.chipActive]}
-            onPress={() => onFilterBad(false)}
-          >
-            <Text style={[styles.chipText, !filterBad && styles.chipTextActive]}>All</Text>
-          </Pressable>
-          {supportsBadFilter && (
+        {supportsBadFilter && (
+          <View style={styles.filterRow}>
+            <Pressable
+              style={[styles.chip, !filterBad && styles.chipActive]}
+              onPress={() => onFilterBad(false)}
+            >
+              <Text style={[styles.chipText, !filterBad && styles.chipTextActive]}>All</Text>
+            </Pressable>
             <Pressable
               style={[styles.chip, filterBad && styles.chipBadActive]}
               onPress={() => onFilterBad(true)}
             >
               <Text style={[styles.chipText, filterBad && styles.chipTextBad]}>Bad</Text>
             </Pressable>
-          )}
-        </View>
+          </View>
+        )}
+      </View>
+      {showSearch && (
+        <TextInput
+          style={styles.searchInput}
+          placeholder="Search..."
+          placeholderTextColor={Colors.textLight}
+          value={searchQuery}
+          onChangeText={onSearchChange}
+          returnKeyType="search"
+        />
       )}
     </View>
   );
@@ -63,8 +73,9 @@ export function FeatureIntroCard({
 
 const styles = StyleSheet.create({
   card: {
-    paddingHorizontal: 14,
-    paddingVertical: 10,
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 6,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: Colors.border,
     backgroundColor: Colors.background,
@@ -75,10 +86,9 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   title: {
-    fontSize: 17,
+    fontSize: 15,
     fontWeight: '700',
     color: Colors.text,
-    flex: 1,
   },
   statusChip: {
     paddingHorizontal: 8,
@@ -91,16 +101,15 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     color: Colors.textSecondary,
   },
-  actionRow: {
+  filterRow: {
     flexDirection: 'row',
     gap: 6,
-    marginTop: 8,
   },
   chip: {
-    height: 26,
-    paddingHorizontal: 12,
+    height: 24,
+    paddingHorizontal: 10,
     justifyContent: 'center',
-    borderRadius: 13,
+    borderRadius: 12,
     borderWidth: 1,
     borderColor: Colors.border,
     backgroundColor: Colors.surface,
@@ -124,4 +133,15 @@ const styles = StyleSheet.create({
   chipTextBad: {
     color: '#fff',
   },
+  searchInput: {
+    height: 32,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 8,
+    backgroundColor: Colors.surface,
+    paddingHorizontal: 10,
+    fontSize: 13,
+    color: Colors.text,
+    marginTop: 6,
+  },
 });

package/src/ui/panel/FeatureRail.tsx

@@ -128,10 +128,10 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.primary,
   },
   itemName: {
-    fontSize: 9,
+    fontSize: 11,
     fontWeight: '700',
     color: Colors.textSecondary,
-    letterSpacing: 0,
+    letterSpacing: 0.2,
   },
   activeItemName: {
     color: Colors.text,
@@ -158,7 +158,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   countText: {
-    fontSize: 8,
+    fontSize: 10,
     fontWeight: '800',
     color: Colors.textSecondary,
   },

package/src/ui/panel/FloatPanelView.tsx

@@ -2,7 +2,6 @@ import React, { Component, useCallback, useEffect, useRef, useState } from 'reac
 import {
   View,
   Text,
-  TextInput,
   StyleSheet,
   Animated,
 } from 'react-native';
@@ -239,20 +238,11 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
                     summary={activeSummary}
                     filterBad={filterBad}
                     onFilterBad={setFilterBad}
+                    searchQuery={searchQuery}
+                    onSearchChange={setSearchQuery}
+                    showSearch={showSearch}
                   />
                 )}
-                {showSearch && (
-                  <View style={styles.toolbar}>
-                    <TextInput
-                      style={styles.searchInput}
-                      placeholder="Search..."
-                      placeholderTextColor={Colors.textLight}
-                      value={searchQuery}
-                      onChangeText={setSearchQuery}
-                      returnKeyType="search"
-                    />
-                  </View>
-                )}
                 <Animated.View
                   style={[
                     styles.contentContainer,
@@ -287,27 +277,6 @@ const styles = StyleSheet.create({
   contentColumn: {
     flex: 1,
   },
-  toolbar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.border,
-    backgroundColor: Colors.background,
-  },
-  searchInput: {
-    flex: 1,
-    height: 34,
-    borderWidth: 1,
-    borderColor: Colors.border,
-    borderRadius: 8,
-    backgroundColor: Colors.surface,
-    paddingHorizontal: 10,
-    fontSize: 13,
-    color: Colors.text,
-  },
   contentContainer: { flex: 1 },
   emptyText: {
     padding: 20,

package/src/utils/SessionManager.ts

@@ -1,7 +1,7 @@
 import type { SessionInfo } from './deviceReport';
 import type { StorageAdapter } from './StorageAdapter';
 
-export type LogFeatureKey = 'console_logs' | 'network_logs' | 'track_logs';
+export type LogFeatureKey = 'console_logs' | 'network_logs' | 'native_logs' | 'track_logs';
 
 export type LogSession = SessionInfo;
 
@@ -18,7 +18,7 @@ export interface SessionManagerOptions {
 
 const SESSION_INDEX_KEY = '@react_native_debug_toolkit/sessions';
 const DEFAULT_MAX_SESSIONS = 5;
-const DEFAULT_FEATURE_KEYS: LogFeatureKey[] = ['console_logs', 'network_logs', 'track_logs'];
+const DEFAULT_FEATURE_KEYS: LogFeatureKey[] = ['console_logs', 'network_logs', 'native_logs', 'track_logs'];
 
 function randomHex(): string {
   return Math.floor(Math.random() * 0xffffffff).toString(16).padStart(8, '0');