React Native Debug Logger 🚀

A premium, high-performance debug monitor and network logger for React Native applications. Intercept Network requests (Fetch, XHR, Axios) and track logs with a beautiful hidden UI.

Zero forced dependencies. Works with any storage engine (MMKV, AsyncStorage, Realm, etc.).

Features ✨

• 🛠 Universal Network Monitoring: Automatically intercepts fetch and XMLHttpRequest.
• 📦 Optional Axios Support: Move beyond standard interceptors. Works only if you have Axios.
• 📱 Premium UI: Dark-themed, glassmorphic design for the debug console.
• 🔍 Advanced Filtering: Search by URL, Method, or Filter by log type (Request, Response, Error).
• 🔐 Secure Access: Clicks-based hidden trigger with optional password protection.
• 🧪 Dynamic Security: isEnabled and checkAccess props for role-based debugging.
• 📤 Log Export: Share entire log history via native share sheet.
• 🌐 Flexible Environment Switcher: Built-in toggle that works with ANY storage solution.

Installation 📥

npm install react-native-debug-logger

Usage 🛠

⚡️ Quickest Setup (Automatic)

Just wrap your main app entry (or any component) with DebugTrigger. That's it! Everything — including network monitoring — is automatically configured and works in Release mode.

import { DebugTrigger } from 'react-native-debug-logger';

const App = () => {
  return (
    <DebugTrigger>
      <MainApp />
    </DebugTrigger>
  );
};

---

🎨 Custom Configuration (All Optional)

Prop	Type	Default	Description
clicksNeeded	number	5	Clicks to reveal the password modal
password	string	'2024'	Secret password to access the monitor (Set null for none)
isDemo	boolean	false	Initial environment state
enabled	boolean	true	Completely enable/disable the trigger
checkAccess	function	-	Sync/Async function to verify permission
onEnvChange	function	-	Optional switcher (if provided, shows toggle)

🔘 Persistent Floating Button

Once the debug menu is opened for the first time (via clicks/password), a small DEBUG button will appear on the screen (fixed position). This allows you to quickly re-open the menu while navigating through different pages and testing requests. To hide it, use the "Xitam ver" button inside the debug menu header.

<DebugTrigger 
  password="ADMIN_PASSWORD"
  clicksNeeded={10}
  onEnvChange={(newEnv) => {
    // optional: handle environment toggles
    Storage.set('api_env', newEnv);
  }}
>
  <YourApp />
</DebugTrigger>

🔬 Manual Setup (Optional)

If you only want the logger without the UI trigger, or need it to start before your UI renders, call setupNetworkMonitor manually in index.js. It's safe to call multiple times.

import { setupNetworkMonitor } from 'react-native-debug-logger';

setupNetworkMonitor();

API Reference 📚

DebugTrigger

Prop	Type	Default	Description
clicksNeeded	number	5	Clicks to reveal the password modal
password	string	'2024'	Secret password to access the monitor
isDemo	boolean	false	Current environment state
enabled	boolean	true	Completely enable/disable the trigger
checkAccess	function	-	Sync/Async function to verify user permission
onEnvChange	function	-	Callback when environment is toggled

Logger

Manual logging if needed:

import { Logger } from 'react-native-debug-logger';

Logger.logRequest({ url: '...', method: 'POST', data: { ... } });
Logger.logResponse({ status: 200, data: { ... } });
Logger.logError({ message: 'Something went wrong' });

---

Support & Donation ☕️

If this library has been helpful to you, consider supporting its development! Your contributions help maintain the project and introduce new features.

Scan the QR code to support:

Buy me a coffee on kofe.al ☕️

---

Created with ❤️ by Alijanov