Como configurar um Ambiente de Desenvolvimento React Native

31/05/2020

Como meu primeiro post decidi escrever sobre o processo de configuração do ambiente de desenvolvimento para React Native, posteriormente gostaria de fazer outras postagens falando sobre o desenvolvimento utilizando React Native, mostrando projetos que desenvolvi ao longo do tempo.

Primeiramente acho interresante comentar um pouquinho sobre o que exatamente é o React Native, (onde a partir de agora usarei a abreviação RN). RN é uma biblioteca criada pelo Facebook, lançada em 2015, permitindo que possamos realizar o desenvolvimento mobile de forma nativa, trazendo consigo o conceito “Learn once, write anywhere”, que podemos traduzir como “Aprenda uma vez, escreva em qualquer lugar”. Uma vez que atráves do RN podemos utilizar os conceitos de componentes e ciclo de vida do React utilizando JavaScript para criar apps nativos para Android e iOS.

Comentando alguns pontos sobre o Ambiente de Desenvolvimento antes de prosseguir:

  1. Tenha em mente que provavelmente você precisará executar um emulador para testar os apps, então recomendo que tenha um computador um pouco mais potente, ou você pode sofrer travamentos e lentidão do sistema operacional. Recomendo que tenha no mínimo 8gb de memória ram.
  2. Vou mostrar como configurar um ambiente padrão para RN, usando o emulador recomendado pelo Google via Android Studio e o Xcode da Apple.
  3. Você pode contornar a parte do emulador usando um dispositivo físico mas não irei apresentar essa parte no momento. futuramente posso escrever um postagem só sobre isso.
  4. Não vou ensinar como configurar o Expo, pois por ser uma SDK para desenvolvimento RN vamos precisar de mais algumas configurações e iriamos sair do escopo desta postagem.
  5. E por fim devo alertar que para executar um aplicativo iOS você precisará de um macOS. Sim o desenvolvimento da apple é proprietário, e precisamos ter as ferramentas deles para realizar o build, no caso a CLI do Xcode. Você pode contornar isso com o Expo, com o aluguel online de uma máquina macOS e até mesmo via CI. Mas essas também seria uma outra discussão.

Com isso vamos direto ao ponto e configurar nosso ambiente.

Configurando o Ambiente de Desenvolvimento Android

Para iniciar a configuração de nosso ambiente RN para Android vamos instalar o Node.js acima da versão 8.3 e o Java SE Development Kit também conhecido JDK na versão 8. No Windows também será preciso instalar o Python 2.

Caso você esteja utilizando um macOS você pode opcionalmente instalar o Watchman via HomeBrew. Além do Node com os comandos abaixo:

brew install node
brew install watchman

Instalando o Android Studio

Para criar nossas aplicações Android vamos precisar instalar o Android Studio. Será por ele que teremos acesso ao emulador do Android e a alguns outros recursos. Baixe e inicie o instalador, selecionando a opção de instação Custom e marque as opções:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device.
Tela inicial do Android Studio

Após a instalação precisaremos realizar mais algumas configurações, abrimos o Android Studio e clicamos no ícone da engrenagem para visualizar as opções de configuração, após clicamos na opção SDK Manager.

Vamos precisar encontrar a opção de configurações do Android SDK clicando em Show Package Details. Procuramos a lista de opções do Android 9 (Pie) e marcamos as opções abaixo:

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom System Image
Opções da SKD Manager do Android Studio

A próxima etapa é ir para a opção SDK Tools selecionamos novamente Show Package Details e vamos buscar as seguintes opções:

  • Android SDK Build-Tools: 28.0.3
Opções da SKD Tools do SDK Manager do Android Studio

Com todas as opções selecionadas clicamos em aplicar e instalar. Aguardamos para que o Android Studio faça o download e instalação dos pacotes.

Agora vamos configurar um emulador para o Android, fechamos a tela do SDK Manager e clicando novamente no ícone da engrenagem dessa vez escolhemos a opção AVD Manager (Android Virtual Device).

Uma nova tela irá se abrir e aqui clicamos em Create Virtual Device. Agora vamos escolher as configurações do emulador, existem muitas opções, costumo usar o Pixel 2 e o Nexus 5, mas você pode escolher o que preferir.

Tela inicial do AVD Manager do Android Studio

Após clicamos em prosseguir e agora devemos nos assegurar de escolher a ISO do Android Pie também conhecida como API 28. Caso não a tenha, a opção de download estará disponível então basta clicar em fazer o download, selecionar a ISO e prosseguir.

