← Volver al listado de tecnologías

Capítulo 3: Conexión con la App

Por: Siempre Listo
reactotronconexionconfiguracion

Conexión con la App

Aprenderás a establecer y mantener la conexión entre tu app y Reactotron.

Conexión Automática

Por defecto, Reactotron se conecta a localhost:9090.

Reactotron.configure().connect();

Conexión a Dispositivo Físico

Para dispositivos físicos, especifica la IP de tu máquina:

Reactotron
  .configure({
    host: '192.168.1.100', // IP de tu computadora
  })
  .connect();

Conexión Condicional

Solo conectar en desarrollo:

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';

if (__DEV__) {
  Reactotron
    .configure({ name: 'Mi App' })
    .useReactNative()
    .connect();
}

export default __DEV__ ? Reactotron : null;

Verificar Conexión

En Reactotron Desktop verás:

┌─────────────────────────────────────┐
│ Reactotron                          │
├─────────────────────────────────────┤
│ ● Mi App (connected)                │
│   React Native 0.72.0               │
│   iOS Simulator                     │
├─────────────────────────────────────┤
│ Timeline                            │
│ ├─ CONNECTION: App connected        │
│ └─ LOG: App started                 │
└─────────────────────────────────────┘

Troubleshooting

No conecta en Android

adb reverse tcp:9090 tcp:9090

No conecta en iOS Simulator

Verifica que Reactotron Desktop esté abierto antes de iniciar la app.

Ejercicio Práctico

Objetivo

Conectar tu app y verificar la conexión.

Pasos

  1. Abre Reactotron Desktop
  2. Ejecuta tu app
  3. Verifica “connected” en Reactotron
  4. Envía un log de prueba
Ver solución 
// Después de conectar
import Reactotron from './ReactotronConfig';

function App() {
  useEffect(() => {
    Reactotron?.log('App iniciada correctamente');
  }, []);

  return <View>...</View>;
}

En Reactotron verás el log en la timeline.

Criterios de Éxito

← Volver al listado de tecnologías