https://github.com/imsankalp/react-native-network-tools
A developer tool to inspect network requests in react native application
https://github.com/imsankalp/react-native-network-tools
developer-tools expo react-native tanstack-query
Last synced: 2 months ago
JSON representation
A developer tool to inspect network requests in react native application
- Host: GitHub
- URL: https://github.com/imsankalp/react-native-network-tools
- Owner: imsankalp
- License: mit
- Created: 2025-11-08T12:00:25.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-03-17T05:51:28.000Z (4 months ago)
- Last Synced: 2026-03-17T17:08:52.835Z (4 months ago)
- Topics: developer-tools, expo, react-native, tanstack-query
- Language: TypeScript
- Homepage:
- Size: 21.7 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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
```sh
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`:
```json
{
"expo": {
"plugins": ["react-native-network-tools"]
}
}
```
## Quick Start
### 1. Configure OkHttpClient (Android)
Add the interceptor to your `MainApplication.kt`:
```kotlin
import com.networktools.NetworkToolsManager
import okhttp3.OkHttpClient
class MainApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
NetworkingModule.setCustomClientBuilder(
object : NetworkingModule.CustomClientBuilder {
override fun apply(builder: OkHttpClient.Builder) {
NetworkToolsManager.addInterceptor(builder)
}
}
)
// rest code
}
}
```
### 2. Wrap Your App with NetworkMonitorProvider
```typescript
import { NetworkMonitorProvider } from 'react-native-network-tools';
function App() {
return (
{/* Your app code */}
);
}
```
### 3. View Network Requests
```typescript
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
```typescript
interface NetworkRequest {
id: string;
url: string;
method: string;
requestHeaders: Record;
requestBody?: string;
requestTime: number;
responseCode?: number;
responseHeaders?: Record;
responseBody?: string;
responseTime?: number;
duration?: number;
error?: string;
}
```
## Build Configuration
The library automatically enables tracking only in debug builds. You can customize this behavior:
```gradle
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](docs/SETUP_GUIDE.md).
For Expo validation, see the [Expo smoke test](docs/EXPO_SMOKE_TEST.md).
## Platform Support
| Platform / Runtime | Status | Notes |
| --- | --- | --- |
| React Native Android (New Architecture) | ✅ Supported | TurboModule path |
| React Native Android (Old Architecture) | ✅ Supported | Legacy bridge fallback |
| Expo Development Build + Prebuild (Android) | ✅ Supported | Use config plugin |
| Expo Go | ❌ Not supported | Native interception requires a dev build |
| iOS | 🚧 In progress | Not yet implemented end-to-end |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)