or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

async-storage.mdcore-configuration.mddev-tools.mdeditor-integration.mderror-tracking.mdglobal-logging.mdindex.mdnetworking.mdoverlay.mdstorybook.md
tile.json

tessl/npm-reactotron-react-native

A development tool to explore, inspect, and diagnose your React Native apps.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/reactotron-react-native@5.1.x

To install, run

npx @tessl/cli install tessl/npm-reactotron-react-native@5.1.0

index.mddocs/

Reactotron React Native

Reactotron React Native is a development tool that provides debugging, inspection, and diagnostic capabilities specifically for React Native applications. It offers powerful plugins for tracking network requests, AsyncStorage operations, global errors, and more, with a real-time connection to the Reactotron desktop app.

Package Information

  • Package Name: reactotron-react-native
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install reactotron-react-native

Core Imports

import Reactotron from "reactotron-react-native";

For specific plugins:

import { 
  asyncStorage, 
  networking, 
  trackGlobalErrors, 
  trackGlobalLogs,
  overlay,
  openInEditor,
  storybook,
  devTools
} from "reactotron-react-native";

Basic Usage

import Reactotron from "reactotron-react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

// Configure and start Reactotron
const reactotron = Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure({ name: "MyApp" })
  .useReactNative({
    asyncStorage: true,
    networking: true,
    errors: true,
    overlay: true,
  })
  .connect();

// Use in your app
reactotron.log("App started");

Architecture

Reactotron React Native is built around several key components:

  • Core Client: Based on reactotron-core-client with React Native specific defaults
  • Plugin System: Modular plugins that can be enabled/disabled individually
  • WebSocket Connection: Real-time communication with Reactotron desktop app
  • AsyncStorage Integration: Optional AsyncStorage tracking and client ID persistence
  • React Native Hooks: Deep integration with React Native internals for debugging

Capabilities

Core Client Interface

Main Reactotron client interface with all essential methods for configuration, connection, and logging.

interface ReactotronReactNative extends ReactotronCore {
  configure(options: ClientOptions<this>): this;
  connect(): this;
  use<P extends PluginCreator<this>>(pluginCreator: P): this;
  send<Type extends string, Payload>(type: Type, payload?: Payload, important?: boolean): void;
  display(config: DisplayConfig): void;
  startTimer(): () => number;
  close(): void;
  
  // Logging methods (from logger plugin)
  log(...args: any[]): void;
  logImportant(...args: any[]): void;
  debug(...args: any[]): void;
  warn(...args: any[]): void;
  error(message: string, stack?: string): void;
  
  // Benchmarking methods
  benchmark(title?: string): void;
  
  // State methods
  reportError(error: any): void;
  
  // React Native specific methods
  useReactNative(options?: UseReactNativeOptions): this;
  setAsyncStorageHandler(asyncStorage: AsyncStorageStatic): this;
  asyncStorageHandler?: AsyncStorageStatic;
}

interface DisplayConfig {
  name: string;
  value?: object | string | number | boolean | null | undefined;
  preview?: string;
  image?: string | { uri: string };
  important?: boolean;
}

Core Configuration

Main client interface for configuring Reactotron with React Native specific settings and plugin management.

interface ReactotronReactNative extends ReactotronCore {
  useReactNative(options?: UseReactNativeOptions): this;
  setAsyncStorageHandler(asyncStorage: AsyncStorageStatic): this;
  asyncStorageHandler?: AsyncStorageStatic;
}

interface UseReactNativeOptions {
  errors?: TrackGlobalErrorsOptions | boolean;
  log?: boolean;
  editor?: OpenInEditorOptions | boolean;
  overlay?: boolean;
  asyncStorage?: AsyncStorageOptions | boolean;
  networking?: NetworkingOptions | boolean;
  storybook?: boolean;
  devTools?: boolean;
}

const reactNativeCorePlugins: PluginCreator<ReactotronCore>[];

Constants

const REACTOTRON_ASYNC_CLIENT_ID: string;

Core Configuration

AsyncStorage Tracking

Monitors and logs AsyncStorage operations including set, get, remove, and multi-operations with configurable ignore patterns.

