← Volver al inicio

Configuración para proyectos React Native (WSL2)

| Fredy de la Torre

Introducción

Esta guía resume los pasos necesarios para levantar un proyecto React Native usando WSL2, con la configuración reproducible de este equipo. Está organizada por secciones: variables de entorno, preparación del proyecto, conexión de dispositivos (físicos y emuladores desde Windows) y un resumen del estado del entorno.

Requisitos previos

1. Variables de entorno

Añade estas variables a tu ~/.bashrc o ~/.zshrc en WSL (ajusta la ruta si usas otro usuario):

export ANDROID_HOME=$HOME/Android/Sdk
export ANDROID_SDK_ROOT=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Después de editar, recarga el shell:

source ~/.bashrc  # o ~/.zshrc

2. Preparar cada nuevo proyecto

En cada proyecto crea (si no existe) el archivo android/local.properties apuntando al SDK local:

echo "sdk.dir = /home/$USER/Android/Sdk" > android/local.properties

Con esto, el proyecto Android utilizará el SDK del sistema y evitarás problemas de rutas.

3. Dispositivo físico (modo TCP/IP)

Flujo típico para usar un dispositivo Android vía TCP/IP (puedes ejecutar algunos pasos desde Windows o WSL):

  1. Conecta el dispositivo por USB y habilita ADB TCP/IP:
adb tcpip 5555
  1. Obtén la IP del dispositivo (en el móvil, Ajustes → Wi‑Fi → Detalles) y conéctalo desde WSL:
adb connect 192.168.68.105:5555
adb devices
  1. Inicia Metro y ejecuta la app desde WSL:
yarn start:standalone
yarn android

Si necesitas volver al modo USB:

adb usb

4. Emulador en Windows (acceso desde WSL2)

Si el emulador corre en Windows y quieres controlarlo desde WSL2, realiza estas configuraciones (solo una vez):

  1. En PowerShell (administrador) añade port forwarding y regla de firewall:
# Forward del puerto 5555 para ADB
netsh interface portproxy add v4tov4 listenport=5555 listenaddress=0.0.0.0 connectport=5555 connectaddress=127.0.0.1

# Permitir ADB por TCP en firewall
New-NetFirewallRule -DisplayName "ADB TCP WSL2" -Direction Inbound -Protocol TCP -LocalPort 5555 -Action Allow

Si quieres eliminar estas reglas más tarde:

netsh interface portproxy delete v4tov4 listenport=5555 listenaddress=0.0.0.0
Remove-NetFirewallRule -DisplayName "ADB TCP WSL2"

  1. Inicia el emulador desde Android Studio (Windows).

  2. Habilita ADB TCP en el emulador (desde Windows):

adb devices
# si es necesario, especifica el emulador
adb -s emulator-5556 tcpip 5555
  1. Conéctalo localmente en Windows (localhost):
adb connect 127.0.0.1:5555
adb devices
  1. Obtén la IP del adaptador WSL2 en Windows (PowerShell):
ipconfig | findstr IPv4

Busca la IP del adaptador WSL (ejemplo: 172.19.64.1) y conéctate desde WSL:

adb connect 172.19.64.1:5555
adb devices
  1. Desde WSL usa los comandos habituales:
yarn start:standalone
yarn android

5. Estado del entorno Android en WSL2 (resumen)

6. Variables, PATH y licencias

Notas importantes y consejos rápidos

Conclusión

Con estas configuraciones puedes desarrollar y probar aplicaciones React Native desde WSL2 conectando tanto dispositivos físicos como emuladores de Windows. Si quieres, puedo:

¿Cuál de estas opciones quieres que haga ahora?