Dependências necessárias para o ambiente React Native Expo

Antes de começar, é importante conhecer as ferramentas que vamos usar. Dessa forma, você entenderá o papel de cada uma no processo.

Chocolatey

Chocolatey é um gerenciador de pacotes para Windows. Ou seja, ele facilita a instalação de softwares via linha de comando. Além disso, funciona de forma semelhante ao apt do Linux ou brew do macOS.

Node.js

Node.js é um ambiente de execução JavaScript. Em outras palavras, ele permite rodar código fora do navegador. Por isso, é muito usado no desenvolvimento de aplicações web e APIs.

Microsoft Build of OpenJDK

Microsoft Build of OpenJDK é uma distribuição gratuita do OpenJDK. Especificamente, a Microsoft mantém essa versão. Consequentemente, ela é necessária para compilar projetos Java e aplicativos Android.

Android Studio

Android Studio é a IDE oficial do Google. Principalmente, ela inclui emulador e ferramentas de depuração. Além disso, oferece suporte completo para criação de apps.

Visual Studio Code

Visual Studio Code é um editor de código da Microsoft. Certamente, ele é leve e poderoso. Por isso, é amplamente usado para desenvolvimento web e mobile.

Instalando Chocolatey

Primeiramente, precisamos verificar as permissões do terminal. Para isso, execute o comando abaixo:

Get-ExecutionPolicy

Caso o retorno seja diferente de "Restricted", então pule para o próximo passo. Porém, se o retorno for "Restricted", execute este comando:

Set-ExecutionPolicy AllSigned

Agora, execute o comando abaixo para instalar o Chocolatey:

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'))

Em seguida, feche seu PowerShell. Depois disso, abra normalmente seu CMD. Por fim, teste a instalação com este comando:

choco -v

Instalando o Node.js e o OpenJDK

Primeiramente, abra o PowerShell como administrador. Em seguida, rode o comando abaixo:

choco install -y nodejs-lts microsoft-openjdk-21

Além disso, você pode acessar a página de download do OpenJDK.

Importante: o local de instalação aparece no log. Portanto, guarde esse diretório. Afinal, vamos usá-lo para criar a variável JAVA_HOME. Geralmente, o caminho é: C:\Program Files\Microsoft\jdk-21.0.8.9-hotspot\

Log de instalação do OpenJDK para ambiente React Native Expo

Depois disso, feche o PowerShell. Em seguida, abra o CMD. Se o CMD já estiver aberto, então feche-o e abra novamente. Por fim, execute os comandos abaixo para confirmar:

node -v
npm -v
java -version

Configurando as variáveis de ambiente

Primeiramente, abra o menu Iniciar. Em seguida, procure por "Variáveis de ambiente". Na janela que abrir, clique em "Advanced". Depois disso, clique em "Variáveis de ambiente".

Acessando variáveis de ambiente para ambiente React Native Expo

Configurando JAVA_HOME

No grupo Variáveis do sistema, verifique se existe JAVA_HOME.

Se existir, então verifique se o caminho está correto. Caso não esteja, clique em JAVA_HOME. Depois disso, clique em editar. Por fim, informe o caminho correto.

Se não existir, então clique em "New". Em seguida, coloque o nome como JAVA_HOME. Por fim, informe o caminho correto.

Importante: o valor deve ser o caminho do log da instalação do OpenJDK.

Configurando JAVA_HOME para ambiente React Native Expo

Configurando ANDROID_HOME

Primeiramente, acesse o disco local C. Em seguida, crie uma pasta chamada "Android".

Criando pasta Android para ambiente React Native Expo

Depois disso, acesse a pasta Android. Então, crie uma pasta chamada "Sdk".

Criando pasta Sdk para ambiente React Native Expo

No grupo Variáveis do USUÁRIO, verifique se existe ANDROID_HOME.

Se existir, então verifique se o caminho está correto. Caso não esteja, clique em ANDROID_HOME. Depois disso, clique em editar. Por fim, informe C:\Android\Sdk.

Se não existir, então clique em "New". Em seguida, coloque o nome como ANDROID_HOME. Por fim, informe C:\Android\Sdk.

Configurando ANDROID_HOME para ambiente React Native Expo

Adicionando ao Path

Primeiramente, clique em OK. Depois disso, busque por Path nas variáveis do usuário. Em seguida, selecione e clique em editar. Na janela que abrir, clique em "Novo". Então, adicione os valores abaixo:

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

Adicionando paths para ambiente React Native Expo

Instalando o Android Studio

Primeiramente, acesse a página de download do Android Studio. Em seguida, role até a seção "Downloads do Android Studio". Depois disso, baixe o pacote para seu sistema.

Quando clicar em download, então aceite os termos. Em seguida, role até o final da página. Depois disso, marque que aceitou os termos. Por fim, clique em download.

Download do Android Studio para ambiente React Native Expo

Setup Inicial do Android Studio

Primeiramente, vá até a pasta do arquivo. Em seguida, execute o instalador.

Instalador do Android Studio para ambiente React Native Expo

Importante: na minha máquina, já possuo o Android Studio. Por isso, aparece a opção de desinstalar.

Depois disso, clique em Next até aparecer a escolha dos componentes. Certamente, o Android Virtual Device deve estar selecionado. Em seguida, clique em Next para os outros passos.

Selecionando componentes para ambiente React Native Expo

Quando concluir, então marque para inicializar o Android Studio. Por fim, clique em Concluir.

