Atualizando um aplicativo React Native — A Saga

Published in

React Brasil

8 min readSep 19, 2019

No ano passado eu criei um post aqui no Medium mostrando como instalar o react-native-fbsdk a fim de facilitar essa tarefa para quem estava tendo dificuldades. O post pode ser visualizado no link abaixo.

Instalando o react-native-fbsdk do jeito certo

Ou como adicionar funcionalidades do Facebook no seu aplicativo React Native sem sofrimento.

medium.com

De lá para cá, o React Native sofreu várias mudanças boas e o processo de adicionar um package com código nativo mudou graças ao autolink. Quando criei o post sobre o FBSDK, a versão na época era a 0.54.4 então acho que seria um ótimo exercício tentar atualizar o aplicativo para a versão mais recente e também atualizar o processo de instalação do FBSDK com CocoaPods. Vamos começar!

Atualizando a versão do React Native

Primeiro vamos começar atualizando o react-native. No momento em que esse post está sendo escrito, a versão atual é a 0.60.5. O repositório para o aplicativo está disponível no Github.

O primeiro passo é visitar o React Native Upgrade Helper, ferramenta online para nos ajudar durante a atualização do nosso aplicativo. Ao escolher a versão atual e para qual versão queremos atualizar, temos o seguinte resultado no navegador:

Não apenas nos mostra o que mudou entre as versões, mas também o que teve de relevante entre cada versão. Da versão 0.57 até a versão 0.60 houve diversas mudanças importantes que podem fazer sua aplicação quebrar. Sempre que for atualizar leia o changelog para ter certeza que não deixou passar nenhuma break change.

Rolando a tela temos a lista de arquivos que foram alterado entre a versão 0.54.4 e a versão 0.60.5. Isso quer dizer que esses arquivos são o mínimo que você precisa mudar para estar de acordo com a versão escolhida. Se sua aplicação já está em produção e você usa outras bibliotecas que foram instaladas com react-native link, provavelmente você precisará fazer outras mudanças para que sua aplicação rode perfeitamente. Você pode ver a lista de arquivos que precisam ser alterados clicando aqui.

Você podem notar que para cada arquivo há um ícone de ✔ para que você possa ir removendo os arquivos que já fez a mudança. No nosso caso são 50 arquivos, pouquinho… 😅

Ajustando a versão iOS

Após mudar todos os arquivos relacionados, é hora de tentar rodar nossa aplicação e ver o que vai dar. Antes de executar o build, precisamos primeiro instalar as dependências através do CocoaPods. A partir da versão 0.60, todas as dependências serão instalados por ele. Caso não tenha o CocoaPods instalado, no terminal basta digitar gem install cocoapods. Se você tem o rvm instalado, não precisará usar sudo.

Para instalar as dependências basta entrar no diretório ios e rodar um pod install.

cd ios
pod install

Agora precisamos abrir o projeto no Xcode. Como estamos usando CocoaPods, agora precisamos abrir o projeto clicando duas vezes no arquivo example.xcworkspace para que o Xcode possa carregar as dependências carregadas pelo CocoaPods. Se você for fã de terminal basta digitar open example.xcworkspace que o Xcode abre. 😉

Se você tentar rodar o projeto no Xcode (ou no terminal) vai acabar tendo um erro. Então é hora de atualizarmos o package react-native-fbsdk. Se você leu meu artigo anterior sobre o FBSDK, sabe que nós fizemos um link dele no projeto. A primeira coisa que devemos fazer então é desfazer esse link com react-native unlink react-native-fbsdk.

$ react-native unlink react-native-fbsdk
info Unlinking "react-native-fbsdk" iOS dependency
info iOS module "react-native-fbsdk" has been successfully unlinked
info Unlinking "react-native-fbsdk" Android dependency
info Android module "react-native-fbsdk" has been successfully unlinked

Neste commit é possível ver as mudanças relacionadas ao unlink. Notem que eu também desfiz algumas mudanças relacionadas a instalação do FBSDK, incluindo a remoção do SDK do diretório Frameworks. Achei melhor fazer nesse caso por se tratar de versões do React Native com uma distância considerável e porque agora devemos instalar o FBSDK através do CocoaPods.

Para alguns casos, vale mais a pena montar um app todo de novo na versão mais nova do que tentar atualizar. Faça uma análise do que será mais vantajoso para o seu caso.

Após instalar a versão mais recente do react-native-fbsdk, você deve através do terminal entrar no diretório ios e instalar as dependências:

cd ios
pod install

Sempre que instalar novas dependências que possuam código nativo, você terá que rodar um pod install dentro do diretório ios.

Estamos com o aplicativo atualizado, com o package do SDK do Facebook atualizado, vamos testar nosso app. Após o react-native run-ios e alguns minutos de espera e damos de cara com um erro!

ld: library not found for -lRCTGeolocation
clang:
error:
linker command failed with exit code 1 (use -v to see invocation)** BUILD FAILED **

"Mas como assim?! Eu nem estou usando Geolocation na minha aplicação!" — você deve estar se perguntando. Acontece que na versão 0.60.0 o Geolocation foi removido do core do RN e passou a ser oferecido através do repositório do React Community. Lembra que falei para ler o changelog das versões?

O que temos que fazer é bem simples. No Xcode, na área de Linked Frameworks and Libraries vamos remover o item libRCTGeolocation.a. e na lateral esquerda, no Project Navigator, remover também a referencia de RCTGeolocation.xcodeproj da seção Libraries. Você vai notar que em ambos os locais essa biblioteca vai estar diferente com relação as outras.

Caso você comece um aplicativo novo ou prefira atualizar a sua aplicação movendo o código para uma versão recém criada, não terá esse problema.

