Erika Lopes
All posts

Como configurar o ambiente para React Native no Windows, Linux e macOS

Um guia passo a passo pelos dois caminhos oficiais, Expo e React Native CLI, com os comandos e as versões exatas que a documentação pede hoje em cada sistema operacional.

This post has not been translated yet. You are reading the original Portuguese version.

Configurar o ambiente é a parte do React Native que mais gente abandona antes de escrever a primeira linha. Não é difícil, é só longa, e cada sistema operacional pede uma coisa diferente.

Este guia segue a documentação oficial do React Native e do Expo, e marca com clareza os pontos em que as duas discordam ou simplesmente não dizem nada. Os links de todas as fontes estão no fim.

Escolha o seu sistema nas abas: a escolha vale para o resto da página.

Antes de tudo: dois caminhos, não um

Existem dois jeitos oficiais de começar, e eles pedem ambientes diferentes:

  • Expo é o caminho recomendado pela documentação do React Native para projetos novos. Ele cuida da parte nativa para você. Para só experimentar, nem é preciso instalar Android Studio ou Xcode: dá para rodar no app Expo Go.
  • React Native CLI é o caminho sem framework, para quando você tem restrições que o Expo não atende ou quer montar a sua própria base.

A diferença prática no ambiente é grande:

Expo (Expo Go) Expo (development build) React Native CLI
Node.js sim sim sim
JDK 17 não sim sim
Android Studio não sim sim
Xcode (só macOS) não sim sim

Se você só quer ver algo rodando hoje, pule direto para criar o projeto e use o Expo Go. Se o objetivo é um projeto de produção, siga o guia inteiro.

Sobre o Expo Go. A documentação do Expo o descreve como um ambiente para estudantes e para quem está experimentando, e diz explicitamente que ele é limitado e não serve para projetos de produção. Estes pedem um development build, que aceita módulos nativos próprios.

Passo 1: Node.js

Esta é a única exigência comum a todos os caminhos.

A documentação do React Native pede Node 22.11.0 ou mais novo. A do Expo pede apenas “Node.js (LTS)”, sem citar número de versão. Na prática, atender o número do React Native satisfaz os dois.

Com Homebrew:

brew install node
brew install watchman

O Watchman é da Meta e observa mudanças no sistema de arquivos. A documentação do React Native manda instalar junto no macOS. A do Expo diz que ele só é necessário em projetos com SDK 55 ou anterior.

A documentação do React Native usa Chocolatey, em um Prompt de Comando como administrador, e aproveita para instalar o JDK na mesma linha:

choco install -y nodejs-lts microsoft-openjdk17

A página também cita o nvm-windows como alternativa para gerenciar versões do Node.

O Watchman não é mencionado em nenhuma das páginas de Windows.

A documentação do React Native não dá um comando aqui. Ela manda seguir as instruções da sua distribuição na página de gerenciadores de pacotes do Node.js, instalando o Node 22.11.0 ou mais novo.

Para o Watchman também não há pacote indicado: a orientação é compilar a partir do código-fonte.

Passo 2: JDK 17

Necessário para Android, tanto no React Native CLI quanto no development build do Expo. As duas documentações pedem a versão 17, e a do React Native avisa que versões mais novas podem causar problemas.

As duas documentações recomendam a distribuição Azul Zulu, via Homebrew:

brew install --cask zulu@17
brew info --cask zulu@17
open /opt/homebrew/Caskroom/zulu@17/<numero-da-versao>

Em Macs que não são Apple Silicon o caminho é /usr/local/Caskroom. Na pasta aberta, execute Double-Click to Install Azul Zulu JDK 17.pkg.

Depois adicione ao ~/.zshrc (ou ~/.bash_profile):

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

Via Chocolatey, em um Prompt de Comando como administrador:

choco install -y microsoft-openjdk17

Nenhuma das duas documentações manda configurar JAVA_HOME no Windows.

A documentação do React Native acrescenta um aviso: se você usar um JDK mais novo, talvez precise atualizar a versão do Gradle, alterando distributionUrl em android/gradle/wrapper/gradle-wrapper.properties dentro do projeto.

