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

Usage

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

// In your component:
<NetworkLoggerFAB
  color="#6200ee" // Optional: Custom color for the FAB
  position={{ bottom: 20, right: 20 }} // Optional: Custom position
  showIn="dev" // Optional: Show only in development
  modalHeight={0.7} // Optional: Custom modal height
/>;

Props

Prop	Type	Default	Description
color	string	'#6200ee'	Color of the floating action button
icon	React.ReactNode	undefined	Custom icon for the FAB
position	{ bottom?: number; right?: number }	undefined	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)

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