React Native no Windows - Ambiente de Desenvolvimento

Ambiente Android no Windows

Através do Windows não é possível executar emulador para iOS.

Começaremos realizando a instalação do Chocolatey, que é um gerenciador de pacotes e dependências para o sistema Windows.

O Chocolatey permitirá o gerenciamento de pacotes com instalações, atualizações, entre outras tarefas, de forma prática e através de comandos de terminal.

Para instalar o Chocolatey você precisa abrir o terminal Windows PowerShell com credenciais de administrador do sistema e para isso, clique com o botão direito do mouse no menu iniciar, selecione a opção Windows PowerShell (Admin) e clique no botão OK para confirmar.

Execute o comando abaixo para verificar se você possui permissões para instalar dependências com o PowerShell:

Get-ExecutionPolicy

Caso o retorno desse comando seja diferente de Restricted, não é necessário rodar o comando abaixo. Porém, se o retorno for Restricted, execute no PowerShell:

Set-ExecutionPolicy AllSigned

Por fim, execute o comando que instala o Chocolatey no seu PC. Fique atendo(a) para copiar o comando inteiro e colar no PowerShell para executar.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Após a instalação, feche o Windows PowerShell e abra-o novamente da mesma forma com credenciais de administrador, e execute o comando choco para confirmar que o Chocolatey está funcionando no seu PC.

Instalação do Node.js LTS e do OpenJDK 11 LTS

Com o Windows PowerShell devidamente aberto como administrador, executar o Chocolatey para realizar as instalções do Node e do Java:

choco install -y nodejs-lts openjdk11

Após a instalação, feche o Windows PowerShell e abra-o novamente para verificar os pacotes instalados.

Verificar o Node.js:

node -v

Verificar o Java:

java -version

Instalação do Android Studio

Vamos preparar a instalação do Android Studio criando o local para o SDK. Recomendo usar o caminho C:\Android\Sdk como local de instalação da SDK.

Não utilize caracteres especiais, espaço ou acentuação para definir o caminho para a SDK do Android Studio.

Depois de definir o local para a SDK, clique com o botão direito do mouse no menu iniciar, abra a opção Sistema e clique em Configurações avançadas do sistema na lista de opções no lado direito da tela. Na tela seguinte, clique no botão Variáveis de ambiente.

Clique no botão Nova... da parte inferior, ou seja, para criar uma variável de ambiente para ficar disponível em todo o sistema, independente do usuário logado.

Preencha o formulário informando o Nome da Variável como ANDROID_HOME. O Valor da variável é C:\Android\Sdk, que é exatamente o caminho que definimos para a SDK. Clique em OK para confirmar.

Normalmente a instalação do OpenJDK através do Chocolatey já cria a variável JAVA_HOME automaticamente. Verifique se ela já existe aí no seu PC, caso não exista, precisará executar o mesmo processo de criação de variável, porém pegando o local de instalação do Java que normalmente fica no local C:\Program Files\OpenJDK\openjdk-11.[SUA_VERSÃO].

Na mesma janela de variáveis de ambiente precisamos incluir quatro configurações na variável Path já existente. Selecione a variável Path na lista inferior e clique no botão Editar.... Na tela de edição, clique no botão Novo para informar a configuração abaixo, porém uma por linha:

%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
%ANDROID_HOME%\platform-tools

Instalando Android Studio

Acesse a página do Android Studio e clique no botão Download Android Studio.

Caso seu Windows seja versão 32 bits, será baixada a opção .zip que não vem com o instalador .exe. Basta extrair a pasta android-studio em um local de preferência, como por exemplo C:\studio, e executar o arquivo studio.exe dentro da pasta bin. Feito isso, você pode pular até a próxima seção.

Execute o instalador que foi baixado, para iniciar com o processo de instalação.

A primeira janela que aparecerá é para escolher o que vai ser instalado. Por padrão, a opção Android Studio já vem selecionada. Selecione também a opção Android Virtual Device caso não esteja marcada e clique em Next.

Sobre o local de instalação do Android Studio, pode deixar o caminho padrão e clicar em Next.

Confirme o padrão já sugerido pela instalação e clique em Install.

Ao concluir a instalação, clique em Next e em seguida Finish.

Configurando Android Studio

Com o Android Studio instalado, vamos proceder com a configuração inicial do programa.

A primeira janela perguntará sobre a importação de configurações de outro Android Studio. Selecione a opção Do not import settings e clique em OK.

Em seguida, o Android Studio começará a carregar. Em algum ponto do carregamento, será apresentada uma janela sobre compartilhamento de dados anônimos com a Google. Essa opção é pessoal, escolha o que preferir.

Após o carregamento terminar, deve aparecer uma página de Welcome. Clique em Next.

Na sequência, será pedido o tipo de instalação. Escolha a opção Custom e clique em Next.

Nesse momento, será pedido para escolher a localização do pacote JDK instalado. Clique na setinha para baixo e verifique se a opção JAVA_HOME está apontando para a JDK 11. Se sim, escolha e Clique em Next. Caso contrário, clique no botão ... e escolha a JDK 11 (você pode inclusive utilizar o caminho anotado no passo anterior para te ajudar).

