22 de dezembro de 2021 • 7 min de leitura

macOS - Ambiente de Desenvolvimento React Native

Configurando o ambiente de desenvolvimento de apps para Android e iOS com o React Native em sistema macOS.

Neste post estarei demonstrando o passo a passo para preparar o seu Ambiente de desenvolvimento com React Native usando o macOS, incluindo também o processo de instalação e configuração dos emuladores Android e iOS.

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

Começaremos realizando a instalação do Homebrew. O Homebrew é um gerenciador de pacotes para macOS muito famoso e útil. Vamos instalá-lo em nosso sistema com o seguinte comando:

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

Agora com o Homebrew instalado, vamos instalar o Node.js (LTS) e o Watchman 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 "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

brew install node watchman

Verificar a versão do Node.js:

node -v

Agora precisamos instalar a JDK (Java Development Kit) na versão 11 (ou LTS mais recente). Para isso acesse o link com a Página de Download da JDK para macOS e escolha a opção macOS Installer.

Para realizar o download, é preciso se cadastrar no site (gratuitamente).

Verificar o Java:

java -version

Instalação do CocoaPods

CocoaPods é um gerenciador de dependências que precisaremos instalar para que nossos projetos React Native funcionem corretamente. Execute o seguinte comando no seu terminal:

sudo gem install cocoapods

Instalação do XCode

Caso não consiga instalar e/ou atualizar o XCode por ter um macOS antigo, utilize o emulador para Android.

XCode é uma ferramenta gratuita desenvolvida pela Apple e essencial nos projetos React Native para iOS, visto que é a partir dela que temos acesso a SDKs e Simuladores de diversos dispositivos Apple.

Para baixar, basta acessar a Mac App Store e clicar no botão de Download.

Executando o Simulator iOS

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.

Com o Xcode instalado, acesse a pasta do projeto e 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 ios

O Simulator do Xcode deve abrir automaticamente. Você pode ainda escolher a versão do simulator utilizando a propriedade --simulator, conforme exemplo abaixo:

npm run ios --simulator="iPhone 13"

Instalação do Android Studio

Vamos preparar a instalação do Android Studio. A instalação no macOS define automaticamente o caminho ~/Library/Android/sdk para a SDK.

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

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.11.jdk/Contents/Home

Busque na pasta /Library/Java/JavaVirtualMachines por um diretório que inicie com jdk-11. Basta montar o caminho da seguinte maneira:

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

Lembrando de substituir o termo SUA_VERSAO pelo valor da versão instalada na sua máquina.

Com esses caminhos, precisamos configurar algumas variáveis ambiente em nosso 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=~/Library/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 .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 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 Bem-vindo. 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 deste post é o local ~/Library/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

Abra o Android Studio. 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 Q (API 29) 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