react-native-vconsole

vconsole

Installation

npm install react-native-vconsole

Usage

import { VConsole } from 'react-native-vconsole';

export default function App() {
  return (
    <>
      {/* your app content */}
      <VConsole
        enable={true}
        autoFollow={true}
        exclude={{
          domains: ['localhost:8081'],
          ip: true,
        }}
      />
    </>
  );
}

VConsole Props

Prop	Type	Default	Description
enable	boolean	true	Whether to enable and render vConsole.
autoFollow	boolean	true	Whether Log/Network lists auto-scroll to bottom on first open and when new entries arrive while follow mode is active.
exclude	{ domains?: string[]; ip?: boolean }	{}	Network capture exclusion rules.
exclude.domains	string[]	[]	Hosts to exclude from Network tab capture, keeping previous host-based matching behavior (e.g. localhost:8081).
exclude.ip	boolean	false	When true, requests whose hostname is an IP address (IPv4/IPv6) will be skipped in Network tab capture.

Features

• Draggable floating button (vConsole) with screen-boundary constraints.
• Bottom sheet panel (7/9 screen height) with Log / Network / System / App tabs.
• Log tab captures console.log/info/warn/error without breaking original console behavior.
• Log tab supports keyword filter (debounced) across log text content.
• Network tab captures XMLHttpRequest requests/responses without breaking original request behavior.
• Network tab supports Retry, which replays a request with the original method/url/headers/body (excluding unsafe forbidden headers).
• Network tab supports keyword filter (debounced) by request URL.
• autoFollow controls Log/Network bottom-follow behavior: on first open it scrolls to bottom, new entries auto-follow only when follow mode is active, dragging away from bottom pauses follow, and scrolling back to bottom or tapping Bottom re-enables follow (autoFollow must be true).
• System/App tabs read info from native module bridges (NativeModules.Vconsole).

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library