A Rozenite plugin that provides comprehensive network activity monitoring for React Native applications.

For agents, this plugin is the fallback network domain when the built-in network domain is unavailable, such as on older React Native versions. Agents should prefer the built-in network domain first, and switch to @rozenite/network-activity-plugin only if network is missing or fails to initialize.

The Rozenite Network Activity Plugin provides real-time network request monitoring, detailed request/response inspection within your React Native DevTools environment. It offers comprehensive network debugging capabilities similar to browser DevTools Network panel.

Nitro Support

The plugin now integrates with react-native-nitro-fetch when it is installed in your app.

• Nitro HTTP traffic is shown in the same Network Activity panel as built-in React Native requests
• Nitro WebSocket traffic is supported through the nitro network inspector event stream
• Requests are labeled with a source badge in the list and details view: Built-in or Nitro
• Response body lookup works for both built-in and nitro HTTP entries
• HTTP response overrides remain built-in only and are disabled for nitro entries

Expo Fetch Support

The plugin optionally observes expo/fetch on Expo SDK 54 and newer. Expo requests appear in the same panel with an Expo source badge, including when SDK 56+ installs Expo fetch as the default global fetch implementation.

On SDK 54–55, response bodies can only be captured after the application consumes them with the usual body helpers (such as text() or json()). Unconsumed and directly streamed bodies remain unavailable; the request itself is still recorded normally. Expo response overrides are not supported.

Features

• Real-time Network Monitoring: Track all HTTP/HTTPS requests in real-time
• Request Details: View request headers, method, URL, and timing information
• Response Inspection: Examine response headers, status codes, and timing data
• Performance Analysis: Analyze request duration, connection timing, and performance metrics
• Request History: Maintain a searchable history of network activity
• Nitro Integration: Merge react-native-nitro-fetch traffic into the same inspector when available
• Chrome DevTools Protocol: Built on CDP for accurate network event capture
• Production Safety: Automatically disabled in production builds

Installation

Install the Network Activity plugin as a dependency:

npm install @rozenite/network-activity-plugin

Optional nitro integration:

npm install react-native-nitro-fetch

Quick Start

1. Install the Plugin

npm install @rozenite/network-activity-plugin

2. Integrate with Your App

Add the DevTools hook to your React Native app:

// App.tsx
import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';

function App() {
  // Enable Network Activity DevTools in development
  useNetworkActivityDevTools();

  return <YourApp />;
}

Optional: To capture network requests before your React Native app initialization, add this to your entrypoint:

// index.js
import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';

withOnBootNetworkActivityRecording();

3. Access DevTools

Start your development server and open React Native DevTools. You'll find the "Network Activity" panel in the DevTools interface.

Notes and Limitations

• Built-in React Native inspectors still only capture traffic coming from the JavaScript thread
• When react-native-nitro-fetch is installed, the plugin also listens to nitro's network inspector and shows that traffic in the same panel
• Native traffic from other networking stacks that do not expose compatible inspector events will not appear automatically
• Nitro HTTP entries support response body inspection, but response overriding is not available for them

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