Diseñando la Tab navigation con iconos

A mi no me cargaban los iconos, lo solucione de la siguiente manera:

//En el documento en la ruta: './android/app/build.gradle, agregué la la linea:
apply from:("../../node_modules/react-native-vector-icons/fonts.gradle");

//justo por encima de esta linea:
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); 

Si a alguien le tira error a los con los iconos intente esto
Instalar dependencia–>
npm i react-native-vector-icons
y luego todo el procedimiento normal del video
Ejemplo—>
import Icon from ‘react-native-vector-icons/FontAwesome5’;
<Tab.Screen
name="Favorite"
component={FavoriteScreen}
options={{
tabBarLabel: “Favoritos”,
//tabBarBadge: 3,
tabBarIcon: ({color, size}) => (
<Icon name=“heart” color= {color} size={size}/>
),
}}
/>

Si están trabajando con Android y les dio error por tabBarIcon
yo importe

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

y funciono

Se puede escribir renderPokeball de esta manera para que se vea el codigo un poco mas conciso.

const renderPokeball = () => (
  <Image
    source={require("../assets/pokeball.png")}
    style={{ width: 75, height: 75, top: -15 }}
  />
)

Para los que estén usando Expo y les de error mostrar el icono, añadir esta línea me funcionó

import Icon from "@expo/vector-icons/FontAwesome5";

Si les da error con los iconos y les sale el siguiente mensaje de error:

.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of TabBarIcon.

.
Solamente quiten las llaves del import de Icon, así:

import Icon from "react-native-vector-icons/FontAwesome5";

Para el manejo de tamaños (En este caso tamaño de la imagen) recomendaría hacerlo por porcentajes o con la librería react-native-responsive-screen para que el diseño que hagan, se vea bien en multiples pantallas.

no me funcionaban los iconos, otra forma de que aparescan era utilizar MaterialCommunityIcons : https://reactnavigation.org/docs/bottom-tab-navigator/#example

si estan usando typescript pueden hacerlo igual que el tutotial solo instalen el tipado de la libreria de iconos.

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

si le trae problema la importacion de los iconos usenla sin el @

import Icon from "react-native-vector-icons/FontAwesome5";

No era necesario usar esa ruta para la imagen, pero es bueno saber como hacerlo, en los iconos de la libreria usada hay una pokeball. Anexo como lo realice:

import Icon3 from "@expo/vector-icons/MaterialCommunityIcons";

<Stack.Screen name="Pokedex" component={PokedexScreen} options={{
          tabBarLabel: "Pokedex",
          tabBarIcon: ({ color, size }) => (
            <Icon3 name="pokeball" color={color} size={size} />
          ),
        }} />

~ Que tal Platzinauta, ya conectamos en LinkedIn? ~

¡Que estas esperando! Conectemos en LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.

Compañeros para usar los Iconos les recomiendo usar MatrialIcon así:

import { MaterialIcons } from '@expo/vector-icons';

Y lo usan así:

<MaterialIcons name='settings' color={color} size={size}/>

Y para saber qué Iconos tienen disponibles pueden Hacer clic aquí y en el filtro le ponen MaterialIcon y buscan el Icono que necesiten. Este MaterialIcon también se puede usar en el Flutter

A mi tampoco me funcionaban los iconos en React Native CLI, en la documentacion de vector icons dice que agreguen en el build.gradle de la app android las siguientes lineas

 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"

Y lo mas importante en el tabBarIcon lo ponen de 2 formas

tabBarIcon: () => {
return <Icon name="heart" color="#000" size={20} />;
 },

o

tabBarIcon: () => <Icon name="heart" color="#000" size={20} />,

Repito asi me funciono para React Native CLI

Saludos!

No fue necesario instalar nada adicional, pero me guie de la documentacion y de este link para añadir la imagen https://github.com/oblador/react-native-vector-icons

yarn add react-native-vector-icons

faltaba

exelente cursoo

Genial esa creatividad para subir la pokebola de tamaño y darle un aspecto visual completamente distinto a la app 🙏🏼