← Volver al listado de tecnologías

Capítulo 9: Custom Commands

Por: Siempre Listo
reactotroncommandscustomdebugging

Custom Commands

Los comandos personalizados permiten ejecutar código en tu app desde Reactotron.

Registrar un Comando

import Reactotron from 'reactotron-react-native';

Reactotron.onCustomCommand({
  command: 'resetState',
  title: 'Reset App State',
  description: 'Limpia todo el estado de la app',
  handler: () => {
    // Tu lógica aquí
    store.dispatch({ type: 'RESET' });
    Reactotron.log('Estado reseteado');
  },
});

Comandos con Parámetros

Reactotron.onCustomCommand({
  command: 'setUser',
  title: 'Set Test User',
  description: 'Configura un usuario de prueba',
  args: [
    {
      name: 'email',
      type: 'string',
    },
    {
      name: 'isAdmin',
      type: 'boolean',
    },
  ],
  handler: ({ email, isAdmin }) => {
    store.dispatch(setUser({ email, isAdmin }));
    Reactotron.log(`Usuario configurado: ${email}`);
  },
});

Comandos Útiles

// Limpiar AsyncStorage
Reactotron.onCustomCommand({
  command: 'clearStorage',
  title: 'Clear Storage',
  handler: async () => {
    await AsyncStorage.clear();
    Reactotron.log('Storage limpiado');
  },
});

// Simular push notification
Reactotron.onCustomCommand({
  command: 'mockPush',
  title: 'Mock Push Notification',
  args: [{ name: 'title', type: 'string' }],
  handler: ({ title }) => {
    notificationHandler({ title, body: 'Test notification' });
  },
});

// Navegar a pantalla
Reactotron.onCustomCommand({
  command: 'navigate',
  title: 'Navigate to Screen',
  args: [{ name: 'screen', type: 'string' }],
  handler: ({ screen }) => {
    navigationRef.navigate(screen);
  },
});

Usar Comandos en Reactotron

  1. Click en “Custom Commands” en la barra lateral
  2. Verás la lista de comandos registrados
  3. Click en un comando para ejecutar
  4. Completa parámetros si es necesario

Ejercicio Práctico

Objetivo

Crear comandos para facilitar el testing manual.

Pasos

  1. Crea comando para resetear estado
  2. Crea comando para navegar a cualquier pantalla
  3. Crea comando para limpiar cache
  4. Ejecuta cada comando desde Reactotron
Ver solución 
import Reactotron from './ReactotronConfig';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { store } from './store';
import { navigationRef } from './navigation';

// Reset completo
Reactotron.onCustomCommand({
  command: 'fullReset',
  title: 'Full Reset',
  description: 'Resetea estado y storage',
  handler: async () => {
    await AsyncStorage.clear();
    store.dispatch({ type: 'RESET' });
    Reactotron.log('Reset completo ejecutado');
  },
});

// Navegación
Reactotron.onCustomCommand({
  command: 'goTo',
  title: 'Navigate',
  args: [{ name: 'screen', type: 'string' }],
  handler: ({ screen }) => {
    if (navigationRef.isReady()) {
      navigationRef.navigate(screen);
      Reactotron.log(`Navegando a ${screen}`);
    }
  },
});

// Login rápido
Reactotron.onCustomCommand({
  command: 'quickLogin',
  title: 'Quick Login',
  handler: () => {
    store.dispatch(login({
      email: '[email protected]',
      token: 'dev-token-123',
    }));
    Reactotron.log('Login de prueba ejecutado');
  },
});

Criterios de Éxito

← Volver al listado de tecnologías