tessl/npm-reactotron-react-native

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

—

Pending

Overview

Eval results

Files

Debug Overlay

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

Creates an overlay system for displaying debugging information directly in your React Native app interface, allowing real-time visual debugging without leaving the app.

Capabilities

Overlay Plugin

Creates a plugin that provides a React component overlay system for displaying debugging information sent from Reactotron.

/**
 * Create debug overlay plugin
 * @returns Plugin creator function (no configuration options)
 */
function overlay(): PluginCreator;

Usage Examples:

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

// Basic overlay setup
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(overlay())
  .connect();

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

Plugin Features

The overlay plugin provides a React component wrapper for integrating the debug overlay into your app.

/**
 * Overlay plugin features
 */
interface OverlayFeatures {
  /** 
   * Higher-order component that wraps your app with debug overlay
   * @param WrappedComponent - Your root app component
   * @returns Enhanced component with overlay functionality
   */
  overlay: (WrappedComponent: React.ComponentType) => (props?: Record<string, any>) => React.ReactElement;
}

Usage Examples:

import React from "react";
import { Text, View } from "react-native";
import Reactotron from "reactotron-react-native";

// Your app component
const MyApp = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>My React Native App</Text>
  </View>
);

// Wrap with overlay (only in development)
const App = __DEV__ ? Reactotron.overlay(MyApp) : MyApp;

export default App;

Overlay Commands

Display Overlay Command

The overlay responds to commands from Reactotron desktop to show debug information:

/**
 * Command to display overlay with debugging information
 */
interface OverlayCommand {
  type: "overlay";
  payload: any;  // Debug information to display
}

React Component Integration

HOC Pattern

The overlay uses a Higher-Order Component pattern to wrap your existing app:

// Generated component structure
const OverlayWrapper = (props = {}) => (
  <View style={{ flex: 1 }}>
    <WrappedComponent {...props} />
    <FullScreenOverlay emitter={emitter} />
  </View>
);

Full Screen Overlay Component

The overlay renders as a full-screen component that doesn't interfere with your app's functionality:

/**
 * Full screen overlay component props
 */
interface FullScreenOverlayProps {
  emitter: Emitter;  // Event emitter for receiving overlay commands
}

Event System

Mitt Event Emitter

The overlay plugin uses the mitt library for event communication:

/**
 * Overlay event emitter
 */
interface OverlayEmitter {
  /** Listen for overlay events */
  on(type: "overlay", handler: (payload: any) => void): void;
  /** Remove overlay event listener */
  off(type: "overlay", handler: (payload: any) => void): void;
  /** Emit overlay event */
  emit(type: "overlay", payload: any): void;
}

Command Processing

The plugin processes overlay commands and forwards them to the React component:

// Command handling
onCommand: (command) => {
  if (command.type === "overlay") {
    emitter.emit("overlay", command.payload);
  }
}

Implementation Details

Component Lifecycle

The overlay component is designed to:

Wrap: Encapsulate your existing app component
Layer: Add overlay as a separate layer on top
Listen: Respond to events from Reactotron desktop
Display: Show debugging information without blocking app interaction

React Native Integration

The overlay leverages React Native's component system:

import React from "react";
import { View } from "react-native";
import mitt from "mitt";

Memory Management

The overlay includes proper event cleanup:

// Event emitter cleanup
useEffect(() => {
  const handler = (payload) => {
    // Handle overlay display
  };
  
  emitter.on("overlay", handler);
  
  return () => {
    emitter.off("overlay", handler);
  };
}, []);

Usage Patterns

Development-Only Integration

import Reactotron from "reactotron-react-native";

const MyApp = () => {
  // Your app code
};

// Only add overlay in development
const App = (__DEV__ && Reactotron.overlay) ? 
  Reactotron.overlay(MyApp) : 
  MyApp;

export default App;

Conditional Overlay

import { Platform } from "react-native";
import Reactotron from "reactotron-react-native";

const MyApp = () => {
  // Your app code
};

// Platform-specific overlay
const shouldUseOverlay = __DEV__ && Platform.OS === 'ios';
const App = shouldUseOverlay ? Reactotron.overlay(MyApp) : MyApp;

export default App;

Multiple HOC Integration

import Reactotron from "reactotron-react-native";
import { Provider } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";

const BaseApp = () => (
  <NavigationContainer>
    {/* Your app navigation */}
  </NavigationContainer>
);

// Chain HOCs
let App = BaseApp;

// Add Redux provider
App = (props) => (
  <Provider store={store}>
    <BaseApp {...props} />
  </Provider>
);

// Add Reactotron overlay (development only)
if (__DEV__) {
  App = Reactotron.overlay(App);
}

export default App;

Visual Display

The overlay can display various types of debugging information:

State Changes: Redux state modifications
Network Activity: API request/response details
Performance Metrics: Rendering performance data
Custom Debug Info: Application-specific debugging data

Usage Best Practices:

// Safe overlay integration
const setupOverlay = (Component) => {
  if (!__DEV__) return Component;
  
  try {
    return Reactotron.overlay ? Reactotron.overlay(Component) : Component;
  } catch (error) {
    console.warn("Reactotron overlay setup failed:", error);
    return Component;
  }
};

const App = setupOverlay(MyAppComponent);

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