react-native-network-inspector

React Native network inspector – intercept and inspect HTTP/XHR requests. This package exports only the core API and hooks; you build your own UI.

Installation

yarn add react-native-network-inspector

Peer dependencies: react, react-native.

Demo

This is how captured requests can be viewed in your own UI.

1. Base code (default options) — intercept and display all requests:

const { requests, isActive, start, stop } = useNetworkRequests();
// Render your list with requests; start() / stop() to begin or end capture.

2. With options — e.g. ignore a host so it does not appear in the list:

const { requests, isActive, start, stop } = useNetworkRequests({
  ignoredHosts: ["10.0.2.2"],
});

Usage

Imperative API

import { getNetworkInspector } from "react-native-network-inspector";

const inspector = getNetworkInspector();

// Start intercepting (optional filter options)
inspector.start({
  maxRequests: 500,
  refreshRate: 50,
  ignoredHosts: ["analytics.example.com"],
  ignoredUrls: ["https://example.com/ignore"],
  ignoredPatterns: [/^GET https:\/\/api\.example\.com\/health/],
  onRequestsChange: (requests) => {
    console.log(requests.length);
  },
});

// Read current requests
const requests = inspector.getRequests();

// Stop intercepting
inspector.stop();

// Clear the in-memory list (logging can stay active)
inspector.clear();

React hook

Use the hook to drive your own UI (list, detail, filters).

import { useNetworkRequests } from "react-native-network-inspector";

function MyNetworkScreen() {
  const { requests, isActive, start, stop, clear } = useNetworkRequests({
    ignoredHosts: ["analytics.example.com"],
  });

  return (
    <View>
      <Button
        title={isActive ? "Stop" : "Start"}
        onPress={isActive ? stop : start}
      />
      <Button title="Clear" onPress={clear} />
      <FlatList
        data={requests}
        keyExtractor={(r) => r.id}
        renderItem={({ item }) => (
          <Text>
            {item.method} {item.url} {item.status}
          </Text>
        )}
      />
    </View>
  );
}

Filter options (NetworkInspectorOptions)

Option	Type	Description
maxRequests	number	Max requests to keep (default 500)
refreshRate	number	Notify interval in ms (default 50)
ignoredHosts	string[]	Blocklist by host, e.g. ['api.analytics.com']
ignoredUrls	string[]	Blocklist by full URL
ignoredPatterns	RegExp[]	Blocklist by pattern; match target is `${method} ${url}`
forceEnable	boolean	Force start even if another interceptor is active
onRequestsChange	(requests) => void	Callback when requests update (e.g. for non-React usage)

API reference

Everything you need to build your UI is below. Requests are plain objects/class instances with the listed properties and methods.

---

getNetworkInspector(): NetworkInspector

Returns the singleton network inspector. Use it for the imperative API (no React).

import { getNetworkInspector } from "react-native-network-inspector";
const inspector = getNetworkInspector();

---

NetworkInspector (class)

Method / property	Signature	Description
start	(options?: NetworkInspectorOptions) => void	Start intercepting. No-op if already active.
stop	() => void	Stop intercepting and clear internal XHR mapping.
getRequests	() => NetworkRequest[]	Current list of requests (newest first). Returns a copy.
clear	() => void	Clear the in-memory request list. Interception can stay active.
subscribe	(listener: (requests: NetworkRequest[]) => void) => () => void	Subscribe to request updates. Returns an unsubscribe function.
enabled	boolean	Whether interception is currently active.

---

useNetworkRequests(options?: NetworkInspectorOptions): UseNetworkRequestsResult

React hook to drive your UI. Options are the same as NetworkInspectorOptions (filters, maxRequests, refreshRate, etc.).

Returns:

Property / method	Type	Description
requests	NetworkRequest[]	Current list of requests (newest first).
isActive	boolean	Whether interception is active.
start	() => void	Start intercepting (uses options passed to the hook).
stop	() => void	Stop intercepting.
clear	() => void	Clear the request list.

---

NetworkRequest (class instance)

Each item in requests (from getRequests() or the hook) is a NetworkRequest with these members. Use them to render list rows, detail screens, copy-as-curl, etc.

Properties (read-only unless noted):

Property	Type	Description
id	string	Unique id for the request.
type	string	e.g. 'XMLHttpRequest'.
url	string	Request URL.
method	RequestMethod	'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'.
status	number	HTTP status (e.g. 200). -1 until response.
dataSent	string	Raw request body as sent.
responseContentType	string	Response Content-Type header value.
responseSize	number	Response size (when available).
requestHeaders	Headers	Request headers { [name: string]: string }.
responseHeaders	Headers	Response headers { [name: string]: string }.
response	string	Raw response (or blob reference). Prefer getResponseBody() for body text.
responseURL	string	Final response URL (after redirects).
responseType	string	e.g. 'text', 'blob'.
timeout	number	Timeout value.
startTime	number	Timestamp when request started.
endTime	number	Timestamp when request finished.
updatedAt	number	Last update timestamp.
duration	number (getter)	Math.max(0, endTime - startTime) in ms.
curlRequest	string (getter)	Approximate curl command for the request.

Methods:

Method	Signature	Description
getRequestBody	(replaceEscaped?: boolean) => string	Request body. If replaceEscaped === true, unescapes \\n and \\" for display.
getResponseBody	() => Promise<string>	Response body as text. For blob responses, reads the blob and resolves with text. Rejects on read error.
update	(values: Partial<NetworkRequest>) => void	Update mutable fields (internal use; you typically only read).

---

Types

• NetworkInspectorOptions — Options for inspector.start(options) and useNetworkRequests(options). See Filter options table.
• UseNetworkRequestsResult — Return type of useNetworkRequests(): { requests, isActive, start, stop, clear }.
• NetworkRequestShape — Interface describing a request (same shape as NetworkRequest instances).
• Headers — { [header: string]: string }.
• RequestMethod — 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'.

Exports

• Functions: getNetworkInspector()
• Classes: NetworkInspector, NetworkRequest
• Hook: useNetworkRequests(options?)
• Types: NetworkRequest, NetworkInspectorOptions, NetworkRequestShape, UseNetworkRequestsResult, Headers, RequestMethod

Development

From the package root:

yarn install
yarn build

Compatibility

• React: 16.8+
• React Native: The package resolves XHRInterceptor and BlobFileReaderInterceptor via fallbacks:
  • 0.79+: uses private API paths (react-native/src/private/...).
  • 0.72 and earlier: uses public path (react-native/Libraries/Network/XHRInterceptor, Libraries/Blob/...).

If a future React Native version moves or changes these internal APIs, compatibility may need a patch.

License

MIT