tessl/npm-reactotron-react-native

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Reactotron React Native

Name: tessl/npm-reactotron-react-native
Author: tessl

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;
}