tessl/npm-reactotron-react-native

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

—

Pending

Overview

Eval results

Files

Development Tools

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

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

Capabilities

Dev Tools Plugin

Creates a plugin that responds to development tool commands from Reactotron, allowing remote control of React Native's dev menu functionality.

/**
 * Create development tools plugin
 * @returns Plugin creator function (no configuration options)
 */
function devTools(): PluginCreator;

Usage Examples:

import Reactotron, { devTools } from "reactotron-react-native";

// Basic dev tools integration
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(devTools())
  .connect();

// Via useReactNative
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    devTools: true
  })
  .connect();

Supported Commands

The plugin responds to the following Reactotron commands:

Reload App Command

/**
 * Command to reload the React Native app
 */
interface ReloadCommand {
  type: "devtools.reload";
}

Show Dev Menu Command

/**
 * Command to show React Native dev menu
 */
interface ShowDevMenuCommand {
  type: "devtools.open";
}

Platform Support

iOS Support

On iOS devices and simulators, the plugin integrates with React Native's DevMenu turbo module:

/**
 * iOS DevMenu interface
 */
interface DevMenuSpec {
  reload(): void;
  show(): void;
  debugRemotely(): void;
  setHotLoadingEnabled(enabled: boolean): void;
  setProfilingEnabled(enabled: boolean): void;
  getConstants(): Record<string, any>;
}

Android Support

The plugin provides fallback functionality for Android devices, though with limited capabilities compared to iOS.

Development Environment Detection

The plugin automatically detects the development environment:

// Only active in development mode on iOS
if (Platform.OS === "ios" && __DEV__) {
  // DevMenu functionality available
} else {
  // Fallback to stub implementation
}

Implementation Details

TurboModule Integration

The plugin uses React Native's TurboModuleRegistry to access the DevMenu module:

// Safe module loading with fallback
const DevMenu = TurboModuleRegistry.get<DevMenuSpec>("DevMenu");
if (DevMenu) {
  // Use native DevMenu
  DevMenu.show();
  DevMenu.reload();
} else {
  // Use stub implementation
  console.warn("DevMenu not available in this environment");
}

Stub Implementation

For environments where DevMenu is not available (production, Expo Go, etc.), the plugin provides a stub implementation:

/**
 * Stub DevMenu for unsupported environments
 */
interface StubDevMenu {
  reload(): void;      // Logs warning
  show(): void;        // Logs warning
  getConstants(): {};  // Returns empty object
  debugRemotely(): void;         // Logs warning
  setHotLoadingEnabled(): void;  // Logs warning
  setProfilingEnabled(): void;   // Logs warning
}

Command Handling

Command Processing

The plugin processes incoming commands and maps them to appropriate DevMenu actions:

// Command handling logic
onCommand: (command) => {
  if (command.type === "devtools.open") {
    DevMenu.show();
  }
  
  if (command.type === "devtools.reload") {
    DevMenu.reload();
  }
}

Error Handling

The plugin includes comprehensive error handling for various scenarios:

Module Not Available: Falls back to stub implementation
Platform Limitations: Provides appropriate warnings
Environment Restrictions: Graceful degradation in production

Usage Scenarios

Remote Debugging Workflow

// Set up Reactotron with dev tools
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({ devTools: true })
  .connect();

// From Reactotron desktop:
// 1. Click "Reload" button -> Triggers app reload
// 2. Click "Show Dev Menu" -> Opens React Native dev menu

Integration with Other Tools

The dev tools plugin works seamlessly with other Reactotron plugins:

const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    devTools: true,      // Remote dev menu control
    errors: true,        // Error tracking
    networking: true,    // Network monitoring
    overlay: true        // Debug overlay
  })
  .connect();

Limitations

Environment Restrictions

Production Builds: DevMenu is not available in production builds
Expo Go: Limited DevMenu functionality in Expo Go environment
Android: Some DevMenu features may have limited support

Platform Differences

iOS: Full DevMenu integration with all features
Android: Basic functionality with potential limitations

Usage Best Practices:

// Development-only dev tools
const devToolsEnabled = __DEV__ && Platform.OS === 'ios';

const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    devTools: devToolsEnabled
  })
  .connect();

// Conditional dev tools based on environment
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    devTools: true  // Plugin handles environment detection internally
  })
  .connect();

Install with Tessl CLI

npx tessl i tessl/npm-reactotron-react-native

docs

async-storage.md

core-configuration.md

dev-tools.md

editor-integration.md