Em seguida, será perguntado sobre qual tema será utilizado. Escolha o que preferir e clique em Next.

Chegamos na etapa mais importante do processo, a instalação da SDK. A janela apresentará algumas opções, marque todas:

• A SDK é o pacote que vai possibilitar que sua aplicação React Native faça o build. Por padrão, ele instala a última SDK estável;
• O Intel HAXM é para melhorar a performance da emulação (Se você for utilizar o Hyper-V ou possuir um processador AMD, não marque essa opção. Siga esse guia ao final da instalação do Android Studio);
• O Android Virtual Device vai criar um emulador padrão pronto para execução.

Verifique o caminho de instalação da SDK no último campo da tela. A sugestão desde o início deese post é o local C:\Android\Sdk.

Se tudo estiver correto, clique em Next.

Na sequência, temos uma janela perguntando sobre a quantidade de memória RAM que será disponibilizada para que o HAXM utilize. Essa etapa não irá aparecer para todos pois nem todo computador é compatível com esse recurso. Deixe o recomendado pelo programa e clique em Next.

Em seguida, será apresentada uma janela com um resumo de todas as opções escolhidas até aqui. Verifique se está tudo certo, principalmente os caminhos da SDK e do JDK. Clique em Finish.

Por fim, será realizada a instalação das configurações selecionadas. Quando o programa terminar, clique em Finish.

Emulador - AVD Manager

Utilizaremos o emulador do Android Studio pois com as atualizações recentes se consolidou como a melhor opção atualmente.

Abra o Android Studio como admin. Clique na opção More Options, e em seguida clique em AVD Manager.

Na sequência, será apresentada uma tela com os emuladores instalados. Se você marcou a opção Android Virtual Device na etapa de configuração do Android Studio, deve aparecer um emulador já configurado e pronto para uso. Caso queira utilizar esse mesmo, pule para a próxima seção.

Porém, caso queira criar seu próprio emulador, selecione a opção Create Virtual Device no canto inferior esquerdo.

Nessa etapa, será perguntado qual Hardware você quer selecionar. Como exemplo, escolha na aba Phone o Pixel 4 (perceba que ele e apenas alguns outros tem acesso a Play Store, caso esse seja um fator importante na sua decisão). Após escolher, clique em Next.

Em seguida você deverá escolher a imagem do sistema (API) do emulador a partir de uma das três listas: Recommended, x86 Images e Other Images. Se essa é sua primeira vez, provavelmente nenhuma imagem estará baixada. Clique no link de Download na frente do nome da imagem, aceite as licenças e aguarde a instalação. Como exemplo, escolha da lista Recommended a opção Pie (API 28) que é compatível com o Google Play.

Por fim, serão apresentadas algumas configurações do seu emulador. No campo AVD Name escolha um nome para o seu emulador e clique em Finish.

Pronto. Seu emulador já está disponível na lista.

Iniciando o Emulador

Com o emulador pronto, basta clicar no botão Play e aguardar o AVD iniciar. Esse processo pode demorar, principalmente na primeira execução.

Agora, abra o terminal e execute o seguinte comando:

adb devices

Deve aparecer uma lista com os dispositivos android conectados e o nome do seu emulador com o status device, exemplo:

List of devices attached
NOME_DO_SEU_EMULADOR   device

Para executar um app no emulador é preciso que você já tenha criado o seu projeto react native. Caso não tenha criado ainda, você pode criar com o comando npx react-native init nomedoprojeto.

Agora, acesse a pasta do projeto e com o emulador em execução, abra dois terminais, o primeiro para executar o Metro Bundler e o segundo para executar o app.

Terminal com o Metro Bundler:

npm start

Terminal para rodar o app:

npm run android

Rodar o App em dispositivo físico Android via USB

Se você possui um dispositivo físico Android, poderá também configurá-lo para executar o App durante o desenvolvimento. Para isso será necessário o uso de cabo USB entre o seu PC e o dispositivo móvel.

Na sequência estarei descrevendo um breve passo a passo para isso:

1. Conectar o dispositivo físico via cabo USB no seu PC.

Será necessário habilitar a Depuração USB nas Opções de Desenvolvedor. Essa habilitação varia de acordo com a versão do Android e o fabricante do dispositivo.

Vou descrever a sequência no meu dispositivo, que é da fabricante Samsung com o Android versão 11: Configurações; Sobre o telefone; Informações do software; Número de compilação ou Número da versão.

2. Ativar a Depuração USB em: Configurações; Opções do desenvolvedor; Depuração USB. Para isso será necessário ativar o uso das opções do desenvolvedor.

3. Criar o App do React Native.

4. Executar o comando adb devices para verificar se o dispositivo físico está pronto para executar o app. A saída desse comando deverá ser similar a:

* daemon not running; starting now at tcp:5037
* daemon started successfully
List of devices attached
RQPS902PS6E device

5. Abrir um terminal do Powershell na pasta do projeto e executar o comando npm start para rodar o Metro Bundler.

6. Abrir outro terminal do Powershell na pasta do projeto e executar o comando npx react-native run-android para instalar e rodar o App no dispositivo físico.