@omeratt/rn-net-vision

License npm package

A lightweight native module for React Native that provides real-time network monitoring and debugging through an intuitive web interface. Inspect HTTP/HTTPS requests, analyze responses, and troubleshoot API issues with ease - all within your development environment.

Features

🔍 Real-time HTTP/HTTPS request inspection
📊 Detailed request and response analysis
🚀 Low-overhead performance impact
🌐 User-friendly web interface
📱 Works with iOS and Android
🔄 Automatic request/response body parsing
⚡ Metro integration for seamless development

Screenshots

Installation

Using npm

npm install @omeratt/rn-net-vision --save-dev

Using yarn

yarn add @omeratt/rn-net-vision --dev

Setup

NetVision requires a few configuration steps to work properly in your React Native project:

1. Configure Metro

You need to update your metro.config.js file to include the NetVision middleware. This allows NetVision to intercept and monitor network requests.

// metro.config.js
const { getDefaultConfig } = require('@react-native/metro-config');
const { withNetVision } = require('@omeratt/rn-net-vision/metro');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 */
const config = getDefaultConfig(__dirname);

// Apply NetVision middleware to Metro
module.exports = withNetVision(config, __dirname);

2. Add the hook to your App component

Import and use the useNetVision hook in your main App component:

// App.js or App.tsx
import { useNetVision } from '@omeratt/rn-net-vision';
import React from 'react';
import { View, Text } from 'react-native';

function App() {
  // Initialize NetVision at the root of your app
  useNetVision();

  return (
    <View>
      <Text>Your App</Text>
    </View>
  );
}

export default App;

Usage

Once NetVision is set up, you can access your network debugging interface through:

Dev menu: When you shake your device or press Cmd+D (iOS simulator) or Cmd+M (Android emulator), you'll see the option "🕵️ Start NetVision" in the developer menu.
Automatic monitoring: With the useNetVision hook in place, all network requests will be automatically monitored, and you can view them in the NetVision interface.

Programmatic Usage

You can also start NetVision programmatically:

import {
  startNetVision,
  registerNetVisionDevMenu,
} from '@omeratt/rn-net-vision';

// Register NetVision in the dev menu
registerNetVisionDevMenu();

// Start NetVision programmatically
startNetVision();

Web Interface

The NetVision web interface provides a clean, intuitive dashboard for monitoring network requests:

Request list: View all captured requests with status codes and timing information
Request details: Inspect headers, payloads, and response data
Filtering: Filter requests by URL, status code, or method
Persistence: Data persists across app reloads during the same debugging session

The web interface automatically opens in your default browser when NetVision is started.

Configuration

You can create a netvision.config.js file in your project root to customize NetVision's behavior:

// netvision.config.js
module.exports = {
  isProduction: false, // Set to true if building for production
  // Additional configuration options coming soon
};

Troubleshooting

Common Issues

NetVision not capturing requests: Make sure you've properly set up the Metro middleware and added the useNetVision hook.
Web interface not opening: Check that ports 8088 and 5173 are available on your system.
Only capturing partial request data: Some third-party libraries may use custom networking implementations that bypass the standard networking stack.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with ❤️ by Omer Attias

Package detail