Linux Ubuntu - Ambiente de Desenvolvimento React Native

Neste post estarei demonstrando o passo a passo para preparar o seu Ambiente de desenvolvimento com React Native usando o Linux Ubuntu 20.04, incluindo também o processo de instalação e configuração do emulador Android.

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

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

Antes das instalações, vamos atualizar o sistema para evitar conflitos futuros.

sudo apt update

sudo apt upgrade

Começaremos realizando a instalação do cURL:

sudo apt install curl

Agora com o cURL instalado, vamos instalar o Node.js (LTS) utilizando os seguintes comandos:

Se você já tiver o Node.js instalado em sua máquina, certifique-se que sua versão é a mais recente (LTS).

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt install -y nodejs

Verificar o Node.js:

node -v

Agora precisamos instalar a JDK (Java Development Kit) na versão 11 (LTS mais recente) com o seguinte comando:

Se você já tiver o JDK instalado em sua máquina, certifique-se que sua versão seja a 8 ou mais recente.

sudo add-apt-repository ppa:openjdk-r/ppa

sudo apt update

sudo apt install openjdk-11-jdk

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 como local o caminho ~/Android/Sdk.

Esse caminho para a SDK do Android Studio NÃO pode ter espaços, acentuação ou caracteres especiais.

Verifique e anote o caminho de instalação do JDK 11. Exemplo:

/usr/lib/jvm/java-11-openjdk-amd64

Se necessário, procure na pasta /usr/lib/jvm/ pela pasta referente ao JDK 11.

O próximo passo é configurar algumas variáveis ambiente no sistema. Essa configuração deve ser feita no arquivo respectivo ao shell em uso no seu sistema: ~/.zshrc ou ~/.bashrc. Adicione as linhas abaixo no arquivo (de preferência no início):

export JAVA_HOME=CAMINHO_ANOTADO_COM_SUA_VERSÃO
export ANDROID_HOME=~/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Se nenhum desses arquivos existir, crie o ~/.bashrc caso utilize o Shell Bash ou ~/.zshrc caso utilize o Zsh.

Não esqueça de substituir o valor na linha JAVA_HOME pelo caminho que você anotou anteriormente. Além disso, caso esteja utilizando uma pasta diferente para a SDK do Android, altere acima.

Instalando Android Studio

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

Vá até a pasta de download e abra o arquivo tar.gz.

Esse arquivo deve possuir uma pasta android-studio dentro. Extraia essa pasta em um local de preferência, como por exemplo ~/.

Após a extração, adicione a seguinte variável ambiente no seu sistema:

export PATH=$PATH:~/android-studio/bin

A adição desse caminho possibilita a execução do Android Studio diretamente pelo terminal com o comando studio.sh. Caso tenha extraído em uma pasta diferente ou alterado o nome da pasta, ajuste o path acima para o que você utilizou.

Agora, abra o terminal (reinicie se já estiver aberto) e execute o seguinte comando:

studio.sh

Configurando Android Studio

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 opção Performance (Intel® HAXM) não irá aparecer na instalação linux.

• 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 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 ~/Android/Sdk.

Se tudo estiver correto, clique em Next.

Na sequência, temos uma janela avisando sobre a possibilidade de executar o Emulador com melhor performance usando o KVM (Kernel-mode Virtual Machine). Essa etapa não irá aparecer para todos pois nem todo computador é compatível com esse recurso. Caso tenha interesse em instalar essa ferramenta, será ensinado como ao final dessa página. Finalizada essa etapa, 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.

KVM (Kernel-mode Virtual Machine)

Se o seu Android Studio acusou a possibilidade de instalar o KVM e você pretende executar sua aplicação React Native no Emulador, pode prosseguir com esse tutorial. Caso contrário, pode pular para a próxima seção.

Para instalar o KVM, o processo é bem simples. Em sistema Linux Ubuntu instale o KVM executando o comando:

sudo apt install qemu-kvm

Em seguida, adicione o seu usuário no grupo do KVM:

sudo usermod -aG kvm $USER

Por fim, reinicie o sistema e execute o comando:

grep kvm /etc/group

Se o resultado for algo semelhante ao exposto abaixo, o KVM está instalado corretamente e pronto para uso.

kvm:x:NUMERO_QUALQUER:SEU_USUARIO

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. No canto inferior direito da janela, clique em Configure e escolha a opção 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 3a (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