Como instalar a biblioteca react-native-vector-icons para IOS / Android

O React Native é uma biblioteca javascript com foco em desenvolvimento mobile. Desde o seu lançamento em 2015 muitas melhorias foram implementadas com o destaque para o auto link de componentes e outras bibliotecas.

A biblioteca conta com muitos componentes feitos por terceiros e uma delas é o react-native-vector-icons. Essa biblioteca é pre-requisito nas principais bibliotecas do mercado porém ela necessita de algumas configurações adicionais das demais bibliotecas.

O primeiro passo como toda lib é instalando:

npm install react-native-vector-icons

ou

yarn add react-native-vector-icons

Após será necessário instalar o pod

cd ios && pod install

E agora vem os passos extras:

Entre na pasta do seu projeto/ios e logo após abra o arquivo nomedoprojeto.xcworkspace

Dentro da pasta de arquivos do seu projeto crie um NOVO GRUPO e adicione as fontes da biblioteca localizadas na pasta node_modules/react-native-vector-icons/Fonts

Após adicionar as Fonts será necessário inclui-las no arquivo info.plist.
Crie um registro com a key: Fonts provided by application e insira todas as fontes.

O próximo passo é marcar o checkbox: Run script only when installing localizado na tab: Build Phases.


Depois desses passo rode o comando abaixo para ter a biblioteca funcionando:

react-native run-ios

Normalmente os passos acima evitaram os seguintes erros:

• error: bundling failed: Error: While resolving module `react-native-vector-icons/MaterialIcons`, the Haste package `react-native-vector-icons` was found. However the module `MaterialIcons` could not be found within the package. Indeed, none of these files exist:
• Unrecognized font family ‘FontAwesome’
• While resolving module react-native-vector-icons/FontAwesome, the Haste package react-native-vector-icons was found. However the moduleFontAwesome could not be found within the package.

Já para Android além da instalação via npm ou yarn será necessário incluir no arquivo:
android/app/build.gradle o seguinte comando no final do arquivo:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

react-native run-android && react-native start