Não há comando nas documentações. As duas dizem a mesma coisa: instale o OpenJDK 17, pelo AdoptOpenJDK ou pelo gerenciador de pacotes da sua distribuição.

Também não há instrução de JAVA_HOME para Linux em nenhuma das páginas.

Passo 3: Android Studio e o SDK

Baixe o Android Studio. No assistente de instalação, marque estas caixas:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

No Windows, a documentação do React Native pede mais uma: Performance (Intel ® HAXM), se você ainda não usa Hyper-V.

Aqui as duas documentações discordam

Este é o ponto que mais causa confusão, então vale ler com atenção:

  • A documentação do React Native manda instalar, em SDK Platforms, o Android 15 (VanillaIceCream) com o Android SDK Platform 35.
  • A documentação do Expo diz que o Android 16 (Baklava) é obrigatório para compilar um app React Native, e pede o Android SDK Platform 36 mais o Sources for Android 36.

Não são instruções equivalentes, e nenhuma das duas está desatualizada por descuido: elas descrevem toolchains diferentes. Instale o que a sua stack pedir, e, se você for usar as duas, instalar as duas plataformas não causa conflito.

Em SDK Tools:

  • React Native: Android SDK Build-Tools versão 36.0.0 e Android SDK Command-line Tools (latest).
  • Expo: pelo menos uma versão de Android SDK Build-Tools e o Android Emulator.

O SDK Manager fica no botão More Actions da tela inicial do Android Studio, ou em Settings → Languages & Frameworks → Android SDK.

Na aba SDK Platforms, marque também uma imagem de sistema. Em Macs com Apple Silicon, a documentação indica a Google APIs ARM 64 v8a System Image. Em Macs Intel, Intel x86 Atom_64 System Image ou Google APIs Intel x86 Atom System Image.

O SDK Manager fica no botão More Actions, ou em Settings → Languages & Frameworks → Android SDK.

A imagem de sistema indicada é Intel x86 Atom_64 System Image ou Google APIs Intel x86 Atom System Image. A documentação não oferece opção ARM no Windows.

Se o HAXM não estiver instalado ao criar o emulador, o Android Studio oferece um botão Install HAXM.

Na documentação do React Native, o SDK Manager no Linux é aberto pelo botão Configure da tela inicial. As caixas a marcar são as mesmas do Windows.

A página também recomenda configurar aceleração de VM no seu sistema.

Atenção. As páginas do Expo que li não têm seção de Android Studio para Linux: só JDK e Watchman. Para Linux, siga a documentação do React Native.

Passo 4: variáveis de ambiente

É aqui que a maior parte dos erros de “comando não encontrado” nasce.

Adicione ao ~/.zprofile ou ~/.zshrc (no bash, ~/.bash_profile ou ~/.bashrc):

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Recarregue e confira:

source ~/.zprofile
echo $ANDROID_HOME

O caminho real do SDK aparece em Settings → Languages & Frameworks → Android SDK, caso o seu não seja o padrão.

No Windows não há export. As duas documentações mandam usar a interface gráfica:

  1. Painel de Controle → Contas de Usuário → Contas de Usuário → Alterar minhas variáveis de ambiente
  2. Novo… e crie a variável de usuário ANDROID_HOME apontando para o SDK. O caminho padrão é:
%LOCALAPPDATA%\Android\Sdk
  1. Selecione a variável Path → Editar → Novo e acrescente:
%LOCALAPPDATA%\Android\Sdk\platform-tools

Repare que, no Windows, as documentações mandam adicionar só o platform-tools ao Path, não o emulator, como em macOS e Linux.

Abra um novo terminal e confira:

Get-ChildItem -Path Env:\
adb --version

Uma armadilha do Windows. Programas já abertos herdaram o ambiente antigo. Um terminal novo aberto pelo Explorer pode continuar sem a variável até você reiniciar o Explorer, ou a máquina.

Adicione ao $HOME/.bashrc ou $HOME/.bash_profile (no zsh, ~/.zprofile ou ~/.zshrc):

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Recarregue e confira:

source $HOME/.bashrc
echo $ANDROID_HOME

Repare que o caminho do SDK no Linux ($HOME/Android/Sdk) é diferente do macOS ($HOME/Library/Android/sdk).

