Utilizando ícones do react-native-vector-icons no React Native - ANDROID
Importar/Exportar arquivos no MongoDB utilizando o Meteor para importação
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 editar o arquivo:
android/app/build.gradle
Mas NÃO o arquivo android/build.gradle, cuidado tem dois, é o q está no /app/.
Só adicionar essa linha no final do arquivo:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Ou se você quiser selecionar as fontes especificamente, o que eu recomendo:
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
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!
Esse foi tranquilo, Aqui no meu celular rodou perfeitamente! =)