Cómo cargar y usar íconos en React Native con react-native-vector-icons

En este artículo, aprenderás a configurar y usar el paquete react-native-vector-icons en un proyecto de React Native. Además, veremos cómo limitar las fuentes cargadas para optimizar la aplicación, utilizando Ionicons como ejemplo.

Instalación de react-native-vector-icons

Primero, instalaremos el paquete principal y sus tipos para TypeScript.

  1. Instala react-native-vector-icons:

    npm install react-native-vector-icons

  2. Instala los tipos de TypeScript para soporte en desarrollo:

    npm i --save-dev @types/react-native-vector-icons

  3. npm install --save @react-native-vector-icons/Ionicons o el que desees

Enteoria ya esta, lo usas asi :

import React from 'react';
import { View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
      <Text>
        <Icon name="rocket" size={30} color="#900" />

      </Text>
    </View>
  );
};

Documentación aca

Pero si no anda segui las instrucciones de abajo.

Configuración en Android

Edición del archivo build.gradle

  1. Abre android/app/build.gradle (NO android/build.gradle).

  2. Agrega el siguiente código para cargar las fuentes personalizadas:

    apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

project.ext.vectoricons = [
    iconFontNames: [ 'Ionicons.ttf' ] // Especificar las fuentes deseadas
]

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

    Con esta configuración, solo se cargará la fuente Ionicons, evitando cargar todas las fuentes predeterminadas, lo cual mejora el rendimiento.

Uso de íconos en toda la aplicación

Para que los íconos estén disponibles de manera global, podemos configurarlos directamente en nuestro archivo App.tsx utilizando react-native-paper.

  1. Modifica el archivo App.tsx para incluir los íconos de Ionicons:

    import React from 'react';
import { PaperProvider } from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { HelloWorld } from './src/presentation/screen/HelloWord';
import IonIcon from 'react-native-vector-icons/Ionicons';

export const App = () => {
  return (
    <SafeAreaProvider>
      <PaperProvider
        settings={{
          icon: props => <IonIcon {...props} />, // Configuración global de íconos
        }}
      >
        <HelloWorld />
      </PaperProvider>
    </SafeAreaProvider>
  );
};

Con esta configuración, los componentes de react-native-paper podrán usar Ionicons automáticamente para la propiedad icon.

Uso de íconos en componentes específicos

Usando la propiedad icon de componentes como <FAB>

Podemos usar la propiedad icon de los componentes de react-native-paper con la palabra clave del ícono, como en el siguiente ejemplo:

<FAB
  icon="add"
  onPress={() => console.log('Fab Pressed')}
  style={{ position: 'absolute', right: 16, bottom: 16 }}
/>

Importando y usando directamente el componente Icon

También puedes importar el componente Icon de react-native-vector-icons/Ionicons para utilizarlo en cualquier parte de la aplicación:

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

<Icon name="add" size={25} color="#000" />;

Ejemplo completo

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { FAB } from 'react-native-paper';
import Icon from 'react-native-vector-icons/Ionicons';
import { globalStyle } from '../../theme/global.styles';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <View style={globalStyle.centerContainer}>
      <Text>{counter}</Text>
      <FAB
        icon="add" // Usando la palabra clave del ícono
        onLongPress={() => setCounter(0)}
        onPress={() => setCounter(counter + 1)}
        style={globalStyle.fab}
        label="+1"
      />
      <Icon name="add" size={25} color="#000" /> {/* Usando el componente Icon */}
    </View>
  );
};

Recursos adicionales

Para más información sobre la configuración y uso de react-native-vector-icons y la fuente Ionicons, puedes consultar los siguientes enlaces oficiales: