React Native Debug Toolkit

A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development.

Installation

1npm install react-native-debug-toolkit
2# or
3yarn add react-native-debug-toolkit

Basic Usage

1// In your App.js
2import DebugToolKit from 'react-native-debug-toolkit';
3
4function App() {
5  useEffect(() => {
6    if (__DEV__) {
7      const debugToolKit = new DebugToolKit();
8      debugToolKit.addFeature({
9        name: 'network',
10        label: 'Network Logs',
11        setup: () => console.log('Feature ready'),
12        getData: () => ({ message: 'Hello debugging world!' })
13      });
14      debugToolKit.showDebugPanel();
15    }
16    
17    return () => {
18      if (__DEV__) {
19        DebugToolKit.instance.destroy();
20      }
21    };
22  }, []);
23  
24  return <YourApp />;
25}

Features

• Lightweight floating debug panel
• Customizable debugging features
• Development-only functionality (automatically disabled in production)
• Easy to extend with your own debug tools

API Reference

DebugToolKit

new DebugToolKit()

Initializes a new instance of the debug toolkit. It's a singleton, so multiple calls will return the same instance.

addFeature(feature: Feature): DebugToolKit

Adds a new debugging feature to the toolkit. Returns the toolkit instance for chaining.

Feature object must have:

• name: Unique identifier for the feature
• label: Display name in the debug panel
• setup(): Function to run when the feature is added
• getData(): Function that returns data to display in the panel
• cleanup(): (Optional) Function to run when the feature is removed

showDebugPanel(): void

Shows the floating debug panel.

hideDebugPanel(): void

Hides the floating debug panel.

updateDebugPanel(): void

Updates the debug panel with the latest feature data.

destroy(): void

Cleans up the debug toolkit, removing all features and event listeners.

Example: Network Feature

1// In debugFeatures.js
2import { NetworkFeature } from 'react-native-debug-toolkit/lib/features/NetworkFeature';
3
4export const createNetworkFeature = () => {
5  const feature = new NetworkFeature();
6  return {
7    name: 'network',
8    label: 'Network Logs',
9    setup: () => feature.setup(),
10    getData: () => feature.getData(),
11    cleanup: () => feature.cleanup()
12  };
13};
14
15// In App.js
16const debugToolKit = new DebugToolKit();
17debugToolKit.addFeature(createNetworkFeature());
18debugToolKit.showDebugPanel();

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT