Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
16H
14M
45S

Dise帽ando la Tab navigation con iconos

3/17
Recursos

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榬eact-native-vector-icons/FontAwesome5鈥;
<Tab.Screen
name="Favorite"
component={FavoriteScreen}
options={{
tabBarLabel: 鈥淔avoritos鈥,
//tabBarBadge: 3,
tabBarIcon: ({color, size}) => (
<Icon name=鈥渉eart鈥 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

Si no les aparece los 铆conos, chequen que su arrowFunction sea un par茅ntesis y no una llave

tabBarIcon: ({ color, size }) => ( // <--
	<Ionicons name='heart' color={color} size={size} />
),

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 }}
  />
)

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鈥檚 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

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 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 馃檹馃徏