Minha Configuração para Rodar React Native CLI com Java 17

Toda a vez que eu preciso trabalhar em algum applicativo com React Native acabo lidando com o problema de ambiente de desenvolvimento.

Em geral isso acontece porque eu tive que realizar alguma atualização no meu Ubuntu ou porque rolou algum upgrade de hardware (troquei o HD por SSD pro Android Studio rodar sem parecer que a máquina vai se transformar em um reator ARC).

Eu ja estava com o ambiente JAVA 17 arrumado e não queria perder tempo. Iniciei o projeto com

npx react-native init meuProjeto

e, depois de passar por todo o processo de criação do boilerplate, inseri meu endereço do SDK em um arquivo "local.properties" no diretório 'android'

sdk.dir=/home/rodrigo/Android/Sdk

Apesar disso o gradle não conseguia buildar o app e instalar no Android Emulator

Dando uma olhada no github do facebook para o projeto React Native encontrei uma solução:

Alterar a 'distributionURL' em gradle-wrapper.properties, atualizando-a para a versão 7.3 . Na minha máquina ficou assim:

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.3-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

Além disso, foi preciso adicionar ao gradle.properties o seguinte trecho de código ( no meu inseri ao final do arquivo):

org.gradle.jvmargs=-Xmx1536M --add-exports=java.base/sun.nio.ch=ALL-UNNAMED --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.lang.reflect=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-exports=jdk.unsupported/sun.misc=ALL-UNNAMED

Após isso, iniciei o servidor do react-native novamente:

npx react-native start

e depois mandei instalar o app no Android Emulator, que já estava rodando bonitinho ao fundo:

npx react-native run-android

e Voilá!

Rodou bonito. Agora posso voltar para minha aula da Formação React Native da @Alura

Comments

[Rodrigo Alexandre]

Vou adicionar aqui que há uma incompatibilidade de libs entre a ultima versão da react-navigation/bottom-tabs e a react-native-screens.

No meu caso essa configuração de dependencias foi a que funcionou melhor:

  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.1.2",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-reanimated": "^2.14.2",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.10.1",
    "react-native-svg": "^12.1.1"
  },