Configurando ambiente de desenvolvimento React Native no Linux

O que é React Native ?

React Native é uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos para os sistemas Android e iOS de forma nativa.

O objetivo deste post é explicar os procedimentos de configuração do ambiente de desenvolvimento React Native no Linux (Debian/Ubuntu/Fedora) e criar o primeiro aplicativo "HelloWorld".

Pré-requisitos:

• Memória RAM mínima 8GB de RAM no computador. Recomendado 16GB de memória RAM.
• Suporte a virtualização habilitado no setup da BIOS.
• Node.js 12 ou superior, JDK 8 ou superior e Android Studio para o emulador.

O editor de código pode ser qualquer um de sua escolha, eu uso o VSCode.

Verificando suporte de virtualização

$ egrep '(vmx|svm)' --color=always /proc/cpuinfo

Se obter resultado, então o processador do seu computador tem suporte de virtualização. Pode continuar as próximas etapas.

Instalando o Node.js via NVM

Segue as instruções Instalando o Node.js no Linux (qualquer distro)

Instalando o openJDK

No Debian/Ubuntu, segue:

$ sudo add-apt-repository ppa:openjdk-r/ppa
$ sudo apt update
$ sudo apt-get install openjdk-8-jdk

No Fedora, segue:

echo -e '[adoptopenjdk]\n Name=AdoptOpenJDK $releasever - $basearch\n baseurl=https://adoptopenjdk.jfrog.io/adoptopenjdk/rpm/fedora/$releasever/$basearch\n enabled=1\n gpgcheck=1\n gpgkey=https://adoptopenjdk.jfrog.io/adoptopenjdk/api/gpg/key/public' | sudo tee /etc/yum.repos.d/adoptopenjdk.repo

sudo dnf install adoptopenjdk-8-hotspot

Instalando o Android Studio

Faça o Download Android Studio . Após concluir o download, acessar o diretório onde salvou o Android Studio e extraia.

$ tar -xzvf android-studio-ide-X.Y-linux.tar.gz

Onde o X e Y correspondem versão e release, respectivamente.

No Wizard do Android Studio, precisa marcar os itens:

• Android SDK
• Android SDK Plataform
• Android Virtual Device

Configuração da variável de ambiente ANDROID_SDK_HOME, ANDROID_AVD_HOME

Adicione no arquivo $HOME/.bash_profile ou $HOME/.bashrc

$ vim $HOME/.bashrc
export ANDROID_SDK_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_HOME/emulator
export PATH=$PATH:$ANDROID_SDK_HOME/tools
export PATH=$PATH:$ANDROID_SDK_HOME/tools/bin
export PATH=$PATH:$ANDROID_SDK_HOME/platform-tools
export ANDROID_AVD_HOME=$ANDROID_SDK_HOME/tools/bin/avdmanager
export PATH=$PATH:$ANDROID_AVD_HOME export ANDROID_SDK_ROOT=$HOME/Android/Sdk

ESC +:x (salvar e sair do editor Vim)

$ source $HOME/.bashrc

Criando a primeira aplicação React Native

Estando com as ferramentas necessárias instaladas e configuradas, conforme os procedimentos descritos, então vamos criar a primeira aplicação React Native "HelloWorld".

Execute o comando para criar a estrutura do projeto base

$ npx react-native init HelloWorld

Abrir o emulador Android, sem a necessidade de abrir o Android Studio

Lista os AVDs já criados no Android Studio

$ emulator -list-avds

Abrir o emulador definido o AVD no Android Studio.

$ emulator @Pixel_2_API_29

Executando a aplicação React Native

Acessar o diretório definido do aplicativo

cd HelloWorld
Start Metro

Primeiro, você precisará iniciar o Metro, o empacotador JavaScript que acompanha o React Native. Metro pega um arquivo de entrada e várias opções e retorna um único arquivo JavaScript que inclui todo o seu código e suas dependências.

$ npx react-native start

Em outra aba do terminal

NOTA: É necessário estar aberto o emulador e manter em execução o Metro na primeira aba do terminal.

$ npx react-native run-android

Na primeira vez, o processo é demorado, pois irá fazer o build do aplicativo no emulador.

Habilitar o modo de desenvolvedor no smartphone

Outra opção que pode fazer é executar aplicação Android diretamente no seu smartphone. Para isso, é necessário habilitar o modo de desenvolvedor, os procedimentos pode variar de modelo do seu smartphone, como a localização dos menus, então adapte, se for o seu caso.

Settings\System\About phone

Pressione 7x sobre Build number, irá aparecer um pop-up informando que foi habilitado o modo de desenvolvedor

Para confirmar, Settings\System\Developer Options

Marcar "Depuparação USB" na hora que estiver desenvolvendo aplicativo Android

Adicionar o seu usuário no grupo plugdev

$ sudo usermod -aG plugdev $LOGNAME
$ sudo apt-get install android-sdk-platform-tools-common

Verificar o dispositivo

$ lsusb

Confira a marca do seu smartphone no resultado do comando acima, conforme o exemplo do meu caso.

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

Altere "22b8", conforme o resultado mostrado no comando lsusb

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

Note que "22b8" ou outro que for exibido no executado do comando lsusb deve aparecer no resultado do comando a seguir

$adb devices
List of devices attached
emulator-5554 offline # Google emulator
14ed2fcc device # Physical device


Após concluir, conforme o screenshot. Edite o arquivo App.js no editor de sua preferência, após editar a linha 74 e salvar, irá fazer o hot-reload no emulador, que poderá ver o resultado na hora, conforme o screenshot do emulador em execução.

Feito!