react-native-xenon 1.1.0 → 2.1.0

package/lib/typescript/src/ui/components/panels/Panel.d.ts

@@ -0,0 +1,6 @@
+import { View, type ViewProps } from 'react-native';
+interface PanelProps extends ViewProps {
+}
+declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<View>>;
+export default Panel;
+//# sourceMappingURL=Panel.d.ts.map

package/lib/typescript/src/ui/components/panels/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAc1E,UAAU,UAAW,SAAQ,SAAS;CAAG;AAEzC,QAAA,MAAM,KAAK,6FA6BT,CAAC;AAgBH,eAAe,KAAK,CAAC"}

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts

@@ -0,0 +1,6 @@
+import { View, type ViewProps } from 'react-native';
+interface SearchBarProps extends ViewProps {
+}
+declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<View>>;
+export default SearchBar;
+//# sourceMappingURL=SearchBar.d.ts.map

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;CAAG;AAE7C,QAAA,MAAM,SAAS,iGA+Db,CAAC;AA2CH,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "react-native-xenon",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "description": "A powerful in-app debugging tool for React Native.",
-  "source": "./src/index.ts",
-  "main": "./lib/commonjs/index.js",
-  "module": "./lib/module/index.js",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
-    }
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "src",
@@ -42,8 +37,8 @@
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
-    "prepack": "bob build",
-    "release": "release-it"
+    "prepare": "bob build",
+    "release": "release-it --only-version"
   },
   "keywords": [
     "react-native",
@@ -63,11 +58,7 @@
     "type": "git",
     "url": "git+https://github.com/purrseus/react-native-xenon.git"
   },
-  "author": {
-    "name": "Purrseus",
-    "email": "contact@thiendo.dev",
-    "url": "https://github.com/purrseus"
-  },
+  "author": "Purrseus <contact@thiendo.dev> (https://github.com/purrseus)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/purrseus/react-native-xenon/issues"
@@ -76,31 +67,37 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "immer": "^10.1.1",
+    "react-native-url-polyfill": "^2.0.0",
+    "use-immer": "^0.10.0"
+  },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.25.9",
-    "@commitlint/config-conventional": "^17.0.2",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
     "@evilmartians/lefthook": "^1.5.0",
-    "@react-native/eslint-config": "^0.73.1",
+    "@react-native/babel-preset": "0.78.2",
+    "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.44",
-    "commitlint": "^17.0.2",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "18.3.1",
-    "react-native": "0.76.3",
-    "react-native-builder-bob": "^0.33.3",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.10.0",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.40.8",
+    "react-native-safe-area-context": "^5.6.0",
+    "react-native-screens": "^4.14.1",
     "release-it": "^17.10.0",
