rocketseat-docs-rn

macOS

Capa

Dependências

Para configurar o ambiente Android no macOS, iremos realizar 6 instalações principais:

  • Homebrew;
  • Node.js 14 (LTS);
  • Yarn 1;
  • Watchman;
  • JDK 11 (LTS);
  • Android Studio e dependências.

Não será realizada a instalação global do react-native-cli pois ela tem causado erros. Para criar e executar nossos projetos React Native, utilizaremos os comandos via npx

Instalando Homebrew

O Homebrew é um gerenciador de pacotes para OS X muito famoso e útil. Vamos instalá-lo em nosso sistema como seguinte comando:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Instalando Node 14 (LTS) e Watchman

Com o Homebrew instalado, vamos instalar o Node 14 (LTS) e o Watchman:

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

brew install node@14 watchman

Após a instalação do Node, precisamos adicionar o seu caminha a nossa variável ambiente PATH. Procure pelo primeiro dos seguintes arquivos existentes no seu sistema: ~/.zshrc ou ~/.bashrc, e adicione essas linhas no arquivo (de preferência no final):

Se nenhum desses arquivos existir, crie o ~/.bashrc caso utilize o Shell padrão ou ~/.zshrc caso utilize o ZSH.

### Enviroment Variables
export PATH=$PATH:/usr/local/opt/node@14/bin

Após a instalação, verifique se ela foi realizada com sucesso com os comandos (execute um de cada vez):

node -v
npm -v

Instalando Yarn 1

Execute o comando para instalar o Yarn:

sudo npm install --global yarn

Após a instalação, verifique se ela foi realizada com sucesso com o comando:

yarn -v

Instalando JDK 11 (LTS)

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

O último item a ser instalado é o JDK 11 (LTS) do Java que pode ser baixado aqui. Escolha a opção macOS Installer. Para realizar o download, é preciso se cadastrar no site (gratuitamente).

Após o download terminar, execute o arquivo .dmg e instale seguindo os passos do instalador.

A versão 11 do JDK não é obrigatória, mas é a que recomendamos, visto que a 8 é a próxima versão a ser depreciada e a 15 não é LTS e apresenta problemas.

Preparativos Android Studio

Android

Crie uma pasta em um local desejado para instalação da SDK. Ex: ~/Android/Sdk

Anote esse caminho para ser utilizado posteriormente

Anote também o endereço de instalação do JDK 11. Se você tiver o XCode instalado, execute esse comando:

/usr/libexec/java_home

E ele irá retornar o caminho completo, basta anotar. Exemplo:

/Library/Java/JavaVirtualMachines/jdk-11.0.10.jdk/Contents/Home

Caso não tenha o Xcode, você pode baixá-lo gratuitamente na Mac App Store. Porém, se não quiser instalá-lo nesse momento, é possível descobrir o caminho manualmente.

Busque na pasta /Library/Java/JavaVirtualMachines por um diretório que inicie com jdk-11 (ex.: jdk-11.0.10.jdk). Esses números finais variam dependendo da versão instalada na sua máquina. Verificado isso, basta montar o caminho da seguinte maneira:

/Library/Java/JavaVirtualMachines/jdk-11.SUA_VERSAO.jdk/Contents/Home

Lembrando de substituir o SUA_VERSÂO pelo valor da versão instalada na sua máquina.

Com esses caminhos, precisamos configurar algumas variáveis ambiente em nosso sistema. Procure pelo primeiro dos seguintes arquivos existentes no seu sistema: ~/.zshrc ou ~/.bashrc, e adicione essas seis linhas no arquivo (de preferência no final, exatamente após configuração pós-instalação do Node):

Se nenhum desses arquivos existir, crie o ~/.bashrc caso utilize o Shell padrão ou ~/.zshrc caso utilize o ZSH.

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

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 dmg.

Nesse momento será apresentada uma janela com a logo do Android Studio e a pasta de Aplicações. Arraste a logo para dentro da pasta e aguarde o processo terminar.

Em seguida, pesquise no Spotlight por Android Studio e abra o programa.

Configurando Android Studio

A primeira janela a ser apresentada deve ser perguntando 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 em ⬇ 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 no botão ... e escolha a JDK 11 (você pode inclusive utilizar o caminho anotado no passo anterior para te ajudar).

JDK Location

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.

SDK Location

  • 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;
  • O Android Virtual Device vai criar um emulador padrão pronto para execução.

Um fator essencial nessa etapa é o caminho de instalação da SDK. Utilize a pasta que você criou na seção Preparativos para o Android Studio (Ex.: ~/Android/Sdk). Não utilize espaços ou caracteres especiais pois causará erros mais para frente e o próprio Android Studio alerta se o seu caminho não está bom.

Se tudo estiver correto, clique em Next.

Na sequência, temos uma janela perguntando sobre a quantidade de 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

Com o Android Studio, é possível configurar um emulador Android e executar a sua aplicação nele.

Porém, esses emuladores consomem bastante recursos do seu computador. Por isso, se você possui um dispositivo físico Android e sua máquina tenha configurações modestas (ex.: ⬇ i3, ⬇ 4gb RAM), é recomendado executar a aplicação diretamente no dispositivo físico.

Para aprender a configurar o seu emulador no Android Studio e executar a sua aplicação React Native nele, clique aqui

Dispositivo Físico

Caso você tenha um dispositivo físico Android, também é possível executar a aplicação diretamente nele. Caso tenha interesse em configurar essa etapa, clique aqui

Edit this page on GitHub