React Native: Instalando bibliotecas em seu aplicativo

O React Native já fornece um grande conjunto de componentes e APIs prontos para uso, mas você não está limitado ao uso desses componentes e APIs. 

Além de combiná-los para criar seus próprios componentes, você pode ainda recorrer à grande comunidade de desenvolvedores React Native para encontrar uma biblioteca que forneça a funcionalidade que você deseja adicionar ao seu aplicativo. 

Nesse artigo você encontrará instruções oficiais retiradas diretamente da documentação React Native, bem como algumas dicas e cuidados importantes que você deve ter ao buscar por essas bibliotecas.

Cuidados que você precisa ter ao buscar uma biblioteca para adicionar ao seu aplicativo

Antes de ir para o conteúdo exposto na documentação oficial, é importante entendermos alguns pontos quando se trata de adicionar bibliotecas aos aplicativos:

1 – Necessidade

Muitas vezes nos deparamos com uma dificuldade no desenvolvimento de uma aplicação e já queremos recorrer a uma biblioteca externa, seja para resolver elementos de interface ou até mesmo para resolver problemas de lógica. 

Claro que não precisamos reinventar a roda, mas muitas vezes esse problema poderia ser resolvido combinando componentes já integrados do React Native ou criando suas próprias funções, o que além de deixar a aplicação mais leve ainda serve de grande aprendizado em relação à linguagem. 

Eu mesmo em meu canal do YouTube sempre trago componentes novos que crio apenas combinando componentes já integrados do React Native.

2 – Manutenção

Um ponto super importante a se observar no ato da instalação de uma nova biblioteca é a sua manutenção. As bibliotecas em geral são mantidas por uma comunidade de desenvolvedores voluntários, indivíduos ou por empresas que utilizam o React Native na sua stack de desenvolvimento.

No entanto, o que acontece é que muitas dessas bibliotecas param de receber atualizações e ficam defasadas, provocando grandes transtornos, principalmente na hora de instalar ou mesmo de compilar a aplicação. 

Por isso, sempre verifique previamente as issues, os commits e a compatibilidade, além de sempre ler toda a documentação para não ter surpresas desagradáveis depois.

3 – Compatibilidade

Em conjunto com o tópico anterior, a compatibilidade é algo importante a se observar, já que algumas bibliotecas possuem versões diferentes indicadas para diferentes versões do react-native. 

Existem dois tipos principais de bibliotecas: o primeiro é composto por bibliotecas que possuem implementações nativas ou seja, tem integração direta com as plataformas Android e IOS, seja para acessar o hardware, como sensores, câmeras e bluetooth; ou para acessar elementos de software, como integração com sistema operacional, outros aplicativos ou até elementos nativos de interface de usuário. 

Esse tipo de biblioteca é o mais crítico quando se trata de compatibilidade, pois o surgimento de novas SDKs Android ou IOS pode interferir diretamente no seu funcionamento e é o tipo de biblioteca onde se deve ter grande atenção à qualidade da manutenção, como mencionado no tópico anterior. 

O segundo tipo é composto por bibliotecas que são puramente JavaScript e que geralmente se integram facilmente com React, React Native e até mesmo NodeJS. Um exemplo são as bibliotecas de manipulação de datas, como é o caso do date-fns. 

Esse tipo de biblioteca geralmente tem uma grande compatibilidade e não requer tantas preocupações quanto à manutenção.

4 – Cross platform

Até mesmo alguns componentes e propriedades de componentes nativos do React Native, às vezes são exclusivos de alguma plataforma, podendo ser apenas Android ou apenas IOS. Isso é um detalhe importante a se observar no momento de buscar uma biblioteca para seu aplicativo. 

Imagine o seguinte cenário: você precisa de uma biblioteca de mapas para integrar ao seu aplicativo, aí você encontra uma que você considera ideal e prossegue com todo desenvolvimento do seu aplicativo a partir dessa biblioteca. Só que você desenvolve todo seu aplicativo testando apenas em dispositivos Android por falta de um equipamento com MAC OS e confia que no momento da publicação vai precisar simplesmente de alugar um MAC, compilar e por fim publicar. 

Só que no momento da compilação IOS, você recebe um erro da biblioteca de mapas e quando vai conferir na documentação percebe que era exclusiva para Android e você perde grande parte do seu trabalho. 