-    "typescript": "^5.2.2"
-  },
-  "resolutions": {
-    "@types/react": "^18.2.44"
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -111,7 +108,7 @@
   "workspaces": [
     "example"
   ],
-  "packageManager": "yarn@4.9.1",
+  "packageManager": "yarn@4.9.2",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -138,47 +135,20 @@
     "plugins": {
       "@release-it/conventional-changelog": {
         "preset": {
-          "name": "conventionalcommits"
+          "name": "angular"
         }
       }
     }
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "plugin:prettier/recommended"
-    ],
-    "rules": {
-      "curly": "off",
-      "react/react-in-jsx-scope": "off",
-      "no-alert": "error",
-      "no-console": "error",
-      "no-var": "error",
-      "no-duplicate-imports": "error",
-      "max-lines": [
-        "error",
-        {
-          "skipBlankLines": true,
-          "skipComments": true,
-          "max": 500
-        }
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
-    "printWidth": 100,
+    "quoteProps": "consistent",
+    "singleQuote": true,
     "tabWidth": 2,
+    "trailingComma": "all",
     "useTabs": false,
+    "printWidth": 100,
     "semi": true,
-    "singleQuote": true,
-    "quoteProps": "as-needed",
     "jsxSingleQuote": false,
-    "trailingComma": "all",
     "bracketSpacing": true,
     "bracketSameLine": false,
     "arrowParens": "avoid",
@@ -190,13 +160,6 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      [
-        "commonjs",
-        {
-          "esm": true,
-          "configFile": true
-        }
-      ],
       [
         "module",
         {
@@ -207,9 +170,7 @@
       [
         "typescript",
         {
-          "project": "tsconfig.build.json",
-          "esm": true,
-          "configFile": true
+          "project": "tsconfig.build.json"
         }
       ]
     ]
@@ -217,11 +178,6 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "0.44.3"
-  },
-  "dependencies": {
-    "immer": "^10.1.1",
-    "react-native-url-polyfill": "^2.0.0",
-    "use-immer": "^0.10.0"
+    "version": "0.52.1"
   }
 }

package/src/contexts/MainContext.ts

@@ -2,8 +2,10 @@ import { createContext } from 'react';
 import type { Updater } from 'use-immer';
 import type { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import type { DebuggerState } from '../types';
+import type { ScaledSize } from 'react-native';
 
 interface MainContextValue {
+  dimensions: ScaledSize;
   debuggerState: DebuggerState;
   setDebuggerState: Updater<DebuggerState>;
   networkInterceptor: ReturnType<typeof useNetworkInterceptor>;

package/src/core/refs.ts

@@ -1,10 +1,12 @@
 import { createRef } from 'react';
 import type { IndexedStackMethods } from '../ui/components/common/IndexedStack';
+import type { TextInput } from 'react-native';
 
 export enum DebuggerVisibility {
   Hidden = -1,
   Bubble = 0,
   Panel = 1,
+  Search = 2,
 }
 
 export enum PanelState {
@@ -24,6 +26,7 @@ const refs = {
   debugger: createRef<IndexedStackMethods<DebuggerVisibility>>(),
   panel: createRef<IndexedStackMethods<PanelState>>(),
   header: createRef<IndexedStackMethods<HeaderState>>(),
+  searchInput: createRef<TextInput>(),
 };
 
 export default refs;

package/src/interceptors/WebSocketInterceptor.ts

@@ -1,9 +1,10 @@
-import { NativeEventEmitter, type EmitterSubscription } from 'react-native';
-import NativeWebSocketModule from 'react-native/Libraries/WebSocket/NativeWebSocketModule';
+import { NativeEventEmitter, TurboModuleRegistry, type EmitterSubscription } from 'react-native';
 import { frozen, singleton } from '../core/utils';
-import type { WebSocketHandlers } from '../types';
+import type { NativeWebSocket, WebSocketHandlers } from '../types';
 import { NetworkInterceptor } from './NetworkInterceptor';
 
+const NativeWebSocketModule = TurboModuleRegistry.getEnforcing<NativeWebSocket>('WebSocketModule');
+
 const originalWebSocketConnect = NativeWebSocketModule.connect;
 const originalWebSocketSend = NativeWebSocketModule.send;
 const originalWebSocketSendBinary = NativeWebSocketModule.sendBinary;

package/src/theme/icons.ts

@@ -7,6 +7,8 @@ const icons = Object.freeze({
   share: require('../assets/icons/share.png'),
   arrowLeft: require('../assets/icons/arrow-left.png'),
   beautify: require('../assets/icons/beautify.png'),
+  search: require('../assets/icons/search.png'),
+  close: require('../assets/icons/close.png'),
 });
 
 export default icons;

package/src/types/common.ts

@@ -24,6 +24,7 @@ export type DetailTab = 'overview' | 'headers' | 'request' | 'response' | 'messa
 
 export interface DebuggerState {
   position: 'top' | 'bottom';
+  searchQuery: string;
   detailsData:
     | {
         type: DebuggerPanel.Network;

package/src/types/websocket.ts

@@ -1,3 +1,4 @@
+import type { TurboModule } from 'react-native';
 import type { NetworkRequest, NetworkType } from './common';
 
 export interface WebSocketRequest extends NetworkRequest {
@@ -30,3 +31,18 @@ export interface WebSocketHandlers {
   onError: ((socketId: number, error: WebSocketRequest['serverError']) => void) | null;
   onClose: ((socketId: number, data: WebSocketRequest['serverClose']) => void) | null;
 }
+
+export interface NativeWebSocket extends TurboModule {
+  connect: (
+    url: string,
+    protocols?: Array<string>,
+    options?: WebSocketRequest['options'],
+    socketID?: number,
+  ) => void;
+  send: (message: string, forSocketID: number) => void;
+  sendBinary: (base64String: string, forSocketID: number) => void;
+  ping: (socketID: number) => void;
+  close: (code: number, reason: string, socketID: number) => void;
+  addListener: (eventName: string) => void;
+  removeListeners: (count: number) => void;
+}

package/src/ui/Xenon.tsx

@@ -1,15 +1,13 @@
 import { enableMapSet } from 'immer';
-import { createRef, memo, useImperativeHandle, useMemo, type JSX, type ReactNode } from 'react';
-import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { createRef, memo, useImperativeHandle, type JSX, type ReactNode } from 'react';
+import { Platform, useWindowDimensions } from 'react-native';
 import { FullWindowOverlay } from 'react-native-screens';
 import { useImmer } from 'use-immer';
 import { MainContext } from '../contexts';
 import refs, { DebuggerVisibility } from '../core/refs';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
-import colors from '../theme/colors';
 import { type DebuggerState } from '../types';
-import { Bubble, Header, IndexedStack, Panel } from './components';
+import { Bubble, IndexedStack, Panel, SearchBar } from './components';
 
 namespace Xenon {
   interface Methods {
@@ -59,23 +57,6 @@ namespace Xenon {
   enableMapSet();
   const ref = createRef<Methods>();
 
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      ...StyleSheet.absoluteFillObject,
-      pointerEvents: 'box-none',
-      top: undefined,
-      bottom: undefined,
-      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
-      backgroundColor: colors.lightGray,
-      borderBottomColor: colors.gray,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-    safeArea: {
-      flex: 1,
-    },
-  });
-
   /**
    * Checks whether the debugger is currently visible.
    * @returns `true` if the debugger is currently visible, otherwise `false`.
@@ -102,21 +83,14 @@ namespace Xenon {
       idleBubbleOpacity = 0.5,
       includeDomains,
     }: Props) => {
-      const { width, height } = useWindowDimensions();
+      const dimensions = useWindowDimensions();
 
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
         position: 'bottom',
         detailsData: null,
+        searchQuery: '',
       });
 
-      const containerStyle = useMemo(
-        () => [
-          styles.container,
-          { [debuggerState.position]: 0, height: Math.min(width, height) * 0.75 },
-        ],
-        [debuggerState.position, height, width],
-      );
-
       const networkInterceptor = useNetworkInterceptor({
         autoEnabled: autoInspectNetworkEnabled,
         includeDomains,
@@ -150,24 +124,20 @@ namespace Xenon {
 
       return (
         <MainContext.Provider
-          value={{ debuggerState, setDebuggerState, networkInterceptor, consoleInterceptor }}
+          value={{
+            dimensions,
+            debuggerState,
+            setDebuggerState,
+            networkInterceptor,
+            consoleInterceptor,
+          }}
         >
           <IndexedStack defaultIndex={DebuggerVisibility.Hidden} id="debugger" ref={refs.debugger}>
-            <Bubble
-              bubbleSize={bubbleSize}
-              idleBubbleOpacity={idleBubbleOpacity}
-              screenWidth={width}
-              screenHeight={height}
-            />
-
-            <View style={containerStyle}>
-              <SafeAreaProvider>
-                <SafeAreaView style={styles.safeArea}>
-                  <Header />
-                  <Panel />
-                </SafeAreaView>
-              </SafeAreaProvider>
-            </View>
+            <Bubble bubbleSize={bubbleSize} idleBubbleOpacity={idleBubbleOpacity} />
+
+            <Panel />
+
+            <SearchBar />
           </IndexedStack>
         </MainContext.Provider>
       );

package/src/ui/components/bubble/Bubble.tsx

@@ -1,29 +1,29 @@
-import { forwardRef, useMemo, useRef, useState } from 'react';
+import { forwardRef, useContext, useMemo, useRef, useState } from 'react';
 import {
   Animated,
   PanResponder,
   StyleSheet,
   View,
   type PanResponderGestureState,
-  type StyleProp,
-  type ViewStyle,
+  type ViewProps,
 } from 'react-native';
+import { MainContext } from '../../../contexts';
 import refs, { DebuggerVisibility } from '../../../core/refs';
 import { clamp, getVerticalSafeMargin } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import icons from '../../../theme/icons';
 import Icon from '../common/Icon';
 
-interface BubbleProps {
+interface BubbleProps extends ViewProps {
   bubbleSize: number;
   idleBubbleOpacity: number;
-  screenWidth: number;
-  screenHeight: number;
-  style?: StyleProp<ViewStyle>;
 }
 
 const Bubble = forwardRef<View, BubbleProps>(
-  ({ bubbleSize, idleBubbleOpacity, screenWidth, screenHeight, style }, ref) => {
+  ({ bubbleSize, idleBubbleOpacity, style, ...props }, ref) => {
+    const {
+      dimensions: { width: screenWidth, height: screenHeight },
+    } = useContext(MainContext)!;
     const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
     const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
     const opacityTimer = useRef<NodeJS.Timeout | null>(null);
@@ -97,7 +97,7 @@ const Bubble = forwardRef<View, BubbleProps>(
     }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
 
     return (
-      <View ref={ref} style={[styles.bubbleBackdrop, style]}>
+      <View ref={ref} style={[styles.bubbleBackdrop, style]} {...props}>
         <Animated.View
           {...panResponder.panHandlers}
           style={[

package/src/ui/components/common/SafeArea.tsx

@@ -0,0 +1,10 @@
+import { View } from 'react-native';
+import { useSafeAreaInsets, type EdgeInsets } from 'react-native-safe-area-context';
+
+export default function SafeArea({
+  inset,
+}: {
+  inset: Extract<keyof EdgeInsets, 'top' | 'bottom'>;
+}) {
+  return <View style={{ height: useSafeAreaInsets()[inset] }} />;
+}

package/src/ui/components/common/Touchable.tsx

@@ -1,20 +1,10 @@
-import { TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';
+import { TouchableOpacity, type TouchableOpacityProps } from 'react-native';
 
-interface TouchableProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  activeOpacity?: number;
-  style?: StyleProp<ViewStyle>;
-}
+interface TouchableProps extends TouchableOpacityProps {}
 
-export default function Touchable({
-  onPress,
-  children,
-  activeOpacity = 0.8,
-  style,
-}: TouchableProps) {
+export default function Touchable({ children, activeOpacity = 0.8, ...props }: TouchableProps) {
   return (
-    <TouchableOpacity onPress={onPress} activeOpacity={activeOpacity} style={style}>
+    <TouchableOpacity activeOpacity={activeOpacity} {...props}>
       {children}
     </TouchableOpacity>
   );

package/src/ui/components/details/LogMessageDetails.tsx

@@ -21,6 +21,7 @@ const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle>
           { backgroundColor: getConsoleTypeColor(item?.type ?? '') },
           style,
         ]}
+        contentContainerStyle={styles.contentContainer}
       >
         <Text style={styles.text}>{formatLogMessage(item?.values ?? [])}</Text>
       </ScrollView>
@@ -31,6 +32,8 @@ const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle>
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  contentContainer: {
     padding: 8,
   },
   text: {

package/src/ui/components/headers/ConsoleHeader.tsx

@@ -16,7 +16,7 @@ const ConsoleHeader = forwardRef<ScrollView, ConsoleHeaderProps>(
         <HeaderComponents.Back selectedPanel={selectedPanel} />
         <HeaderComponents.MainButtons />
         <Divider type="vertical" />
-        <HeaderComponents.TabItem tab="logMessage" label="Console" />
+        <HeaderComponents.DetailTabItem tab="logMessage" label="Console" />
       </HeaderComponents.Wrapper>
     );
   },

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext } from 'react';
 import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { PanelState } from '../../../core/refs';
+import refs, { DebuggerVisibility, PanelState } from '../../../core/refs';
 import icons from '../../../theme/icons';
 import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
@@ -38,8 +38,15 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         : consoleInterceptor.enableInterception();
     };
 
+    const onShowSearchInput = () => {
+      refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Search);
+      refs.searchInput.current?.focus();
+    };
+
     return (
       <HeaderComponents.Wrapper ref={ref} style={style}>
+        <DebuggerHeaderItem onPress={onShowSearchInput} content={icons.search} />
+
         <HeaderComponents.MainButtons />
 
         <Divider type="vertical" />

package/src/ui/components/headers/HeaderComponents.tsx

@@ -24,7 +24,7 @@ const Back = ({ selectedPanel }: { selectedPanel: PanelState }) => {
   );
 };
 
-const TabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
+const DetailTabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
   const {
     debuggerState: { detailsData },
     setDebuggerState,
@@ -95,6 +95,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const HeaderComponents = { Back, TabItem, MainButtons, Wrapper };
+const HeaderComponents = { Back, DetailTabItem, MainButtons, Wrapper };
 
 export default HeaderComponents;

package/src/ui/components/headers/NetworkHeader.tsx

@@ -34,11 +34,11 @@ const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
 
         <Divider type="vertical" />
 
-        {!!overviewShown && <HeaderComponents.TabItem tab="overview" label="Overview" />}
-        {!!headersShown && <HeaderComponents.TabItem tab="headers" label="Headers" />}
-        {!!requestShown && <HeaderComponents.TabItem tab="request" label="Request" />}
-        {!!responseShown && <HeaderComponents.TabItem tab="response" label="Response" />}
-        {!!messagesShown && <HeaderComponents.TabItem tab="messages" label="Messages" />}
+        {!!overviewShown && <HeaderComponents.DetailTabItem tab="overview" label="Overview" />}
+        {!!headersShown && <HeaderComponents.DetailTabItem tab="headers" label="Headers" />}
+        {!!requestShown && <HeaderComponents.DetailTabItem tab="request" label="Request" />}
+        {!!responseShown && <HeaderComponents.DetailTabItem tab="response" label="Response" />}
+        {!!messagesShown && <HeaderComponents.DetailTabItem tab="messages" label="Messages" />}
 
         {!isWS && (
           <>

package/src/ui/components/index.ts

@@ -1,4 +1,4 @@
 export { default as Bubble } from './bubble/Bubble';
-export { default as Header } from './headers/Header';
-export { default as Panel } from './panels/Panel';
 export { default as IndexedStack } from './common/IndexedStack';
+export { default as Panel } from './panels/Panel';
+export { default as SearchBar } from './search-bar/SearchBar';

package/src/ui/components/panels/ConsolePanel.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useContext } from 'react';
+import { forwardRef, useCallback, useContext, useMemo } from 'react';
 import {
   FlatList,
   StyleSheet,
@@ -11,15 +11,31 @@ import { MainContext } from '../../../contexts';
 import { DebuggerPanel, type LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
 import refs, { HeaderState, PanelState } from '../../../core/refs';
+import { formatLogMessage } from '../../../core/utils';
 
 const Separator = () => <View style={styles.divider} />;
 
 const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
+    debuggerState: { searchQuery },
     consoleInterceptor: { logMessages },
     setDebuggerState,
   } = useContext(MainContext)!;
 
+  const data = useMemo(() => {
+    let result = [...logMessages];
+
+    if (searchQuery) {
+      result = logMessages.filter(item =>
+        formatLogMessage(item?.values ?? [])
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase()),
+      );
+    }
+
+    return result.reverse();
+  }, [logMessages, searchQuery]);
+
   const renderItem = useCallback<ListRenderItem<LogMessage>>(
     ({ item }) => (
       <ConsolePanelItem
@@ -45,7 +61,7 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     <FlatList
       ref={ref}
       inverted
-      data={[...logMessages].reverse()}
+      data={data}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
       ItemSeparatorComponent={Separator}