React Native Icons fonts awesome

Agora vamos mostrar como trabalhar com ícones no react native. O módulo node que vamos usar é esse: https://github.com/oblador/react-native-vector-icons

Nessa mesma página tem instruções tanto para Android como para IOS. Nesse post vou explicar o processo para Android. Para IOS basta seguir as instruções de IOS que deve funcionar da mesma forma. 

IMPORTANTE: Se você já tentou usar esse componente e o ícone não aparece ou dá uma mensagem de erro parecida com essa:

    Error: While resolving module `react-native-vector-icons/FontAwesome`, the Haste package `react-native-vector-icons` was found. However the module `FontAwesome` could not be found within the package.

Se aconteceu isso com você, tenho uma boa notícia: Eu também já passei pelo mesmo problema e vou mostrar a solução. Mas para que essa solução funcione, recomendo que siga cada passo que vou mostrar agora. 

Acho que nem precisa lembrar que se estiver algum processo react-native rodando na porta 8081 precisa pará-lo antes de instalar o módulo npm.

Primeiro passo pode não parecer importante mais é. Se já estiver com um projeto criado, descarte-o (não precisa excluir) e crie um novo projeto. Se não sabe ou não lembra, consulte Esse Post

Com o projeto criado, vamos instalar o compoente navegando até a pasta do projeto pelo prompt e executando o comando:

    npm install react-native-vector-icons --save

Agora abra o arquivo android/app/build.gradle ( Não android/build.gradle ) e adicione essas linhas:

    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"

IMPORTANTE: Tenha certeza que não adicionou essas linhas em um trecho comentado. Pois no começo do arquivo tem muitas linhas comentadas. É possível adicionar as linhas nesse trecho por engano.

Em seguida execute esse comando:

    react-native link

Se o erro mensionado no começo do post está acontecendo, basta excluir o arquivo package.json que fica nesse caminho:

    node_modules/react-native/local-cli/core/__fixtures__/files/package.json

Como o módulo npm devidamente instalado, vamos editar o arquivo App.js adicinando o import e a tag do ícone no render. O arquivo deve ficar assim:

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    import Icon from 'react-native-vector-icons/FontAwesome';
    
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,' +
    'Shake or press menu button for dev menu',
});
    
    export default class App extends Component<{}> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
              <Icon name="rocket" size={30} color="#900" />
            </Text>
            <Text style={styles.instructions}>
              To get started, edit App.js
            </Text>
            <Text style={styles.instructions}>
              {instructions}
            </Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

Se deu tudo certo, inicie e recarregue o APP que o ícone deve aparecer:

Imagem 

Confira a lista completa de ícones: http://fontawesome.io/icons/

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente