Logger configuration

Reanimated shows warnings that indicate misuses of the library API, such as modifying the shared value during component re-render. These logs can be configured to be more or less verbose.

The default logger configuration doesn't require any user setup and displays all warnings and errors. If you want to change this behavior, use the configureReanimatedLogger function.

Reference

To modify the default Reanimated logger configuration, import configureReanimatedLogger from react-native-reanimated and call it with the desired configuration.

import {
  configureReanimatedLogger,
  ReanimatedLogLevel,
} from 'react-native-reanimated';

// This is the default configuration
configureReanimatedLogger({
  level: ReanimatedLogLevel.warn,
  strict: true, // Reanimated runs in strict mode by default
});

To receive the logs in your own code as well, pass a callback as the second argument. The logs are still written to the console.

Available from 4.7.0

configureReanimatedLogger(
  {
    level: ReanimatedLogLevel.warn,
    strict: true,
  },
  ({ level, message }) => {
    // Forward the log to your own sink, e.g. a crash reporter
    myLogger.record(level, message);
  }
);

Type definitions

function configureReanimatedLogger(
  config: LoggerConfig,
  onLog?: LogFunction
): void;

type LoggerConfig = {
  level?: ReanimatedLogLevel;
  strict?: boolean;
};

type LogFunction = (data: LogData) => void;

type LogData = {
  level: ReanimatedLogLevel;
  message: string;
};

enum ReanimatedLogLevel {
  warn = 1,
  error = 2,
}

Configuration options

level

A value of the ReanimatedLogLevel enum that defines the minimum level of the logs that will be shown.

strict

A boolean value that enables or disables strict mode. When strict mode is enabled, Reanimated will show more warnings that can help you to catch potential issues in your code.

onLog

An optional callback, passed as the second argument, that receives every log which passes the level and strict filters. It runs in addition to the console output, so the message is both printed and forwarded. The message it receives is the final text, including the [Reanimated] prefix and the strict mode docs reference.

Available from 4.7.0

Remarks

• The logger configuration is global and affects all warnings and errors displayed by Reanimated. There's no option to configure the logger per file/component.

• On native, logs raised on the UI runtime reach the onLog callback asynchronously: the callback always runs on the React Native runtime, on a later tick. On web the callback runs synchronously.

• Calling configureReanimatedLogger without the onLog argument clears a previously registered callback, in the same way that omitting level or strict resets them to their defaults.

• The configureReanimatedLogger function should be called before any Reanimated animations are created, e.g. in the root file of your app.

• The configureReanimatedLogger function is intended for application developers. If you are creating a library that relies on Reanimated, don't include this function call in your library source code - users will inherit the configuration which will override the default configuration in the Reanimated library.

Platform compatibility

Android	iOS	Web
✅	✅	✅