---
# System prepended metadata

title: 'ATUALIZANDO REACT-NATIVE - Android :up: :nerd_face:'

---

# ATUALIZANDO REACT-NATIVE - Android :up: :nerd_face: 
> Mantenha Este documento Sempre Atualizado :+1:

> :information_source:  **É Importante criar uma branch separada para realizar as atualizacoes, e para cada etapa a ser implementada, criar uma nova branch a partir dessa branch principal de atualizacao.**

## 1. Preparando Ambiente para SDK 29 :alien: 

### Atualize a IDE Android Studio para a Versao mais recente

### Baixe o SDK 29(Android 10)
>Siga o guia de configuração do reactnative.dev https://reactnative.dev/docs/environment-setup
>
### Baixe o NDK compativel a versao do gradlew
>[Link para guia de instalacao NDK](https://developer.android.com/studio/projects/configure-agp-ndk?language=agp4-1) (**Escolha a versao compativel com a do gradlew no projeto**)
>ex:
![](https://i.imgur.com/uH4WEx6.png)

>**Tabela comparativa Gradlew x NDK version**
> ![](https://i.imgur.com/H7tswMl.png)



## 2. Siga o tutorial de UPGRADE React-Native Mais recente
> Prefira atualizar com o [Upgrade-Helper](https://reactnative.dev/docs/upgrading#upgrade-helper) :helmet_with_white_cross: 


## 3. Identificando Conflitos

### 3.1. Identificando Conflitos via Android Studio :smiley: 
> A melhor maneira de resolver conflitos eou testar se seu app esta pronto para uso é pelo android studio > ferramenta de build. 

1. Abra a pasta android do seu projeto no android studio:
![](https://i.imgur.com/1RlF9z4.png)

2. Build seu app
2.1. Basta clicar no martelo
![](https://i.imgur.com/0xeAEQi.png)
2.2. Verifique os logs de build
![](https://i.imgur.com/LjiAQo6.png)
![](https://i.imgur.com/NwrGaYj.png)

2.3. Seu app estiver pronto, o log de build retornara a menssagem **"BUILD SUCCESSFUL"**, como mostrado na imagem a cima;

2.4. **Em caso de Falha, o log de build emitira uma menssagem na cor vermelha identificando o problema.** :rotating_light:

> :information_source: Resolva os conflitos do topo, eles geralmente corrigem os problemas que se seguem após ele.  


### 3.2. Identificando Conflitos via Terminal :skull: 
1. Entre na pasta android `cd android`
2. Limpe o cache do android `./gradlew clean`
3. Compile o app `./gralew build`
4. Resolva os conflitos:
4.1. Resolva os conflitos que aparecem no topo da lista, pois consequentemente, eles podem corrigir os demais erros que se seguem.
> Geralmente o gradle informa o motivo do problema, veja o sublinhado da imagem a seguir.

![](https://i.imgur.com/ABL6o3q.png)

> E também pode mostrar como resolver o problema. Nesse caso ele informa um link para a ressolucao do problema em (exemplo): https://developer.android.com/studio/build/dependencies#duplicate_classes
![](https://i.imgur.com/fTR3zwM.png)
 



## 4. Resolucoes de Conflitos e Upgrade em dependencias Linkadas
>Como o react usa auto link a partir da versão 0.60, as dependencias linkadas precisam ser removidas e atualizadas(upgrade).

### 4.1. Como fazer Upgrade e Resolver conflitos de dependencias linkadas / dependencias Javascript. (Regras Gerais)
Normalmente voce so precisa remover a dependencia nativa usando yarn, e instala de novo. Assim, o react fara o auto link, e sua dependencia estará atualizada.

> Prefira pesquisar no google como fazer UPGRADE de tal dependencia, pois algumas dependencias como FireBase precisam de um tratamento extra.

1. Acesse o arquivo `android\app\src\main\java\com\postarhostwebsecrelnet\MainApplication.java`
2. Verifique as dependencias linkadas
3. Remova a dependendia usando `yarn remove <nomeDaDependencia>`
4. Em seguida, procure por todo o codigo android pelo `<nomeDaDependencia>` e delete as linhas que fazem referencia a essa dependencia.
5. Depois pesquise como instalar a nova versao da sua dependencia, e instale usando `yarn add`
6. Delete o diretorio `./nodemodules`
7. Delete os arquivo `package-lock.json` e `yarn.lock`
8. Instale tudo novamente usando `yarn install`
9. Acesso o diretorio android `cd android `e execute: 
9.1. `./gradlew clean`- para limpar o cache do android
9.2. `./gradlew build` - para compilar:
> caso o upgrade tenha sido feito com sucesso voce que seu build teve sucesso; caso haja erro, [indentifique e corrija o problema](#Resolvendo-Conflitos) e repita o processo a partir do passo 6.

### 4.2.Conflito NDK Correspondente nao encontrado 
>Instale o NDK para Gradle correspondente. Veja em: [Instalar uma versão específica do NDK](https://developer.android.com/studio/projects/install-ndk#specific-version)

### 4.3. Resolvendo conflito / Upgrading FireBase :fire:
veja em : https://rnfirebase.io/migrating-to-v6

> Para atualizar o Firebase Notifications veja em [migrating-to-v6#notifications](https://rnfirebase.io/migrating-to-v6#notifications) (durante a atualização dê preferencia a usar o biblioteca https://wix.github.io/react-native-notifications/docs/getting-started )

#### 4.3.1. Resolvendo conflito de Kotlin ao instalar dependenia Firebase react-native-notifications
> Ao tentar buildar o app apos a instalacao do react-native-notifications, voce receberá o log de erro:
> ![](https://i.imgur.com/d3iCikZ.png)

1. Tools > Kotlin > Configure o Kotlin in project:
![](https://i.imgur.com/W7YI84T.png)


### 4.4. Resolvendo conflito / Upgrading React Navigation :atom_symbol: 
1. Use `yarn remove` para remover a dependencia do 'react-navigation' no package.json

2. Instale a versao mais recente do [react-navigation](https://reactnavigation.org/)

3. Reescreva a navegação do app para adequar a versão mais recente do [react-navigation](https://reactnavigation.org/)

### 4.5. Erro no componente ListView `deprecated-react-native-listview`
``[Thu Feb 25 2021 14:31:45.646]  ERROR    Invariant Violation: ListView has been removed from React Native. See https://fb.me/nolistview for more information or use 'deprecated-react-native-listview'.``


![](https://i.imgur.com/iCJm67p.png)

> Erro do Tipo Javascript.

Para identificar quan dependencia esta usando esse componente depreciado ListView
1. No terminal inicie uma instancia do vscode no diretorio node_modules;
![](https://i.imgur.com/m3XYMM3.png)

2. Aberto o diretorio node_modules no vs code, pesquise por 'ListView' e filtro 'files to include' = '.js'
> Veja na imagem que foi encontrado uma importação deste componente, por uma outra dependencia, no caso,:  `react-native-keyboar-aware-scroll-view`
![](https://i.imgur.com/FkNr7BB.png)


3. Atualize a dependencia que usa o componente 'ListView' para uma versão mais atual, para que uma versão que tenha a correção nela mesma.