Tela de configurações de ISO do AVD Manager do Android Studio

Na próxima tela podemos dar um nome para nosso emulador eu costumo usar “NomeEmulador-RN” para identificar os emuladores que uso para RN, existem outras opções, mas não precisamos modificar nada no momento, então basta clicar em Finish.

Tela de configurações extras do AVD Manager do Android Studio

Com isso finalizamos as configurações no Android Studio, podemos iniciar o emulador caso queira cliclando no botão de play, mas a seguir irei ensinar a fazer isso pelo Terminal, dessa forma não temos a necessidade de iniciar o Android Studio, utilizando somente o emulador. Então podemos fechar as telas do Android Studio.

Variáveis de Ambiente

Agora por fim vamos configurar algumas variáveis de ambiente.

Primeiro vamos adicionar uma nova variável para o JDK do Java e uma para o SDK do Android:

JAVA_HOME - C:\Program Files\Java\jdk1.8.0_231
ANDROID_HOME - c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

E no path do sistema vamos adicionar as variáveis abaixo:

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

Pronto! agora poderemos executar alguns comandos interessantes direto no Terminal para auxiliar o processo de desenvolvimento.

emulator -list-avds - Lista todos os emuladores configurados no AVD Manager do Android Studio.

emulator -no-snapshot -avd nome-emulador - Inicia o emulador pela linha de comando.

Exemplo do comando emulator -list-avds

Com isso já temos nosso ambiente de desenvolvimento Android configurado, agora vamos configurar nosso ambiente iOS.

Configurando o Ambiente de desenvolvimento iOS.

Primeiro você precisará instalar o Node e opcionalmente a documentação recomenda a instalação do Watchman, você pode fazer essa instalação usando o Homebrew.

brew install node
brew install watchman

Agora iremos instalar o Xcode. Esse é um processo um pouco mais fácil, o ambiente proprietário da apple já tem praticamente tudo que nós precisamos, só teremos que ajustar algumas configurações após a instalação. Para instalar o Xcode você precisará de uma conta do iCloud, e para fazer o download precisará acessar a App Store do macOS. Caso já tenho o Xcode instalado, certifique-se de que esteja acima da versão 9.4.

O próximo passo será instalar a CLI do Xcode, para isso iniciamos o Xcode e clicando no menu Xcode -> Preferences -> Locations -> Command Line Tools, selecionamos a opção no menu dropdown.

Configurando CLI do Xcode

Para configurar o emulador do iOS você deve ir para a opção Componentes. Selecione a versão do simulador que você deseja usar e clique em Check e Install, e pronto estamos praticamente prontos para desenvolver, viu o Xcode é bem intuitivo para configurar.

Configurando Simulador do Xcode

Uma última configuração que recomendo, caso como eu você use o tema claro para o macOS, é trocar o tema do Xcode para o escuro. Amo os temas claros do mac, mas simplesmente acho o tema do escuro do Xcode bem mais charmoso, isso é puramente estético e você pode pular se preferir ou se já usa o tema escuro, por padrão ele já estará aplicado.

Você pode alterar isso no menu Fonts & Colors, selecionando o Theme: Default (Dark). E depois em General altere a opção Appearance para Dark. A primeira opção irá alterar as cores do editor de código e a segunda irá alterar as cores da interface da IDE.

Configurando cores do editor de código da IDE Configurando cores da interface da IDE

Instalando CocoaPods

Por último vamos instalar os CocoaPods, para isso rodamos o comando:

sudo gem install cocoapods

E com isso finalizamos a configuração dos ambientes de desenvolvimento para React Native. Pode ser complicado em algumas partes, e tive algumas dificuldades quando comecei a desenvolver para RN, por isso achei interessante criar um guia com o que aprendi sobre.

Futuramente vou escrever outras postagens ensinando como iniciar um projeto pela CLI do React Native e também sobre o Expo, além comentar alguns dos aspectos sobre arquitetura e desenvolvimento com RN. Espero com isso poder contribuir para possamos ter cada vez mais uma forte comunidade mobile com RN.

Então até a próxima, não esqueça de compartilhar a publicação e me seguir nas redes sociais caso tenha gostado do conteúdo e queira saber um pouco mais sobre essa tecnologia incrível que é React Native.


Foto de perfil

Hirvin Faria

Desenvolvedor Mobile | Front-End

Entre em Contato por:

contato@hirvinfaria.codes

Ou se preferir pelo formulário.