react-native-netlog-fab

react-native-netlog-fab is a lightweight and developer-friendly React Native package that provides a floating action button (FAB) designed specifically for real-time network request logging. Ideal for debugging and monitoring network activity during development, this tool allows developers to quickly toggle a network inspector overlay directly within the app interface.

Features

🛰️ Real-time Network Logging – Monitor HTTP requests and responses made by your app, including headers, payloads, and status codes.

🧲 Floating Action Button (FAB) – Easily accessible FAB to toggle the network log panel on or off from anywhere in your app.

🔧 Minimal Setup – Seamless integration into new or existing React Native projects.

🎯 Development Focused – Designed for development and debugging; can be disabled or hidden in production builds.

Use Case

Whether you're debugging API issues, inspecting backend communication, or validating request payloads, react-native-netlog-fab helps you visualize network activity without leaving the app context.

Installation

1npm install react-native-netlog-fab
2# or using yarn
3yarn add react-native-netlog-fab

Dependencies

This package has the following dependencies:

Required Peer Dependencies

• react >= 16.8.0
• react-native >= 0.60.0
• react-native-network-logger ^2.0.0

Required Dependencies

• react-native-gesture-handler ^2.25.0

Make sure to install these dependencies in your project. The peer dependencies are required for the package to work properly, while the required dependencies will be installed automatically when you install react-native-netlog-fab.

For more details, see the Medium article: Introducing react-native-netlog-fab: Effortless In-App Network Debugging for React Native

Usage

1import { NetworkLoggerFAB } from 'react-native-netlog-fab';
2
3// In your component:
4<NetworkLoggerFAB
5  // FAB Props
6  color="#6200ee" // Custom FAB color
7  icon="network-check" // Custom icon (📡)
8  iconSize={24} // Custom icon size
9  iconColor="#ffffff" // Custom icon color
10  position={{ bottom: 20, right: 20 }} // Custom position
11  showIn="dev" // Show only in development
12  modalHeight={0.7} // Modal height (70% of screen)
13  // NetworkLogger Props
14  theme="dark" // Use dark theme
15  sort="asc" // Sort requests ascending
16  maxRows={100} // Show max 100 rows
17  compact // Use compact rows
18  onBackPressed={() => {}} // Custom back handler
19  // Logging Options
20  maxRequests={1000} // Store max 1000 requests
21  ignoredHosts={['api.example.com']} // Ignore specific hosts
22  ignoredUrls={['https://api.example.com/health']} // Ignore specific URLs
23  ignoredPatterns={[/^GET http:\/\/test\.example\.com\/.*$/]} // Ignore URL patterns
24  forceEnable // Force enable logging
25/>;

Props

FAB Props

Prop	Type	Default	Description
color	string	'#6200ee'	Color of the floating action button
icon	React.ReactNode | string	undefined	Custom icon for the FAB (string for Material Icons)
iconSize	number	30	Size of the icon
iconColor	string	'#ffffff'	Color of the icon
position	{ bottom?: number; right?: number }	{ bottom: 20, right: 20 }	Custom position for the FAB
showIn	'dev' | 'always'	'dev'	When to show the FAB ('dev' or 'always')
modalHeight	number	0.7	Height of the modal as a fraction of screen height (0-1)

NetworkLogger Props

Prop	Type	Default	Description
theme	'light' | 'dark' | ThemeObject	'light'	Theme for the network logger
sort	'asc' | 'desc'	'desc'	Sort order of requests
maxRows	number	undefined	Maximum number of rows to display
compact	boolean	false	Use compact rows for more content
onBackPressed	() => void	undefined	Custom back button handler

Logging Options

Prop	Type	Default	Description
maxRequests	number	500	Maximum number of requests to store
ignoredHosts	string[]	[]	Hosts to ignore in logging
ignoredUrls	string[]	[]	URLs to ignore in logging
ignoredPatterns	RegExp[]	[]	URL patterns to ignore in logging
forceEnable	boolean	false	Force enable logging even with other interceptors

Available Icons

The component supports various Material Icons that can be used with the icon prop:

• network-check (📡) - Network monitoring icon
• bug-report (🐛) - Debug icon
• code (💻) - Code icon
• analytics (📊) - Analytics icon
• wifi (📶) - Network icon
• settings (⚙️) - Settings icon
• list (📋) - List icon
• search (🔍) - Search icon
• And many more from the Material Icons set

Contributing

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

License

MIT

---

Made with create-react-native-library