react-native-logs

You can enable logging for specific parts of your application by creating namespaced loggers using the .extend(name) method. Extensions are controlled via the enabledExtensions array in the logger configuration. If an extension is not enabled, calls to that extended logger will be ignored.

import { logger, consoleTransport } from "react-native-logs";

var log = logger.createLogger({
  transport: consoleTransport,
  enabledExtensions: ["ROOT", "HOME"],
});

var rootLog = log.extend("ROOT");
var homeLog = log.extend("HOME");
var profileLog = log.extend("PROFILE");

log.debug("print this"); // prints: <time> | DEBUG | print this
rootLog.debug("print this"); // prints: <time> | ROOT | DEBUG | print this
homeLog.debug("print this"); // prints: <time> | HOME | DEBUG | print this
profileLog.debug("not print this"); // does nothing (extension not enabled)

In React Native, you can prevent logging from impacting UI performance by setting async: true in your logger configuration.

When async is enabled, the logger uses requestIdleCallback (in modern React Native/Hermes environments) or falls back to setTimeout to defer logging until the UI thread is idle. This prevents frame drops during animations or heavy rendering.

const config = {
  async: true,
  // ... other config
};

const log = logger.createLogger(config);

You can install react-native-logs using npm, yarn, or expo depending on your project environment.

npm install --save react-native-logs

# OR

yarn add react-native-logs

# OR

expo install react-native-logs

In React Native, you can use the __DEV__ global variable to switch between different transports and severity levels. This ensures high-performance logging in production (e.g., saving to a file) while providing detailed console output during development.

import {
  logger,
  consoleTransport,
  fileAsyncTransport,
} from "react-native-logs";
import RNFS from "react-native-fs";

const config = {
  transport: __DEV__ ? consoleTransport : fileAsyncTransport,
  severity: __DEV__ ? "debug" : "error",
  transportOptions: {
    FS: RNFS,
  },
};

var log = logger.createLogger(config);

To get started, import logger and call createLogger(). By default, this creates a simple console logger with debug, info, warn, and error levels.

import { logger } from "react-native-logs";

var log = logger.createLogger();

log.debug("This is a Debug log");
log.info("This is an Info log");
log.warn("This is a Warning log");
log.error("This is an Error log");

Transports are responsible for the final destination of your logs. You can provide a single transport function or an array of transport functions to broadcast logs to multiple destinations simultaneously.

Available preset transports include:

• consoleTransport: Standard console output.
• mapConsoleTransport: A transport that maps logs to specific console methods.
• fileAsyncTransport: Writes logs to a file asynchronously.
• sentryTransport: Sends logs to Sentry.
• crashlyticsTransport: Sends logs to Firebase Crashlytics.

When using multiple transports, ensure transportOptions matches the requirements of the union of all provided transports.

Log methods support multiple arguments, allowing you to concatenate messages with objects or other data.

var errorObject = {
  status: 404,
  message: "Undefined Error",
};
log.error("New error occured", errorObject);

The fileAsyncTransport saves logs to a text file. It requires a filesystem instance from either react-native-fs or expo-file-system. You can use the {date-today} placeholder in the fileName to create a new file daily (e.g., app_logs_{date-today}.log).

import { logger, fileAsyncTransport } from "react-native-logs";
import RNFS from "react-native-fs";

var log = logger.createLogger({
  severity: "debug",
  transport: fileAsyncTransport,
  transportOptions: {
    FS: RNFS,
    fileName: `logs_{date-today}`, // Create a new file every day
  },
});

log.info("Print this string to a file");

The consoleTransport prints logs using console.log. You can customize the colors for different log levels and the colors for extension labels (namespaces) using ANSI color names. You can also provide a custom console object via consoleFunc.

import { logger, consoleTransport } from "react-native-logs";

var log = logger.createLogger({
  levels: {
    debug: 0,
    info: 1,
    warn: 2,
    error: 3,
  },
  transport: consoleTransport,
  transportOptions: {
    colors: {
      info: "blueBright",
      warn: "yellowBright",
      error: "redBright",
    },
    extensionColors: {
      root: "magenta",
      home: "green",
    },
  },
});

var rootLog = log.extend("root");
var homeLog = log.extend("home");

rootLog.info("Magenta Extension and bright blue message");
homeLog.error("Green Extension and bright red message");