LogBox

LogBox is a development tool that displays logs in your app during development. It replaces the older YellowBox and RedBox error screens.

LogBox is only active in development mode (__DEV__ === true). In production builds, all LogBox methods are no-ops.

Methods

`install()`

static install(): void

Installs LogBox to intercept console warnings and errors. This is automatically called when you import React Native, but you can manually call it if needed. Example:

import { LogBox } from 'react-native';

LogBox.install();

`uninstall()`

static uninstall(): void

Uninstalls LogBox and restores the original console methods. Example:

import { LogBox } from 'react-native';

LogBox.uninstall();

`isInstalled()`

static isInstalled(): boolean

Returns whether LogBox is currently installed. Returns:

true if LogBox is installed, false otherwise

Example:

import { LogBox } from 'react-native';

if (LogBox.isInstalled()) {
  console.log('LogBox is active');
}

`ignoreLogs()`

static ignoreLogs(patterns: ReadonlyArray<string | RegExp>): void

Silences any logs that match the given strings or regular expressions. Parameters:

patterns: Array of strings or RegExp patterns to ignore

Example:

import { LogBox } from 'react-native';

// Ignore specific warning messages
LogBox.ignoreLogs([
  'Warning: componentWillReceiveProps',
  'Setting a timer',
]);

// Ignore using regex
LogBox.ignoreLogs([
  /ViewPropTypes will be removed/,
  /Animated: `useNativeDriver`/,
]);

Common Use Case:

import { LogBox } from 'react-native';

// Ignore all warnings from a specific library
LogBox.ignoreLogs([
  'VirtualizedLists should never be nested',
]);

`ignoreAllLogs()`

static ignoreAllLogs(value?: boolean): void

Toggles error and warning notifications. Note: this only disables notifications; uncaught errors will still open a full-screen LogBox. Parameters:

value: Whether to ignore all logs (defaults to true if not provided)

Example:

import { LogBox } from 'react-native';

// Disable all LogBox notifications
LogBox.ignoreAllLogs();

// Or explicitly
LogBox.ignoreAllLogs(true);

// Re-enable notifications
LogBox.ignoreAllLogs(false);

Use Case - Screenshot Testing:

import { LogBox } from 'react-native';

// Disable LogBox during screenshot tests
if (process.env.SCREENSHOT_MODE) {
  LogBox.ignoreAllLogs();
}

`clearAllLogs()`

static clearAllLogs(): void

Clears all logs currently displayed in LogBox. Example:

import { LogBox } from 'react-native';

LogBox.clearAllLogs();

`addLog()`

static addLog(log: LogData): void

Manually adds a log to LogBox. Generally not needed unless you’re building custom logging tools. Parameters:

log: Log data object containing:
- level: 'warn' | 'error' | 'fatal'
- message: Message object with content string
- category: String category for grouping
- componentStack: Stack trace array

Example:

import { LogBox } from 'react-native';

LogBox.addLog({
  level: 'warn',
  message: {
    content: 'This is a custom warning',
    substitutions: [],
  },
  category: 'CustomWarning',
  componentStack: [],
});

`addException()`

static addException(error: ExtendedExceptionData): void

Adds an exception to LogBox. Used internally by the error handling system. Parameters:

error: Extended exception data object

Common Patterns

Ignore Known Third-Party Warnings

import { LogBox } from 'react-native';

// In your app's entry file (index.js or App.js)
LogBox.ignoreLogs([
  // Ignore warnings from react-native-gesture-handler
  'RCTBridge required dispatch_sync',
  
  // Ignore warnings from deprecated lifecycle methods
  'Warning: componentWillMount',
  'Warning: componentWillReceiveProps',
  
  // Ignore timer warnings during navigation
  'Setting a timer for a long period of time',
]);

Conditional LogBox Configuration

import { LogBox } from 'react-native';

if (__DEV__) {
  // Ignore warnings only in development
  LogBox.ignoreLogs([
    'Non-serializable values were found in the navigation state',
  ]);
  
  // Disable all logs for specific testing scenarios
  if (process.env.E2E_TEST) {
    LogBox.ignoreAllLogs(true);
  }
}

Clear Logs Programmatically

import { LogBox, Button } from 'react-native';

function DebugPanel() {
  return (
    <Button
      title="Clear LogBox"
      onPress={() => LogBox.clearAllLogs()}
    />
  );
}

Project Setup Example

// index.js
import { AppRegistry, LogBox } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

// Configure LogBox before registering the app
if (__DEV__) {
  LogBox.ignoreLogs([
    // Add your ignored warnings here
    'VirtualizedLists should never be nested',
    'Require cycle:',
  ]);
}

AppRegistry.registerComponent(appName, () => App);

Development vs Production

Development (__DEV__ === true):

LogBox intercepts console.warn() and console.error()
Shows warnings and errors in an overlay
Allows ignoring specific messages

Production (__DEV__ === false):

All LogBox methods become no-ops
No overlays are shown
Console methods work normally
No performance impact

Best Practices

Don’t Ignore Everything: Use ignoreLogs() sparingly and only for known, unavoidable warnings

Use Specific Patterns: Prefer specific strings over broad regex patterns to avoid hiding important warnings

// Good - specific
LogBox.ignoreLogs(['Specific warning message']);

// Bad - too broad
LogBox.ignoreLogs([/Warning/]);

Document Ignored Warnings: Add comments explaining why each warning is ignored

LogBox.ignoreLogs([
  // TODO: Remove when react-native-library updates to new API
  'Warning: componentWillReceiveProps',
]);

Temporary Ignores: Review ignored warnings periodically and remove them when the underlying issues are fixed
Team Communication: Keep ignored warnings in version control so the whole team is aware

Migration from YellowBox

If you’re migrating from the old YellowBox:

// Old YellowBox API
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning...']);

// New LogBox API
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Warning...']);

Core APIs

Hooks

Interaction

Accessibility & Internationalization

Developer Tools

Networking

Storage

Android APIs

iOS APIs

Methods

`install()`

`uninstall()`

`isInstalled()`

`ignoreLogs()`

`ignoreAllLogs()`

`clearAllLogs()`

`addLog()`

`addException()`

Common Patterns

Ignore Known Third-Party Warnings

Conditional LogBox Configuration

Clear Logs Programmatically

Project Setup Example

Development vs Production

Best Practices

Migration from YellowBox

​Methods

​install()

​uninstall()

​isInstalled()

​ignoreLogs()

​ignoreAllLogs()

​clearAllLogs()

​addLog()

​addException()

​Common Patterns

​Ignore Known Third-Party Warnings

​Conditional LogBox Configuration

​Clear Logs Programmatically

​Project Setup Example

​Development vs Production

​Best Practices

​Migration from YellowBox

Methods

`install()`

`uninstall()`

`isInstalled()`

`ignoreLogs()`

`ignoreAllLogs()`

`clearAllLogs()`

`addLog()`

`addException()`

Common Patterns

Ignore Known Third-Party Warnings

Conditional LogBox Configuration

Clear Logs Programmatically

Project Setup Example

Development vs Production

Best Practices

Migration from YellowBox