Migrando sua aplicação React Native para CocoaPods

Ou como se preparar para migrar para a versão 0.60+

Bem, no meu último post contei sobre como foi a migração de um aplicativo feito em React Native para a versão 0.60.5. Detalhei os erros encontrados durante o processo e as soluções para eles. Caso não tenha lido, o link está abaixo.

Atualizando um aplicativo React Native — A Saga

Mas muitas vezes estamos trabalhando em um projeto relativamente complexo, com várias dependências, muitas delas adicionadas através de react-native link e migrar para a última versão não é algo simples. A partir da versão 0.60, o CocoaPods é o gerenciador de dependências padrão para o iOS e quero dessa vez tentar ajudar a montar uma aplicação simples mas com CocoaPods configurada corretamente. Vamos lá! 🚀

Para este tutorial, usarei o novíssimo Xcode 11 com iOS 13 em um simulador de iPhone 11 rodando uma aplicação React Native 0.59.10. Bleeding edge!

Começando pelo começo

Antes de tudo, você precisa ter o CocoaPods instalado em sua máquina. Para instalar basta executar gem install cocoapods no seu terminal — lembrando que se você usar o rvm não precisará usar sudo.

Vamos agora criar uma aplicação nova. Como a partir da versão 0.60, projetos React Native já vem com CocoaPods por padrão, passaremos a versão 0.59.10 por parâmetro no momento de criar nosso projeto:

react-native init Example --version 0.59.10

Dessa forma poderemos continuar nosso tutorial. Após algums minutos, temos nosso aplicativo pronto para ser testado. Antes de adicionarmos o cocoapods, vamos fazer um pequeno ajuste no arquivo .gitignore. No final do arquivo, adicionaremos a regra para que todo o conteúdo do diretório Pods seja ignorado no controle de versão. Basta adicionar o conteúdo abaixo:

# CocoaPods
Pods

Integrando o CocoaPods

Agora, no seu terminal, dentro do diretório ios vamos adicionar um arquivo Podfile, que é o responsável por declarar as dependências da aplicação:

cd ios
pod init

Você vai acabar com um arquivo assim:

Vamos fazer algumas mudanças! Primeiro vamos definir qual a plataforma do nosso projeto. Para isso basta descomentar a linha 2. Pode manter a versão 9.0 pois é a versão que vem configurada no React Native. Vamos também comentar a linha 6, pois não precisamos de dynamic frameworks. Removendo os targets desnecessários, nosso Podfile ficará assim:

Agora precisamos colocar as dependências da nossa aplicação. Na documentação do React Native, tem uma seção sobre CocoaPods mas ela é voltada para integrar o React Native a uma aplicação nativa iOS já existente. Se tentarmos adicionar todas aquelas dependências em nosso projeto, simplesmente ele não vai funcionar. Precisamos identificar quais são de fato as dependências que nossa aplicação precisa. Para isso vamos abrir nosso aplicativo no Xcode. Você pode abrir clicando 2x no arquivo Example.xcodeproj ou se for fã de terminal open Example.xcodeproj.

Xcode 11 aberto com nossa aplicação React Native 0.59.10

Caso não tenham notado, eu ainda NÃO fiz o comando pod install e por isso não abri o Xcode através do arquivo Example.xcworkspace.

Para identificarmos nossas dependências, basta olharmos na lateral esquerda do Xcode, na seção Libraries. Nós temos que adicionar o React e todas as libraries RCT*. Além dessas dependências, precisamos também incluir os subspecs Core, CxxBridge e DevSupport que são requisitos do React Native. Para simplificar, vejam abaixo como ficou nosso Podfile:

Detalhe importante! Apesar de no Xcode mostrar RCTLinking.xcodeproj o subspec está declarado como RCTLinkingIOS como pode ser visto no arquivo React.podspec em node_modules/react-native.

Outra coisa que podemos fazer logo no Xcode é excluir os targets que não serão usados. Fica a seu critério, mas eu prefiro excluir. Também podemos remover o diretório ExampleTests na lateral esquerda acima de Products.

Remove unused targets

Caso optem por remover os targets, há uma etapa extra: Na parte superior do Xcode, após os botões Run e Stop, há o seletor de esquema junto com o seletor de dispositivo (no caso iPhone 11).

Ao clicar no seletor de esquema teremos algo como a imagem ao lado.

Devemos então acessar a opção Edit Scheme…

Isso fará um novo modal surgir com alguma opções. Na seção Build, temos 3 itens, como pode ser visto na imagem abaixo.

Podemos remover o último deles, pois foi removido o target vinculado. Selecione ExampleTests (missing) e pressione o botão - na parte de baixo para removê-lo.

Instalando as dependências

Chegou a hora de instalar as dependências. Feche o Xcode e no terminal, no diretório iOS, executaremos pod install. O CocoaPods vai instalar todas as bibliotecas declaradas no Podfile. A partir de agora, toda vez que abrirmos esse projeto no Xcode, precisaremos faze-lo a partir do arquivo Example.xcworkspace. Duplo clique nele ou open Example.xcworkspace no terminal.

Um novo projeto Pods surgiu na interface do Xcode

Como podemos ver, temos agora um novo projeto Pods na lateral esquerda do Xcode, bem como uma nova biblioteca libPods-Example.a foi adicionada. Mas de fato não precisamos mais fazer muita coisa. Partamos para o terminal testar o aplicativo:

react-native run-ios --simulator "iPhone 11"

E temos nossa aplicação migrada e funcionando! E que tal se também testarmos rodar ela com configuração release? Manda aí no terminal:

react-native run-ios --simulator "iPhone 11" --configuration Release

Enfim, temos nosso código base para uma aplicação abaixo da versão 0.60 do React Native migrada para CocoaPods funcionando em modo debug e release. Caso queira ver as modificações feitas basta dar uma olhada no repositório que eu montei no link abaixo.

lucianomlima/react-native-cocoapods-example

Se puder deixa alguns aplausos aí e comentem quais os problemas enfrentaram ao tentar integrar o CocoaPods em seus projetos. Abraços!