react-native-network-tools

A powerful React Native library that allows you to track and inspect all network requests in your app. Perfect for debugging, monitoring, and understanding your app's network behavior.

Features

• 🔍 Automatic Request Tracking: Captures all OkHttp network requests automatically
• 🐛 Debug-Only: Zero overhead in production builds (only active in debug mode)
• 📊 Detailed Information: Captures request/response headers, bodies, timing, and errors
• 💾 In-Memory Storage: Stores up to 100 recent requests with automatic cleanup
• 🔒 Thread-Safe: Built with concurrent data structures for reliability
• ⚡ Easy Integration: Simple API with minimal setup required

Installation

npm install react-native-network-tools
# or
yarn add react-native-network-tools

If you use Expo Development Builds, add the plugin to app.json:

{
  "expo": {
    "plugins": ["react-native-network-tools"]
  }
}

Quick Start

1a. Configure OkHttpClient (Android)

Add the interceptor to your MainApplication.kt:

import com.facebook.react.modules.network.NetworkingModule
import com.networktools.NetworkToolsManager
import okhttp3.OkHttpClient

class MainApplication : Application(), ReactApplication {

  override fun onCreate() {
    super.onCreate()

    if (BuildConfig.DEBUG) {
      NetworkingModule.setCustomClientBuilder(
        object : NetworkingModule.CustomClientBuilder {
          override fun apply(builder: OkHttpClient.Builder) {
            NetworkToolsManager.addInterceptor(builder)
          }
        }
      )
    }

    // rest code
  }
}

1b. Register the URLProtocol interceptor (iOS)

Add the activation call to your AppDelegate.swift:

import NetworkTools

func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
) -> Bool {
  #if DEBUG
  NetworkToolsManager.activate()
  #endif

  // rest of your setup
  return true
}

For Objective-C AppDelegate.mm:

#import <NetworkTools/NetworkToolsManager.h>

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#if DEBUG
  [NetworkToolsManager activate];
#endif
  // rest of your setup
  return YES;
}

If you use Expo, the plugin patches both MainApplication and AppDelegate automatically during expo prebuild — no manual steps needed.

2. Wrap Your App with NetworkMonitorProvider

import { NetworkMonitorProvider } from 'react-native-network-tools';

function App() {
  return (
    <NetworkMonitorProvider
      maxRequests={1000}
      showFloatingMonitor={true}
    >
      {/* Your app code */}
    </NetworkMonitorProvider>
  );
}

3. View Network Requests

import * as NetworkTools from 'react-native-network-tools';

// Get all requests
const requests = NetworkTools.getAllRequests();

// Get specific request
const request = NetworkTools.getRequestById('request-id');

// Clear all requests
NetworkTools.clearAllRequests();

// Get request count
const count = NetworkTools.getRequestCount();

API Reference

getAllRequests(): NetworkRequest[]

Get all captured network requests.

getRequestById(id: string): NetworkRequest | null

Get a specific network request by its unique ID.

clearAllRequests(): void

Clear all stored network requests from memory.

getRequestCount(): number

Get the total count of stored network requests.

isNativeNetworkToolsAvailable(): boolean

Detect if the native module is available at runtime.

getNetworkToolsRuntime(): 'turbo' | 'legacy' | 'unavailable'

Detect whether the module is running over TurboModule, legacy bridge, or is unavailable.

NetworkRequest Type

interface NetworkRequest {
  id: string;
  url: string;
  method: string;
  requestHeaders: Record<string, string>;
  requestBody?: string;
  requestTime: number;
  responseCode?: number;
  responseHeaders?: Record<string, string>;
  responseBody?: string;
  responseTime?: number;
  duration?: number;
  error?: string;
}

Build Configuration

The library automatically enables tracking only in debug builds. You can customize this behavior:

buildTypes {
  debug {
    buildConfigField "boolean", "NETWORK_TOOLS_ENABLED", "true"
  }
  staging {
    buildConfigField "boolean", "NETWORK_TOOLS_ENABLED", "true"
  }
  release {
    buildConfigField "boolean", "NETWORK_TOOLS_ENABLED", "false"
  }
}

Advanced Usage

For detailed setup instructions, custom configurations, and advanced usage patterns, see the Setup Guide. For Expo validation, see the Expo smoke test.

Platform Support

| Platform / Runtime | Status | Notes | | --- | --- | --- | | React Native Android (New Architecture) | ✅ Supported | TurboModule path | | React Native Android (Old Architecture) | ✅ Supported | Legacy bridge fallback | | React Native iOS (New Architecture) | ✅ Supported | URLProtocol + TurboModule | | React Native iOS (Old Architecture) | ✅ Supported | URLProtocol + legacy bridge | | Expo Development Build + Prebuild (Android + iOS) | ✅ Supported | Config plugin patches both platforms | | Expo Go | ❌ Not supported | Native interception requires a dev build |

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