Vamos tentar mais uma vez. Após o react-native run-ios e aguardamos o build e… mais outro erro 😰

ld: 1319 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)** BUILD FAILED **

Outro detalhe relacionado ao upgrade, dessa vez sem ter nenhuma informação na documentação. Como agora todas as dependências são gerenciadas pelo CocoaPods, nós não precisamos mais ter elas linkadas no Xcode. A imagem acima deve ficar assim:

Somente mantenha a biblioteca do CocoaPods

Certifique-se de que na aba Build Phases, na etapa Link Binary With Libraries só tem a biblioteca do CocoaPods. Vamos rodar o build novamente!

Mas será que o botão continua funcionando? Vamos checar!

Botão do Facebook funcionando perfeitamente no simulador do iPhone X

Ajustando a versão Android

Aqui primeiro vamos ver quais as mudanças que fiz durante a atualização da versão iOS. Nesse commit dá para ver quais arquivos foram modificados, o que destaco todos os relacionados ao gradle. Isso nos leva a testar logo o build do Android.

cd android
./gradlew clean //para limpar registros de build antigos
./gradlew assembleDebug //para gerar o apk de intalação

Mas de cara tive um erro relacionado aos ícones. Isso por que na versão mais recente do React Native, vem configurado 2 arquivos de ícone: ic_launcher e ic_launcher_round. O erro foi esse:

> Task :app:processDebugResources FAILEDFAILURE: Build failed with an exception.* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Android resource linking failed
  /[PATH]/react-native-fbsdk-example/android/app/build/intermediates/merged_manifests/debug/AndroidManifest.xml:14: AAPT: error: resource mipmap/ic_launcher_round (aka br.com.example.app:mipmap/ic_launcher_round) not found.
      
  error: failed processing manifest.

Para resolver, apenas precisei atualizar os ícones a partir de um app criado do zero. Copiei os os arquivos para os diretórios android/app/main/res/mipmap-*. Mais um build e mais um erro, dessa vez relacionado ao arquivo debug.keystore, a versão mais nova do React Native espera que esse arquivo esteja no caminho android/app/debug.keystore. Resolvido facilmente apenas copiado o arquivo para o local indicado.

Mais um build e dessa vez sucesso!

$ ./gradlew assembleDebugDeprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:command_line_warningsBUILD SUCCESSFUL in 17s
51 actionable tasks: 6 executed, 45 up-to-date

Agora é hora de testar em um device. Inicio o emulador, react-native run-android no terminal e aguardo. Alguns segundos após e voilà! Aplicativo rodando sem problemas. Vamos testar agora o botão do login facebook.

Botão do login do Facebook funcionando no emulador do Android

Yeah! Aplicativo atualizado, package do FBSDK atualizada, aplicativo funcionando… o que mais podemos fazer!?

Habilitando Proguard

O Proguard é uma ferramenta que vem junto com o SDK do Android que ofusca o código do seu aplicativo, dificultando engenharia reversa, e também executa otimizações no código, removendo partes que não são usadas auxiliando também na redução do tamanho final. Caso queira se aprofundar mais sobre o assunto, dê uma olhada na documentação.

Para habilitar é bem simples: no arquivo android/app/build.gradle procure por enableProguardInReleaseBuilds. Por padrão, essa configuração está desabilitada. Mude para true. O Proguard só é utilizado na versão de release, ou seja, a que nós devemos enviar para a loja. Descendo mais um pouco, na seção buildTypes vamos encontrar a seguinte configuração:

buildTypes {
  debug {
    signingConfig signingConfigs.debug
  }
  release {
    signingConfig signingConfigs.debug
    minifyEnabled enableProguardInReleaseBuilds
    proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
  }
}

Como podemos perceber, a configuração relacionada ao Proguard é a minifyEnabled, mas também há outra opção que devemos habilitar que é a shrinkResources. Basta incluir ela acima do minifyEnabled e testar sua aplicação. No final ficará assim:

buildTypes {
  debug {
    signingConfig signingConfigs.debug
  }
  release {
    signingConfig signingConfigs.debug
    shrinkResources enableProguardInReleaseBuilds
    minifyEnabled enableProguardInReleaseBuilds
    proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
  }
}

Ao habilitar o Proguard, teste sua aplicação por completo e cheque na documentação das bibliotecas que está usando se é necessário fazer algum ajuste.

Diferença entre o APK com Proguard habilitado e não habilitado

Uma coisa a levar em consideração. Nesse aplicativo temos apenas 1 única dependência que é o react-native-fbsdk e também estamos gerando um único APK para versão 32bits e 64bits. O ganho real pode ser bem maior numa aplicação real em produção. Usando o novo formato de publicação, .aap (Android App Bundle), a diferença para o usuário será maior.

Habilitando Hermes

Hermes é uma nova engine JavaScript otimizada para rodar aplicativos React Native em dispositivos Android e está disponível a partir da versão 0.60.4 do React Native. Para o nosso caso, basta seguirmos a documentação, habilitando o Hermes no arquivo android/app/build.gradle e adicionando a configuração relacionada ao Proguard.

Por fim, basta rodarmos os comandos no terminal:

cd android && ./gradlew clean
cd .. && react-native run-android

Ao final, a aplicação estará rodando no dispositivo conectado. 👌🏼

É isso pessoal. Deu trabalho mas está aí, uma atualização de uma aplicação na versão 0.54.4 do React Native para a versão 0.60.5. Talvez fosse mais simples criar um app novo e mover o código, mas queria passar quais as etapas eram necessárias para uma atualização, mesmo que simples, para tentar ajudar quem tem tido problemas com essa atividade.

Se puder deixa alguns aplausos aí e comentem quais os problemas enfrentaram ao atualizar para a versão 0.60.0 do RN. Abraços!