React Native API Debugger

A comprehensive network request debugging tool for React Native applications. Monitor, inspect, and debug all your app's network requests with an intuitive overlay interface.

Features

• Real-time Network Monitoring - Automatically intercepts all fetch() and XMLHttpRequest calls
• Overlay Interface - Non-intrusive floating button and modal interface
• Request Details - View headers, body, response, timing, and status codes
• cURL Generation - Copy requests as cURL commands for debugging
• Request Filtering - Search and filter by URL, method, or API endpoints
• Error Tracking - Easily identify failed requests and network errors
• Device Shake Support - Optional shake-to-show functionality

Installation

npm install react-native-api-debugger

Peer Dependencies

This package requires the following peer dependencies:

npm install @react-native-clipboard/clipboard react-native-shake

Quick Start

Basic Usage

import React, { useEffect } from 'react';
import { View } from 'react-native';
import { networkLogger, NetworkLoggerOverlay } from 'react-native-api-debugger';

export default function App() {
  useEffect(() => {
    // Initialize the network logger
    networkLogger.setupInterceptor();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* Your app content */}
      
      {/* Add the network logger overlay */}
      <NetworkLoggerOverlay networkLogger={networkLogger} />
    </View>
  );
}

With Device Shake Support

import React, { useEffect } from 'react';
import { View } from 'react-native';
import { networkLogger, NetworkLoggerOverlay } from 'react-native-api-debugger';

export default function App() {
  useEffect(() => {
    networkLogger.setupInterceptor();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* Your app content */}
      
      {/* Enable shake-to-show functionality */}
      <NetworkLoggerOverlay 
        networkLogger={networkLogger} 
        enableDeviceShake={true}
      />
    </View>
  );
}

NetworkLoggerOverlay

The UI component that displays the network logs.

Props

Prop	Type	Default	Description
networkLogger	NetworkLogger	Required	The network logger instance
enableDeviceShake	boolean	false	Enable shake-to-show functionality

Example

<NetworkLoggerOverlay 
  networkLogger={networkLogger}
  enableDeviceShake={true}
/>

Types

The package exports TypeScript types for better development experience:

import type { 
  NetworkLog, 
  NetworkResponse, 
  NetworkRequestHeaders,
  LogListener 
} from 'react-native-api-debugger';

Usage Examples

Development vs Production

import { networkLogger, NetworkLoggerOverlay } from 'react-native-api-debugger';

export default function App() {
  useEffect(() => {
    // Only enable in development
    if (__DEV__) {
      networkLogger.setupInterceptor();
    }
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* Your app content */}
      
      {/* Only show in development */}
      {__DEV__ && (
        <NetworkLoggerOverlay 
          networkLogger={networkLogger}
          enableDeviceShake={true}
        />
      )}
    </View>
  );
}

Best Practices

1. Development Only

// Only enable in development builds
if (__DEV__) {
  networkLogger.setupInterceptor();
}

2. Memory Management

The logger automatically limits stored requests to prevent memory issues:

• Maximum 100 requests stored
• Oldest requests are automatically removed

3. Sensitive Data

Be cautious with sensitive data in network requests:

• The logger captures all headers and request/response bodies
• Consider disabling in production builds
• Review logged data before sharing screenshots

TypeScript Errors

1. Ensure you're importing types correctly:

import type { NetworkLog } from 'react-native-api-logger';

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE file for details.

Support

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• 📖 Documentation: Wiki

---

Made with ❤️ for React Native developers

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