Depois disso, crie um emulador: More Actions → Virtual Device Manager → Create virtual device, escolha um telefone e a imagem que você instalou no passo anterior.

Passo 5: iOS

Instale o Xcode pela Mac App Store. A documentação do React Native pede a versão mais recente e não cita um número mínimo. O Xcode já traz o simulador de iOS e as ferramentas de build.

Depois:

  1. Command Line Tools: Xcode → Settings… → painel Locations → escolha a versão mais recente no menu Command Line Tools.
  2. Simulador: no Xcode 14 ou mais novo, Xcode → Settings → Platforms, clique em “+” e escolha iOS. A documentação do Expo descreve o mesmo caminho por Components → Platform Support → iOS.
  3. CocoaPods: a documentação o descreve como uma gem Ruby, instalável com o Ruby que já vem no macOS. Nenhuma das páginas dá o comando de instalação nem fixa uma versão de Ruby ou de CocoaPods.

Duas notas úteis da documentação do React Native:

  • A partir do React Native 0.69 dá para configurar o ambiente do Xcode pelo arquivo .xcode.env do template, que exporta NODE_BINARY.
  • Se você usa NVM, considere mover a inicialização do ~/.zshrc para o ~/.zshenv:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

No Xcode 27 o app Simulator foi substituído pelo Device Hub; no Xcode 26 ainda é o Simulator. Para abrir pela linha de comando:

xcrun simctl list devices available
open -a Simulator

Não é possível. A documentação do React Native é direta:

A Mac is required to build projects with native code for iOS.

A documentação do Expo diz o mesmo sobre o simulador: ele só roda em macOS, e de um Windows você precisa de um aparelho iOS físico ou de um simulador remoto.

Para desenvolver no seu iPhone a partir do Windows, a saída indicada é o Expo Go. A documentação acrescenta que usar o Expo Go em um aparelho iOS físico exige assinatura do Apple Developer Program, e login na CLI:

npx expo login

Não é possível, pelo mesmo motivo do Windows. A documentação do React Native repete a frase:

A Mac is required to build projects with native code for iOS.

Vale o mesmo caminho alternativo: Expo Go em um aparelho iOS físico.

Passo 6: criar e rodar o projeto

Com Expo

npx create-expo-app@latest --template default@sdk-58

Para rodar:

npx expo start

Com o servidor no ar, pressione A para abrir no Android ou I para abrir no simulador de iOS. Para o emulador Android, a documentação avisa que a CLI instala o Expo Go automaticamente.

Para um development build, que aceita módulos nativos próprios:

npx expo install expo-dev-client
npx expo run:android

No iOS, a partir de um Mac:

npx expo run:ios

Esses comandos já sobem o servidor de desenvolvimento depois do build, e não precisa rodar npx expo start em separado.

Com React Native CLI

Se você já teve uma CLI global instalada, remova antes. A documentação é explícita de que ela causa problemas:

npm uninstall -g react-native-cli @react-native-community/cli

Criar o projeto:

npx @react-native-community/cli@latest init AwesomeProject

Rodar, em dois terminais, a partir da pasta do projeto:

npm start
npm run android

No iOS, se o build falhar, a documentação indica rodar nesta ordem:

cd ios
bundle install
bundle exec pod install

Com o app aberto, edite App.tsx. Para recarregar, pressione R duas vezes ou escolha Reload no Dev Menu (Ctrl + M).

Quando der errado

  • adb não encontrado. O platform-tools não entrou no PATH, ou o terminal foi aberto antes da mudança. Abra um terminal novo.
  • No Windows, a variável existe mas o terminal não a enxerga. Veja a armadilha no passo 4: processos antigos herdam o ambiente antigo.
  • Erro de JDK. Confira que é mesmo a 17. A documentação do React Native avisa que versões mais novas podem quebrar o build.
  • API level errada. Releia o passo 3: Expo e React Native CLI pedem níveis diferentes.
  • Aparelho Android físico não aparece. Ative as opções de desenvolvedor tocando sete vezes em Build number, ligue a depuração USB e confira com adb devices.

Fontes

Tudo acima foi tirado destas páginas. Versões e comandos mudam, então vale conferir na fonte antes de seguir:

V1.0 REV.A