Saltar al contenido principal

MOBILE_DEV_SHORTCUTS

Ver en Git

🎮 Shortcuts y Configuración - Mobile Development

🚨 Problema: Conflictos de Shortcuts​

Android Studio y el emulador tienen shortcuts que pueden interferir con el desarrollo. Esta guía te ayuda a configurar todo correctamente.

✅ Solución Recomendada: Usar Terminal​

Método 1: R+R en Terminal (Más Rápido)​

Cuando el dev server está corriendo, simplemente presiona R dos veces rápido en la terminal:

npm run dev:mobile -- --platform=android --config=auravantbeta

# Mientras corre, presiona: R + R (rápido)
# 🔄 Reloading app...

Ventajas:

  • ✅ No hay conflictos con Android Studio
  • ✅ Funciona siempre
  • ✅ Más rápido que otros métodos
  • ✅ No necesitas cambiar configuración

🔧 Método 2: Comandos NPM​

En otra terminal (mientras dev server corre):

# Android
npm run reload:android

# iOS
npm run reload:ios

Ventajas:

  • ✅ Funciona desde cualquier terminal
  • ✅ No hay conflictos
  • ✅ Puedes crear alias

Crear alias (opcional):

# En tu ~/.zshrc o ~/.bashrc
alias ra="npm run reload:android"
alias ri="npm run reload:ios"

# Uso:
ra  # Recarga Android
ri  # Recarga iOS

📱 Método 3: Dev Menu en Dispositivo​

Android​

  1. Abrir Dev Menu:

    • Emulador: Cmd+M (Mac) o Ctrl+M (Windows/Linux)
    • Dispositivo físico: Sacudir el dispositivo

  2. Seleccionar "Reload"

iOS​

  1. Abrir Dev Menu:

    • Simulador: Cmd+D
    • Dispositivo físico: Sacudir el dispositivo

  2. Seleccionar "Reload"

⚙️ Configurar Android Studio (Opcional)​

Si prefieres usar shortcuts en Android Studio, puedes desactivar los conflictivos:

Paso 1: Abrir Preferencias​

  • Mac: Android Studio → Preferences
  • Windows/Linux: File → Settings

Paso 2: Ir a Keymap​

Preferences → Keymap

Paso 3: Buscar y Modificar Shortcuts Conflictivos​

Shortcuts que causan conflictos:

ShortcutAcción en EmuladorConflicto con
Cmd+RRotate screenReload (esperado)
Cmd+MOpen dev menuMinimize window
Cmd+DDebugDev menu

Cómo cambiar:

  1. Busca "Rotate" en el keymap
  2. Click derecho → Remove Cmd+R
  3. Busca "Minimize"
  4. Click derecho → Remove Cmd+M

Paso 4: Agregar Custom Shortcuts (Opcional)​

Puedes agregar shortcuts personalizados para recargar:

  1. Preferences → Keymap
  2. Busca "External Tools"
  3. Click derecho → Add Keyboard Shortcut
  4. Asigna Cmd+Shift+R para reload

🎯 Configuración Recomendada​

Para Máxima Productividad​

Opción A: Solo Terminal (Recomendado)

# Iniciar dev
npm run dev:mobile -- --platform=android

# Recargar: R+R en terminal
# No necesitas tocar Android Studio

Opción B: Terminal + Alias

# En ~/.zshrc
alias ra="npm run reload:android"
alias ri="npm run reload:ios"

# Uso:
npm run dev:mobile -- --platform=android
# En otra terminal: ra

Opción C: Terminal + Script

# Crear script personalizado
echo '#!/bin/bash\nnpm run reload:android' > ~/bin/reload-app
chmod +x ~/bin/reload-app

# Uso:
reload-app

🔍 Troubleshooting​

"R+R no funciona"​

Causa: Terminal no está en foco o raw mode no está habilitado.

Solución:

  1. Click en la terminal donde corre npm run dev:mobile
  2. Presiona R dos veces rápido (< 500ms entre presiones)
  3. Si no funciona, usa: npm run reload:android

"Cmd+R rota la pantalla en vez de recargar"​

Causa: Android Studio captura el shortcut antes que el emulador.

Solución:

  • Opción 1: Usa R+R en terminal (recomendado)
  • Opción 2: Usa npm run reload:android
  • Opción 3: Desactiva el shortcut en Android Studio (ver arriba)

"Cmd+M minimiza Android Studio"​

Causa: macOS captura el shortcut.

Solución:

  • Opción 1: Usa R+R en terminal (recomendado)
  • Opción 2: Sacude el dispositivo/emulador
  • Opción 3: Desactiva en System Preferences → Keyboard → Shortcuts

"No puedo abrir dev menu"​

Solución:

# Android - Abrir dev menu manualmente
adb shell input keyevent 82

# iOS - Abrir dev menu manualmente
xcrun simctl spawn booted log stream --predicate 'processImagePath contains "YourApp"'

📋 Resumen de Shortcuts​

✅ Funcionan Siempre (Sin Conflictos)​

AcciónMétodoPlataforma
ReloadR+R en terminalAmbas
Reloadnpm run reload:androidAndroid
Reloadnpm run reload:iosiOS
Dev MenuSacudir dispositivoAmbas

⚠️ Pueden Tener Conflictos​

AcciónShortcutConflicto Posible
ReloadCmd+RRotate screen (Android Studio)
Dev MenuCmd+MMinimize window (macOS)
Dev MenuCmd+DDebug (Android Studio)

💡 Tips​

1. Usa R+R en Terminal​

Es el método más confiable y rápido. No tiene conflictos.

2. Mantén Terminal Visible​

Coloca la terminal al lado del emulador para acceso rápido.

3. Crea Alias​

Si usas mucho los comandos, crea alias cortos.

4. Usa Múltiples Terminales​

  • Terminal 1: Dev server (npm run dev:mobile)
  • Terminal 2: Comandos de reload (npm run reload:android)

5. Configura tu IDE​

Si usas VS Code, puedes agregar tasks:

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Reload Android",
      "type": "shell",
      "command": "npm run reload:android",
      "problemMatcher": []
    }
  ]
}

Luego: Cmd+Shift+P → "Run Task" → "Reload Android"

🎯 Workflow Recomendado​

# Terminal 1: Dev server
npm run dev:mobile -- --platform=android --config=auravantbeta

# Editar código en tu editor
# Guardar archivo

# Opción A: Auto-reload (esperar 2-5 seg)
# Opción B: R+R en Terminal 1
# Opción C: npm run reload:android en Terminal 2

📞 Ayuda Adicional​

Si sigues teniendo problemas:

  1. Verifica que el dev server está corriendo
  2. Verifica que el dispositivo está conectado: adb devices
  3. Prueba con npm run reload:android directamente
  4. Revisa MOBILE_DEV_FAQ.md

Recomendación Final: Usa R+R en terminal. Es simple, rápido y sin conflictos. 🚀