---

📝 React Native LogKit

A flexible, modular, and extensible logging system for React Native apps — with built-in support for performance monitoring, visual error overlays, and integrations like Sentry and Crashlytics.

---

✨ Features

• 📊 Multiple log levels: DEBUG, INFO, WARN, ERROR, PERF, MID
• 🎨 Color-coded logs in the console
• ⚙️ Configurable output and behavior
• 🧩 Optional integrations: Sentry, Firebase Crashlytics, custom remotes
• 🧵 Tag-based logging for better categorization
• 🧪 Performance tracking with hooks and utility methods
• ⚡ Lightweight core, with modular opt-in extensions

---

📦 Installation

npm install react-native-logkit
# o
yarn add react-native-logkit

📦 Optional dependencies

If you want to use additional integrations:

# For Sentry
npm install @sentry/react-native

# For Crashlytics (Firebase)
npm install @react-native-firebase/crashlytics

---

🔰 Basic Usage

import { Logger } from 'react-native-logkit';

Logger.debug('Auth', 'Login started');
Logger.info('User', 'User logged in', { id: '123' });
Logger.warn('API', 'Slow response time');
Logger.error('Network', 'Connection failed');

---

🔌 Integrations

✅ Enable Sentry

import { initSentryLogger } from 'react-native-logkit/integrations';

initSentryLogger();

• Logs at ERROR level will be sent to Sentry
• Logs at DEBUG, INFO, and WARN will be added as breadcrumbs

---

✅ Enable Crashlytics

import { initCrashlyticsLogger } from 'react-native-logkit/integrations';

initCrashlyticsLogger();

---

⏱️ Performance Tracking

With React Components

import { usePerformance } from 'react-native-logkit';

const MyComponent = () => {
  const perf = usePerformance('MyComponent');

  useEffect(() => {
    perf.start('fetchData');

    fetchData().then(() => {
      perf.end('fetchData');
    });
  }, []);

  return <Text>Hello</Text>;
};

As a Utility (non-component)

import { Perf } from 'react-native-logkit';

Perf.start('fetchData');

// Your logic...

Perf.end('fetchData');

---

🪝 useLogger (React Hook)

import { useLogger } from 'react-native-logkit';

const MyComponent = () => {
  const log = useLogger('MyComponent');

  useEffect(() => {
    log.info('Mounted');
  }, []);

  return <Text>...</Text>;
};

---

📚 API Reference

Logger Methods

Logger.debug(tag: string, ...args: any[]): void
Logger.info(tag: string, ...args: any[]): void
Logger.warn(tag: string, ...args: any[]): void
Logger.error(tag: string, ...args: any[]): void

Configuration

Logger.setLevel(LogLevel.INFO);
Logger.getLevel(); // returns current level
Logger.reset(); // resets to default

---

🔌 Custom Adapters

You can register adapters to handle logs in custom ways:

Logger.registerAdapter({
  key: 'customAdapter',
  log: (level, tag, message) => {
    console.log('🔄 Forwarded log:', level, tag, message);
  },
});

To avoid duplicates, adapters must have a unique key.

---

🧪 Log Levels

Level	Description
DEBUG	Detailed debug info
INFO	Informational messages
WARN	Warning conditions
ERROR	Error conditions
SILENT	Disable all logging
PERF	Performance tracking
MID	Middleware logging

---

🧼 Reset / Clean Logs

Logger.reset(); // Clears adapters and resets config

---

📄 License

MIT © IsPriamo

---