Seja bem-vindo ao Hands-on React Native do

DevPleno. Este documento visa ajudar você a

configurar seu ambiente de desenvolvimento para
utilizar todo o poder do React Native.
Nossa intenção em fazê-lo desta forma, é permitir adicionar novas informações e
resoluções de problemas que não estejam cobertas neste passo a passo inicial.
Para receber sempre as novidades do evento, não deixe de cadastrar seu e-mail em:
www.devpleno.com/reactnative

Preparando o ambiente para desenvolver

aplicativos em React Native

Dependências para todas as plataformas:

Em todas as plataformas é necessário ter o NodeJS e NPM instalados. Para checar a
instalação dos mesmos, basta usar as seguintes linhas de comando:
node --version
npm --version

MacOS (para aplicativos IOS):

Dependências: Node, Watchman, Xcode e React-Native Cli.

Pode instalar o homebrew (ttps://brew.sh/)

● Node e Watchman

brew install node

brew install watchman

● React Native Cli

npm install -g react-native-cli

Obs: Caso ocorra o erro: Cannot find module 'npmlog', tente instalar
diretamente curl -0 -L https://npmjs.org/install.sh | sudo sh.

● XCode

O XCode poderá ser instalado através da Mac App Store, sua instalação fornecerá
todo pacote necessário para o build do app em IOS

Será necessário também instalar o XCode Command Line (Linha de Comando),

para isso, abra o XCode e vá em Preferências -> Locations -> e escolha a versão
mais recente do Command Line.

● Criando um novo projeto (Via Command Line)

react-native init MeuProjeto

cd MeuProjeto
react-native run-ios
MacOS (para aplicativos Android):

Dependências: Node, Watchman,, Xcode, ReacNative Cli.

Pode instalar o homebrew (ttps://brew.sh/)

● Node e Watchman

brew install node

brew install watchman

● React Native Cli

npm install -g react-native-cli

Obs: Caso ocorra o erro: Cannot find module 'npmlog', tente instalar
diretamente curl -0 -L https://npmjs.org/install.sh | sudo sh.

● Android Studio
Baixe e instale o Android Studio (https://developer.android.com/studio/). Selecione a
instalação customizada e certifique que as seguintes opções estão marcadas.

. Android SDK
. Android SDK Plataform
. Performance ( Intel ® HAXM)
. Android Virtual Device
 O Android SDK, por padrão instala o Android SDK mais atualizado, mas para gerar
aplicações em React, React Native, necessita da versão 8.1 (Oreo), o SDK Manager pode
ser aberto via Android Studio (Clique em Configure ou Configuração em seguida SDK
Manager). E instale a versão 8.1
* Configurando ANDROID_HOME variável de Ambiente

Adicione as seguintes linhas a seu arquivo: $HOME/.bash_profile arquivo de configuração:

export ANDROID_HOME=$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

● Criando um projeto android

react-native init MeuProjeto

● Preparando o dispositivo Android

Usando o dispositivo virtual: No Android Studio abra: MeuProjeto/android e você

verá uma lista de Dispositivos Virtuais Disponíveis (AVD), abra o AVD Manager e

verá um ícone como este:

- Caso tenha acabado de instalar o Android Studio, crie um novo AVD e escolha
qualquer dispositivo da lista e clique em Next, e depois escolha API LEVEL 27
(OREO).

- Clique em Next e depois em Finish para criar seu AVD, nesse ponto você poderá
clicar no botão triangulo verde e carregar seu AVP e seguir para o próximo passo.

● Executando seu projeto em React e React Native

cd MeuProjeto

react-native run-android.

Se tiver tudo ok, verá uma tela como está:

Windows - IOS
Não é possível gerar build de IOS no windows

Windows - Android

● Dependências: React Native, Python2, JDK e o Android Studio.

Recomendação instalar o Node e o Python2 via o chocolatey ( https://chocolatey.org/)

Abra o prompt como administrador, e execute o seguinte comando:

choco install -y nodejs.install python2 jdk8

● React Native Cli

npm install -g react-native-cli

 Obs: Caso ocorra o erro: Cannot find module 'npmlog', tente instalar
diretamente curl -0 -L https://npmjs.org/install.sh | sudo sh.

● Android Studio
Baixe e instale o Android Studio (https://developer.android.com/studio/). Selecione a
instalação customizada e certifique que as seguintes opções estão marcadas.

. Android SDK
. Android SDK Plataform
. Performance ( Intel ® HAXM)
. Android Virtual Device
O Android SDK, por padrão instala o Android SDK mais atualizado, mas para gerar
aplicações em React, React Native, necessita da versão 8.1 (Oreo), o SDK Manger pode
ser aberto via Android Studio (Clique em Configure ou Configuração em seguida SDK
Manager). Clique no botão inferior (Show Package Details e instale : Intel x86
Atom_64 System Image or Google APIs Intel x86 Atom System Image
) E instale a versão 8.1
 ● Configure a Variável de Ambiente

O React Native precisa de algumas variaveis de ambiente setadas para que possa gerar o
build.
No Windows abra o Painel de Controle -> Segurança e Sistemas-> No painel clique em
Mudar Configurações, clique em Avançado (Na variaveis de Ambiente) e clique em novo:
Variable Name: ANDROID_HOME
Variable Value: Caminho do SDK do Android. (Por padrão o SDK é instalado nesse caminho
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk)

Abra uma nova janela no prompt de comandos para que ele possa setar as alterações feitas
na variável de ambiente.
● Criando um projeto android

react-native init MeuProjeto

● Preparando o dispositivo Android

Usando o dispositivo virtual: No Android Studio abra: MeuProjeto/android e você

verá uma lista de Dispositivos Virtuais Disponíveis (AVD), abra o AVD Manager e

verá um ícone como este:

- Caso tenha acabado de instalar o Android Studio, crie um novo AVD e escolha
qualquer fone da lista e clique em Next, e depois escolha API LEVEL 27 (OREO).

- Clique em Next e depois em Finish para criar seu AVD, nesse ponto você poderá
clicar no botão triangulo verde e carregar seu AVP e seguir para o próximo passo.

● Executando seu projeto em React e React Native

cd MeuProjeto

react-native run-android.

Se tiver tudo ok, verá uma tela como está: