ygoamaral/react-native repository overview

⁠Docker - React Native

Imagem Docker para criação de containers voltados ao desenvolvimento de aplicações com React Native.

⁠Criando o projeto com Expo

docker container run -it --rm --net host -v $PWD:/projeto ygoamaral/react-native:latest npx create-expo-app@latest <nome-app>

⁠Criando container para o projeto

1 - Alterando usuário padrão para conceder permissão de escrita do projeto:

chown -R $USER:$USER <nome-app>

Obs: Caso tenha retornado "Operação não permitida" ou algo semelhante, execute o comando como administrador (sudo).

2 - Acessando o projeto:

cd <nome-app>

3 - Criando o container/ambiente de desenvolvimento:

docker container run -it --name <nome-container> --privileged --net host -v $PWD:/projeto -v /dev/bus/usb:/dev/bus/usb ygoamaral/react-native:latest bash

⁠Executando o projeto

Execute o seguinte comando para executar o projeto:

npm start

Logo em seguida, o terminal irá retorná o endereço para acessar o projeto no navegador. Geralmente será http://localhost:8081⁠.

⁠Executando em um dispositivo Android

1 - Nas configurações de desenvolvedor em seu dispositivo Android, habilite a "Depuração USB".

2 - Listando os dispositivos conectados (usb):

adb devices

Se não aparecer algum dispositivo, altere as preferencias de USB que aparecerá na área de notificação. E mude de "Somente carregar" para "Transferência de arquivos". Esse processo pode mudar conforme o aparelho.

3 - Ao executar o comando acima, aparecerá uma mensagem de autorização no dispositivo. Depois da autorização, execute o projeto pela primeira vez:

npm start

E logo em seguida, escolha a opção "a" para Android. Mas caso você obtenha algum erro no dispositivo, verifique os seguintes pontos:

• O dispositivo e seu ambiente de desenvolvimento devem está na mesma rede sem fio.
• Habilite em seu firewall a porta padrão do Expo: 8081(TCP).
• E então, execute novamente o comando $ npm start.

4 - Depois desses passos, será possível vê a tela de bem-vindo no React Native.

5 - Siga com a documentação do Expo em https://expo.dev⁠

⁠Gerando instalador Android (apk)

Obs: Os comandos a seguir, são executados dentro do container.

1 - Gerando projeto nativo Android:

npx expo prebuild --platform android

2 - Gerando arquivo apk:

cd android && ./gradlew assembleRelease

3 - Instalando no dispositivo conectado via cabo USB:

adb install app/build/outputs/apk/release/app-release.apk

Obs: O arquivo apk ficará geralmente aqui: /android/app/build/outputs/apk/release/app-release.apk

⁠Retornando para o projeto

1 - Inicie o container, caso esteja parado:

docker container start <nome-container>

2 - Acessando o ambiente de desenvolvimento:

docker exec -it <nome-container> bash

⁠Dicas

⁠Gerando chave de assinatura

Execute dentro do container:

keytool -genkeypair -v -keystore <name-app>-key.keystore -alias <name-app>-key-alias -keyalg RSA -keysize 2048 -validity 10000

⁠Renomear app

Edite o arquivo android/app/src/main/res/values/strings.xml conforme o exemplo abaixo:

<string name="app_name">Digite o nome do app aqui</string>

⁠Mudando a versão do app (Android)

No arquivo <nome-app>/android/app/build.gradle altere as propriedades defaultConfig.versionCode e defaultConfig.versionName.

⁠Fazendo upgrade da versão do React Native

Acesse o link https://react-native-community.github.io/upgrade-helper⁠ para verificar quais arquivos deveram ser modificados.

⁠Script de build para Android

No repositório do projeto há um script (build-android.sh) que pode ser utilizado para facilitar o build para Android. Ao executa-lo, ele já prepara o diretório android, verifica se tem dispositivo conectado via USB e faz a instalação, além de retorna o caminho do arquivo apk. Você poderá adicionar na pasta raiz do seu projeto. Para facilitar sua execução, adicione o comando "build" em seu package.json na propriedade "scripts":

  "scripts": {
    "build": "bash build-android.sh"
  }

E então execute: $ npm run build

⁠Tratamento de erros

⁠Error conflito

Em casos de falha no primeiro build do app, apague todos os containers associados a ygoamaral/react-native para que o conflito possa ser resolvido.

⁠Error eslintrc

ESLint: teste/projeto/.eslintrc.js » @react-native-community/eslint-config#overrides[2]: Environment key "jest/globals" is unknown . Please see the 'ESLint' output channel for details.

Solução temporária: apague o arquivo ".eslintrc.js".

⁠Error JAVA_HOME is not set and no 'java' command(...)

Execute dentro do container:

export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64/jre

⁠Falha em requisições http

Poderá ocorrer falhas de requisições http para android 9 ou superior. Adicione as linhas abaixo para fazer o ajuste, no arquivo nome-projeto/android/app/src/main/AndroidManifest.xml:

  <manifest>
    <application
      ...
        android:usesCleartextTraffic="true" // <-- adicione essa linha
      ...>
      ...
    </application>
  </manifest>

⁠Error: ENOSPC: System limit for number of file watchers reached, watch '/projeto/node_modules/

1 - Edite o arquivo: /etc/sysctl.conf.

2 - Adicione no final:

fs.inotify.max_user_watches=524288

3 - Aplique a alteração executando o comando, dentro do container:

sysctl -p