function asyncStorage(options?: AsyncStorageOptions): PluginCreator;

interface AsyncStorageOptions {
  ignore?: string[];
}

AsyncStorage Tracking

Network Monitoring

Intercepts and logs HTTP requests and responses with support for content type filtering and URL pattern exclusion.

function networking(options?: NetworkingOptions): PluginCreator;

interface NetworkingOptions {
  ignoreContentTypes?: RegExp;
  ignoreUrls?: RegExp;
}

Network Monitoring

Error Tracking

Captures global JavaScript errors and reports them with symbolicated stack traces and customizable filtering.

function trackGlobalErrors(options?: TrackGlobalErrorsOptions): PluginCreator;

interface TrackGlobalErrorsOptions {
  veto?: (frame: ErrorStackFrame) => boolean;
}

interface ErrorStackFrame {
  fileName: string;
  functionName: string;
  lineNumber: number;
  columnNumber?: number | null;
}

Error Tracking

Development Tools

Provides React Native dev menu integration for reloading and showing development tools from Reactotron desktop.

function devTools(): PluginCreator;

Development Tools

Debug Overlay

Creates an overlay system for displaying debugging information directly in your React Native app interface.

function overlay(): PluginCreator;

Debug Overlay

Global Logging

Intercepts console.log, console.warn, and console.debug calls to forward them to Reactotron.

function trackGlobalLogs(): PluginCreator;

Global Logging

Editor Integration

Opens files in your editor directly from Reactotron stack traces and error reports.

function openInEditor(options?: OpenInEditorOptions): PluginCreator;

interface OpenInEditorOptions {
  url?: string;
}

Editor Integration

Storybook Integration

Provides Storybook switcher component for toggling between your app and Storybook interface.

function storybook(): PluginCreator;

Storybook Integration

Plugin Exports

Individual plugin creator functions that can be used independently or through useReactNative options.

function asyncStorage(options?: AsyncStorageOptions): PluginCreator;
function trackGlobalErrors(options?: TrackGlobalErrorsOptions): PluginCreator;
function trackGlobalLogs(): PluginCreator;
function openInEditor(options?: OpenInEditorOptions): PluginCreator;
function overlay(): PluginCreator;
function networking(options?: NetworkingOptions): PluginCreator;
function storybook(): PluginCreator;
function devTools(): PluginCreator;

Core Types

interface ReactotronCore {
  options: ClientOptions<this>;
  plugins: Plugin<this>[];
  startTimer(): () => number;
  close(): void;
  send<Type extends string, Payload>(type: Type, payload?: Payload, important?: boolean): void;
  display(config: DisplayConfig): void;
  configure(options: ClientOptions<this>): this;
  use<P extends PluginCreator<this>>(pluginCreator: P): this;
  connect(): this;
}

type PluginCreator<T = ReactotronCore> = (reactotron: T) => Plugin<T>;

interface Plugin<T> {
  onConnect?(): void;
  onDisconnect?(): void;
  onCommand?(command: any): void;
  onPlugin?(client: T): void;
  features?: Record<string, any>;
}

type AsyncStorageStatic = {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
  mergeItem(key: string, value: string): Promise<void>;
  clear(): Promise<void>;
  multiGet(keys: string[]): Promise<Array<[string, string | null]>>;
  multiSet(pairs: Array<[string, string]>): Promise<void>;
  multiRemove(keys: string[]): Promise<void>;
  multiMerge(pairs: Array<[string, string]>): Promise<void>;
};

interface ClientOptions<T> {
  createSocket?: ((path: string) => WebSocket) | null;
  host?: string | null;
  port?: number | null;
  name?: string;
  secure?: boolean;
  plugins?: PluginCreator<T>[];
  safeRecursion?: boolean;
  onCommand?: ((command: any) => void) | null;
  onConnect?: () => void;
  onDisconnect?: () => void;
  environment?: string;
  client?: Record<string, string | number | boolean>;
  setClientId?: (clientId: string) => Promise<void>;
  getClientId?: (name: string) => Promise<string>;
  proxyHack?: boolean;
}