Utilizando fontes de ícones no React Native

Acho que hoje não existe uma aplicação sequer que não utilize algum tipo de ícone. No React Native não é diferente e podemos usar ícone basicamente de 3 formas: Pacote de fontes, SVG’s ou imagens.

A minha recomendação é que você vá com a primeira opção. Primeiro porque utilizar apenas imagens vai te limitar muito na hora de trabalhar com o tamanho da imagem. A utilização de SVG’s é legal mas não tem muito suporte ainda, algumas libs tentaram suprir essa necessidade mas ainda com muitos bugs.

Para utilizar os pacotes de fontes no React Native vamos utilizar a biblioteca react-native-vector-icons. Vamos começar instalando a biblioteca no projeto:

yarn add react-native-vector-icons

Agora com a lib instalada podemos realizar o link da biblioteca com o código nativo com o comando:

react-native link

Reinicie seu emulador (realizando react-native run novamente) e agora em qualquer componente você pode utilizar o pacote de fontes que preferir utilizando o componente Icon

import Icon from 'react-native-vector-icons/FontAwesome';

...

return <Icon name="home" size={18} color="#999" />

Pronto! Agora você já pode utilizar os ícones de vários pacotes de fontes da internet. Se você quer saber quais ícones pode utilizar, o próprio site da biblioteca oferece uma opção de busca em todos pacotes possíveis.