react-native-network-devtools

Zero-setup network inspector for React Native — like Chrome's network tab, powered by WebSocket.

No Flipper. No native setup. No certificates. Just 3 lines of code.

Install

npm install --save-dev react-native-network-devtools
# or
yarn add -D react-native-network-devtools

Usage

1. Wire into your axios instance

import NetworkLogger from 'react-native-network-devtools';

// request interceptor
NetworkLogger.addRequest(config);
return config;

// response interceptor (success)
NetworkLogger.addResponse(response);
return response;

// response interceptor (error)
return NetworkLogger.addError(error);

If you encrypt request bodies before passing to axios, attach the original body as config.__plainBody = originalData so the inspector shows readable JSON instead of encrypted bytes.

2. Start the dashboard

npx react-native-network-devtools
# or shorthand
npx rndevtools

This starts the server and auto-opens http://localhost:3737 in your browser.

How it works

RN App  ──WebSocket──▶  Node server  ──WebSocket──▶  Browser dashboard
        (10.0.2.2:3738)  (localhost)   (localhost:3738)

• The Node server acts as a relay between the app and the browser
• All __DEV__ guards are inside the package — zero impact on production builds

Platform host mapping

| Platform | WebSocket host | |------------------|----------------| | Android emulator | 10.0.2.2 | | iOS simulator | localhost |

The package auto-detects Android vs iOS via Platform.OS.

Custom ports

RNI_PORT=4000 RNI_WS_PORT=4001 npx rndevtools

License

MIT