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
La libreria de iconos si viene con una pokeball. La importamos asi:
import CommunityIcon from "react-native-vector-icons/MaterialCommunityIcons";
```import CommunityIcon from "react-native-vector-icons/MaterialCommunityIcons";
Y se llama asi:
```js
<CommunityIcon name="pokeball" color={color} size={size} />
```\<CommunityIcon name="pokeball" color={color} size={size} />
Yo le coloque CommunityIcon pero puede ser cualquier otro nombre
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 }}
/>
)
.
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";
Rafa Anaya
Manuel Duarte
Rafa Anaya
Script Dog
Jorge Arteaga
Esteban Saxton
Arturo Soga
Gustavo Pú
Michael Nassee Buritica Ortega
Wilmer David Cedeño Mendoza
Luis Alejandro Nieto Ruth
Manuel Duarte
Daniel Rodriguez Davila
Josué Ramírez Hernández
Tulio Junior Rangel Nuñez
Julian Alexis Novoa Lujan
Francisco Corvalán
César López
Juan José Sanchez choquecallata
Vladimir Farrera Vera
Danilo Moreno
Gustavo Pú
Hector Ibarra
Omar Daniel Centeno
Julian Lozano
Agustín Navarro Galdon
Profesor
Jorge Gonzalez Grez
Xavier Medina Veintimilla
Jorge Gonzalez Grez
Armando Robertis
Rafael Antonio Pimienta López
Alfonso Andres Zapata Guzman
Alfonso Andres Zapata Guzman
Freddy Alexander Barragan Rico
José Manuel Cisneros Castro
Maico Paul RZ
Roni Edwin Oyardo Acuña
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");
Buena aportación
Una disculpa, olvidé comentar que esto aplica solo si creaste tu app con react native cli, si usaste expo cli (al igual que el profesor), no tendras la ruta que menciono. No estoy seguro que pasos debes seguir en tu caso. ¿Tienes algun mensaje de error?
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}/> ), }} />
No supe cual es el cambio. Pero me funcionó!
¿Qué clase de brujería es esta?
Cambie tu código por el mio y funcionó... pero no logro ver la diferencia.
Si están trabajando con Android y les dio error por tabBarIcon yo importe
import Icon from "react-native-vector-icons/FontAwesome";
y funciono
Gracias me Funciono 💚
Muchas gracias me funciono
La libreria de iconos si viene con una pokeball. La importamos asi:
import CommunityIcon from "react-native-vector-icons/MaterialCommunityIcons"; ```import CommunityIcon from "react-native-vector-icons/MaterialCommunityIcons"; Y se llama asi: ```js <CommunityIcon name="pokeball" color={color} size={size} /> ```\<CommunityIcon name="pokeball" color={color} size={size} /> Yo le coloque CommunityIcon pero puede ser cualquier otro nombre
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, con esto queda mejor tanks
¡Amigo, Gracias por tu aporte, porque con "function" no me funcionaba, pero con "const" sí que me renderizo!
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";
Intenté todas las opciones de los comentarios, esta fue la única que me sirvió, muchas gracias... Por cierto, cómo llegaste a esa respuesta?
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
Gracias, tu solución tambien me funcionó
No me funciona .... ya intente todos los comentarios
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";
Exelente 💚
que tema de vs code e iconos usan?
Hola
Yo ahora utilizo el tema de Platzi. ¡¡¡Sí!!! Hay un tema oficial para VSCode y está genial.
Puedes instalarlo desde la web de VSCode.
Saludos
Hola devs ! Estoy teniendo problemas con los iconos en IOS. Estoy utilizando la librería expo/vector-icons y al intentar rederizar en el emulador de IOS me arroja este error. En el emulador de Android si carga sin problema.
Intenta limpiar el directorio que te está indicando en el error.
A alguien más le pasa que la pokebola no se muestra?, no tuve problemas con los iconos
¡Hola! :D
Muéstranos por favor tu código para poder ayudarte, es probable que te esté faltando algo. 👌
¡Nunca pares de aprender! 💚
Hola, gracias por ofrecerme tu ayuda, pero simplemente copié el código que subió el profesor a los recursos (ya se me estaba quemando el cerebro donde no encontraba el error), con eso ya solucioné mi problema, supongo que en algún lugar había un punto o una coma que omití jejeje
no me aparece la imagen como icon queda en blanco que podra ser?
import React from 'react'; import {Image} from "react-native"; import {createBottomTabNavigator} from "@react-navigation/bottom-tabs"; import Icon from "react-native-vector-icons/FontAwesome5"; import FavoriteScreens from "../screens/Favorite"; import PokedexScreens from "../screens/Pokedex"; import AccountScreens from "../screens/Account";
const Tab = createBottomTabNavigator();
export default function NavigationTab() { return ( <Tab.Navigator>
<Tab.Screen name="Favorite" component={FavoriteScreens} options={{ tabBarLabel:"Favoritos", tabBarIcon: (color,size)=> ( <Icon name="heart" color={color} size ={size}/> ) }} /> <Tab.Screen name="Pokedex" component={PokedexScreens} options={{ tabBarLabel:"", tabBarIcon: ()=> renderPokebal(), }} /> <Tab.Screen name="Account" component={AccountScreens} options={{ tabBarLabel:"Mi Cuenta", tabBarIcon: (color,size)=> ( <Icon name="user" color={color} size ={size}/> ) }} /> </Tab.Navigator>
); }
function renderPokebal(){ return( <Image source ={require=("../assets/pokeball.png")} style = {{with:75, height:75}} /> ); }
Al tirar la Pokeball para arriba, con la regla top: -25, ta parte de arriba (la que sobresale del bottom tab) no detecta clics, solo detecta los clics en el espacio que queda dentro del bottom tab.
Alguien sabe cómo solucionarlo?
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
GitHub,Medium,Redes socialeso unete al mejor servidor deDiscordsobre Python y ciencia de datos en español.
Aqui ven los demas iconos en esa libreria por medio de un buscador:
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