{"id":17340,"library":"react-native-network-logger","title":"React Native Network Logger","description":"`react-native-network-logger` is an HTTP traffic monitoring library designed for React Native applications. It provides an intuitive in-app user interface to visualize and debug network requests on both iOS and Android platforms, including in production/release builds. The current stable version is 2.0.1, with a consistent release cadence that has seen multiple updates in 2024 and 2025, indicating active maintenance and ongoing development. A key differentiator of this library is its complete absence of native dependencies, simplifying integration significantly compared to other tools. It allows developers to inspect detailed request and response headers and bodies, copy specific data, share cURL representations of requests, and export all captured logs in HAR (HTTP Archive) format. Built with TypeScript, it also supports advanced features like GraphQL operation name extraction and custom theming, providing a comprehensive and zero-configuration solution for network debugging.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/alexbrazier/react-native-network-logger","tags":["javascript","react","native","react-native","network","interceptor","http","monitor","logging","typescript"],"install":[{"cmd":"npm install react-native-network-logger","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-network-logger","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-network-logger","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for using the React components provided by the library.","package":"react","optional":false},{"reason":"Peer dependency required for integrating the library within a React Native application environment.","package":"react-native","optional":false}],"imports":[{"note":"This function should be called as early as possible in your app's entry point (e.g., `index.js` or `App.js`) to ensure all network requests are intercepted.","wrong":"const startNetworkLogging = require('react-native-network-logger').startNetworkLogging;","symbol":"startNetworkLogging","correct":"import { startNetworkLogging } from 'react-native-network-logger';"},{"note":"The `NetworkLogger` component is a default export and should be imported without curly braces. It provides the UI to display intercepted network traffic.","wrong":"import { NetworkLogger } from 'react-native-network-logger';","symbol":"NetworkLogger","correct":"import NetworkLogger from 'react-native-network-logger';"},{"note":"This is a TypeScript type definition. Use `import type` to avoid bundling unused code in environments that support it, or a standard `import` if your setup doesn't differentiate.","wrong":"import { NetworkLoggerProps } from 'react-native-network-logger';","symbol":"NetworkLoggerProps","correct":"import type { NetworkLoggerProps } from 'react-native-network-logger';"}],"quickstart":{"code":"import { startNetworkLogging } from 'react-native-network-logger';\nimport NetworkLogger from 'react-native-network-logger';\nimport React, { useEffect, useState } from 'react';\nimport { View, Button, Modal, Text, StyleSheet } from 'react-native';\n\n// Start logging as early as possible in your app's entry point.\n// For demonstration, it's shown here, but typically placed in index.js or App.js.\nstartNetworkLogging({\n maxRequests: 500, // Retain a maximum of 500 requests\n // Example: ignore specific URLs or patterns\n ignoredUrls: [/^https:\\/\\/example\\.com\\/health/, /localhost\\:\\d+\\/__/],\n});\n\nconst App = () => {\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n // In a real app, you might trigger the logger visibility via a debug menu\n // or a specific gesture in development builds.\n }, []);\n\n return (\n \n React Native Network Logger Demo\n