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

npm install react-native-netlog-fab react-native-network-logger react-native-gesture-handler
# or using yarn
yarn add react-native-netlog-fab react-native-network-logger react-native-gesture-handler

Note: react-native-network-logger is a peer dependency and must be installed in your app. react-native-gesture-handler is required for the draggable FAB.

Wrap your app root with GestureHandlerRootView (required by react-native-gesture-handler):

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { NetworkLoggerFAB } from 'react-native-netlog-fab';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <YourApp />
      <NetworkLoggerFAB />
    </GestureHandlerRootView>
  );
}

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 react-native-gesture-handler 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

import { NetworkLoggerFAB } from 'react-native-netlog-fab';

// In your component:
<NetworkLoggerFAB
  // FAB Props
  color="#6200ee" // Custom FAB color
  icon="network-check" // Custom icon (📡)
  iconSize={24} // Custom icon size
  iconColor="#ffffff" // Custom icon color
  position={{ bottom: 20, right: 20 }} // Custom position
  showIn="dev" // Show only in development
  modalHeight={0.7} // Modal height (70% of screen)
  // NetworkLogger Props
  theme="dark" // Use dark theme
  sort="asc" // Sort requests ascending
  maxRows={100} // Show max 100 rows
  compact // Use compact rows
  onBackPressed={() => {}} // Custom back handler
  // Logging Options
  maxRequests={1000} // Store max 1000 requests
  ignoredHosts={['api.example.com']} // Ignore specific hosts
  ignoredUrls={['https://api.example.com/health']} // Ignore specific URLs
  ignoredPatterns={[/^GET http:\/\/test\.example\.com\/.*$/]} // Ignore URL patterns
  forceEnable // Force enable logging
/>;

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