Debugando React Native No Android Via Wi-Fi
Como desenvolver e debugar aplicativos React Native diretamente no seu smartphone via Wi-Fi
React Native permite criar aplicações nativas usando Javascript e React de maneira extremamente prática. Realmente, praticidade é a palavra que define bem uma gama de vantagens do React Native sobre os seus concorrentes, como Xamarin e Cordova.
Rodar seus apps em seus devices e poder debugar sem o auxílio de USB nunca foi tão fácil!
Uma característica muito legal do React Native é nos permitir, em desenvolvimento, atualizar as modificações no código sem a necessidade de recompilar o app. Isso sem configuração nenhuma, só ativar o reload ou hot reload e partir pro abraço.
Outra característica muito interessante também é permitir que desenvolvamos direto em um ou mais devices ao mesmo tempo, usando atualização em tempo real, através de uma conexão Wi-Fi. Uma das vantagens de se utilizar um device, ao invés de emular, é a quantidade de recursos liberados no sistema, visto que desenvolver pra mobile, muitas vezes, é penoso e lento devido à alta utilização de memória.
A Configuração
Sem mais delongas, vamos mostrar como vincular o React Packager do React Native a um ou mais devices Android via Wi-Fi:
Habilite a Depuração por USB
A primeira coisa é habilitar o modo de depuração por UBS do seu dispositivo. A única etapa em que precisaremos de um cabo UBS será na instalação do aplicativo no device.
Geralmente essa opção encontra-se em Configurações > Opções de Desenvolvedor > Depuração USB. Em alguns modelos de Android, o item “Opções de Desenvolvedor” fica escondido.
O video abaixo explica como habilitar o “Modo Desenvolvedor”:
Verifique o Device Pelo ADB
Tendo habilitado a depuração USB, conecte o dispositivo por USB. Vá ao terminal e rode ‘adb devices’. Verifique se o seu dispositivo Android aparece na lista de devices e se está autorizado. Pode ser que você tenha que autorizar a conexão pelo device.
Instale o App no Device
Acesse o diretório raiz do seu projeto React Native pelo terminal e rode ‘react-native run-android’. Antes disso, verifique se o app está instalado no device. Se estiver, desinstale-o:
O app foi instalado com sucesso, entretanto você provavelmente receberá dois erros em sequência, mas não se preocupe, pois vamos contorná-los:
Saiba seu IP na Rede Local
Verifique se o device e o seu computador estão na mesma conexão. Feito isso, você precisará saber qual o IP da sua máquina na rede. Para descobrir o seu IP, basta rodar no terminal ‘netstat’ ou ‘ifconfig’. No caso do exemplo é 192.168.0.11.
Use o Menu de Desenvolvimento no App Instalado
No app, abra o menu de desenvolvimento do React Native. Você consegue abrir pressionando e segurando o botão de menu ou acionando o “Shake Gesture” (sacudir o device).
Faça o Link Entre o App e o React Packager
Com o menu aberto, vá em Dev Settings > Debug server host & port for device e insira o seu IP com a porta 8081 (A porta em que o React Packager irá rodar por padrão).
Caso o packager não tenha sido iniciado automaticamente com comando ‘react-native run-android’, rode no terminal, na raiz do projeto, o comando ‘react-native start’:
Últimos Ajustes
Pra finalizar, basta abrir o menu de desenvolvimento no app e acionar o Reload, Live Reload ou, o meu preferido, Hot Reloading (que faz uma espécie de Hot Swap no código sem a necessidade de fazer refreshing no app para inserir as mudanças). Pronto, o seu app está configurado para ser desenvolvido e conectado ao package via Wi-Fi. O React Packager irá processar seu código e enviar as mudanças para o App, sem a necessidade de usar USB.
Pronto!
Agora você tem a praticidade de desenvolver sem o auxílio de um cabo USB e pode também colocar outros dispositivos e programar o mesmo app rodando em todos ao mesmo tempo durante o desenvolvimento. Para adicionar outros devices nesse processo de desenvolvimento, basta refazer essas etapas em outros devices.
Connect
A Getty/IO desenvolve aplicativos de alta performance com React Native para iOS e Android em 30 dias. Para saber mais envie uma mensagem para hello@getty.io
Juntos, imaginamos e criamos aplicações web e mobile que escalam automaticamente e estão sempre disponíveis a partir de qualquer dispositivo em qualquer lugar.