Lembrando que isso deve ser observado mesmo em componentes nativos do React Native, na documentação oficial, sempre que algum componente ou propriedade é exclusiva para Android, ela vem com uma identificação verde, e quando é exclusiva IOS vem com uma identificação preta. Então, lembre-se sempre de verificar isso em cada biblioteca, componente ou propriedade em seu projeto.

5 – Alternativas 

Ao buscar por alguma biblioteca, não instale de cara a primeira opção que encontrar. É sempre recomendado ler toda a documentação, verificar a compatibilidade, navegar pelas issues e pesquisar alternativas antes de efetivar a instalação. 

Mas não se preocupe, você sempre tem a opção de remover alguma biblioteca que não correspondeu à sua expectativa.

Saiba como conseguir um design para seu aplicativo com React Native

Como instalar bibliotecas no seu aplicativo

Bibliotecas para o React Native, normalmente instaladas pelo registro npm usando algum gerenciador de pacotes Node.js como npm CLI ou Yarn Classic. 

Uma vez que você já configurou corretamente o ambiente de desenvolvimento React Native, você já está apto para adicionar bibliotecas utilizando o npm CLI. Porém, muitos desenvolvedores optam por utilizar o Yarn por ser um pouco mais rápido e fornecer algumas funcionalidades extras.

Instalando uma biblioteca

Toda biblioteca possui sua própria documentação de instalação e utilização. Por isso, é sempre um pré requisito ler o README antes de qualquer coisa, mas comumente, o processo é o seguinte:

Vamos pegar de exemplo a biblioteca react-native-webview, para instalar, basta navegar até o diretório raiz do seu projeto e rodar o seguinte comando:

• usando npm: npm install react-native-webview
• usando yarn: yarn add react-native-webview

Se a biblioteca instalada possuir código nativo, precisamos linkar ao nosso aplicativo antes de utilizá-lo.

Linkando código nativo 

Se você utiliza react-native CLI para criar seus aplicativos, você já percebeu que são criadas pastas Android e IOS, essas pastas possuem códigos nativos, o que o React Native faz no momento da compilação é converter seus componentes em seus respectivos elementos nativos para cada plataforma, como podemos conferir aqui. Logo, se a biblioteca que você está instalando possui código nativo, precisamos conectar esse código nativo ao nosso aplicativo. 

Desde a versão 0.60.0 do React Native, o Android já possui o recurso de auto link. Então, se você está utilizando essa versão ou alguma superior, você só precisa recompilar o seu aplicativo rodando o comando npx react-native run-android. Se você está utilizando versões anteriores, verifique na documentação da biblioteca o passo a passo para linkar a biblioteca. 

No IOS, o React Native utiliza o CocoaPods para gerenciar as dependências do projeto e, diferente do Android, você ainda precisa de um passo extra para linkar o código nativo. Para isso, você precisa navegar até a pasta IOS da sua aplicação e rodar o comando pod install ou rodar o comando npx pod install direto da raiz da sua aplicação. 

Assim que o processo for concluído você precisa recompilar seu aplicativo para que as alterações tenham efeito, para isso execute o comando npx react-native run-ios, na raiz do seu projeto.

Atenção: se no momento da instalação, alguma instância do metro bundler estiver ativa, encerre-a e reinicie-a após a instalação da biblioteca. Caso contrário, os novos módulos não serão reconhecidos e você pode perder algum tempo procurando por erros inexistentes.

Versionamento 

É sempre importante verificar a compatibilidade de versões entre a biblioteca pretendida e seu aplicativo. Em alguns casos, a versão mais atual da biblioteca é incompatível com seu aplicativo. Caso isso aconteça, verifique o histórico das versões da biblioteca a fim de encontrar a mais recente e compatível versão. De posse do número da versão, basta adicioná-lo ao comando de instalação.

Vamos pegar por exemplo o react-native-webview que, no momento em que estou escrevendo esse artigo, está na versão 11.17.2. Caso você queria uma versão mais antiga, por exemplo a 8.0.0, o comando ficaria assim:

• usando npm: npm install react-native-webview@8.0.0

• usando yarn: yarn add react-native-webview@8.0.0

Conclusão

Certamente em algum ponto do nosso projeto iremos precisar adicionar bibliotecas externas, mas agora você já sabe de todos os cuidados necessários para não ter nenhum tipo de problema quando precisar de uma biblioteca externa.