Utilizando ícones do react-native-vector-icons no React Native - iOS

Como instalar a biblioteca react-native-vector-icons no React Native na versão 0.61 para iOS

Para utilizar ícones no React Native temos que instalar a lib:

yarn add react-native-vector-icons

Ela vem com vários ícones legais do MaterialIcons, Font Awesome, etc... pra ver todos clique aqui.

E com a versão do RN q estou utilizando"react-native": "0.61.1", (Fast Reload \o/)

Não precisamos mais fazer:

react-native link react-native-vector-icons

Mas precisamos entrar na pasta do ios e executar pod install, voltar cd .. e executar react-native run-ios na raiz do projeto novamente.

Para utilizar precisamos importar no código, nesse caso estou importando do MaterialIcons.

import Icon from 'react-native-vector-icons/MaterialIcons'
Icon.loadFont();

Sim, esse Icon.loadFont() é obrigatório, se você trocar o MaterialIcons por outra fonte por exemplo: FontAwesome, esse loadFont() tem que ser chamado novamente, ou seja, é melhor deixar ele no código mesmo que você já tenha executado ele uma vez com uma outra fonte. Interessante colocar essa configuração em um arquivo de configuração, por exemplo: loadFonts.js.

Agora só aplicar o Icon no seu código:

...
<SubmitButton>
   <Icon name="add" size={20} color="#FFF" />
</SubmitButton>
...

Pronto!

Depois vou atualizar para o Android também!

Fonte: https://github.com/oblador/react-native-vector-icons

Kudos para Hugo Duarte e William Amorim que deram uma força!

Imagem do Post

Comentários