DEV Community

Rodrigo Alexandre
Rodrigo Alexandre

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npx react-native start
Enter fullscreen mode Exit fullscreen mode

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

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

e Voilá!

Image description

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

Top comments (1)

Collapse
 
narradorww profile image
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"
  },
Enter fullscreen mode Exit fullscreen mode