Finalizando instalação para ambiente React Native Expo

Instalação do SDK

Assim que o Android Studio inicializar, pode aparecer uma solicitação. Nesse caso, clique na opção que preferir.

Tela de compartilhamento do Android Studio

Agora, chegamos na etapa mais importante: a instalação da SDK. Primeiramente, selecione a opção Customizada. Em seguida, clique em Next.

A próxima janela apresentará opções. Portanto, marque todas. Além disso, coloque o diretório C:\Android\Sdk.

Sobre as opções disponíveis:

  • SDK: é o pacote para build da aplicação React Native.
  • Intel HAXM: melhora a emulação. Contudo, não marque se usar Hyper-V ou AMD.
  • Android Virtual Device: cria um emulador pronto para uso.

Configuração do SDK para ambiente React Native Expo

Configuração do SDK

Primeiramente, será feito o download dos recursos. Após isso, você verá a tela de boas vindas. Em seguida, clique em "Mais ações". Depois disso, clique em SDK Manager.

SDK Manager para ambiente React Native Expo

Certamente, o SDK deve estar em C:\Android\Sdk. Além disso, verifique se o Android Baklava está instalado.

Localização do SDK para ambiente React Native Expo

Agora, clique em "SDK Tools". Em seguida, marque as opções da imagem. Após marcar, clique em "Aplicar". Por fim, clique em OK.

SDK Tools para ambiente React Native Expo

Configurando o Emulador Android

Na tela de boas vindas, clique em "Mais ações". Depois disso, clique em "Virtual Device Manager".

Virtual Device Manager para ambiente React Native Expo

Em seguida, aparecerá a janela do Device Manager. Então, clique no botão [+]. Depois disso, selecione o device (Pixel 8 Pro). Por fim, clique em Next.

Criando device para ambiente React Native Expo

Em seguida, clique em "Configurações Adicionais". Depois disso, role até o final. Então, configure como na imagem. Por fim, clique em "Finalizar".

Importante: se sua máquina tiver 16GB ou mais de RAM, então ajuste para 4GB.

Configurações do emulador para ambiente React Native Expo

Depois disso, na tela do Device Manager, encontre o dispositivo. Em seguida, clique em inicializar.

Inicializando emulador para ambiente React Native Expo

Criando um Projeto com Expo

Agora, vamos criar um projeto Expo com TypeScript. Para isso, rode o comando abaixo. Importante: substitua [nomeapp] pelo nome do seu app.

Observação: pode ser necessário confirmar o download. Nesse caso, basta apertar Y e Enter.

npx create-expo-app@latest [nomeapp] --template expo-template-blank-typescript

Criando projeto React Native Expo

Quando o processo concluir, então acesse a pasta do projeto. Importante: vou considerar que você já instalou o VSCode e reiniciou o PC.

Projeto React Native Expo criado

Em seguida, digite code ./[nomeapp] para abrir no VSCode. Depois disso, abra um novo terminal.

Terminal no VSCode para ambiente React Native Expo

Normalmente, o terminal do VSCode é o PowerShell. Contudo, precisamos do CMD. Para isso, clique na seta ao lado do [+]. Depois disso, clique em Command Prompt.

Selecionando CMD para ambiente React Native Expo

Iniciando o Emulador

Para rodar o projeto, o emulador precisa estar aberto. Primeiramente, abra um novo CMD fora do VSCode. Em seguida, liste os emuladores:

emulator -list-avds

No nosso caso, o emulador é o Pixel_8_Pro. Contudo, o nome pode variar conforme sua configuração.

Listando emuladores para ambiente React Native Expo

Para inicializar, então use o comando abaixo. Importante: substitua [device] pelo nome correto:

emulator -avd Pixel_8_Pro

Após isso, o emulador irá inicializar. Importante: não feche esse terminal durante o uso.

Emulador inicializando para ambiente React Native Expo

Rodando o Projeto

Quando o emulador inicializar, então volte ao VSCode. Em seguida, rode este comando no CMD:

npm run android

Após isso, o Expo Go será instalado automaticamente. Em seguida, o app será inicializado.

App rodando no ambiente React Native Expo

Alternativa: Rodando no Celular

Além disso, você também pode rodar no celular. Para isso, use npm run start ao invés do comando anterior.

Depois disso, baixe o Expo Go:

Por fim, escaneie o QRCode do terminal. Importante: certamente você deve usar a mesma rede Wi-Fi.

Scripts

Utilitário para inicializar emulador

Baixar Script

Este utilitário permite inicializar o emulador rapidamente. Dessa forma, você economiza tempo no dia a dia.

Primeiramente, baixe e extraia o arquivo.

Script para ambiente React Native Expo

Em seguida, clique duas vezes no emulator.bat. Depois disso, escolha o emulador digitando o número. Por fim, aperte Enter.

Consequentemente, o emulador escolhido iniciará automaticamente.

Importante: certamente o ambiente precisa estar configurado corretamente para funcionar.

Utilitário para ambiente React Native Expo

Conclusão

Finalmente, agora você tem o ambiente de desenvolvimento React Native Expo configurado corretamente.

Certamente, todas as dependências estão instaladas. Além disso, as variáveis estão configuradas. Consequentemente, o emulador está funcionando perfeitamente.

Dessa forma, você está pronto para criar seus apps mobile.

Para mais informações, consulte a documentação oficial do Expo. Além disso, acesse a documentação do React Native.