Diseñando la Tab navigation con iconos

Clase 3 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Rafa Anaya

student•

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");

Manuel Duarte

student•

Buena aportación

Rafa Anaya

student•

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?

Script Dog

student•

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

Jorge Arteaga

student•

No supe cual es el cambio. Pero me funcionó!

Esteban Saxton

student•

¿Qué clase de brujería es esta?

Cambie tu código por el mio y funcionó... pero no logro ver la diferencia.

Arturo Soga

student•

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

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

y funciono

Gustavo Pú

student•

Gracias me Funciono 💚

Michael Nassee Buritica Ortega

student•

Muchas gracias me funciono

Wilmer David Cedeño Mendoza

student•

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

Luis Alejandro Nieto Ruth

student•

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

Manuel Duarte

student•

Si, con esto queda mejor tanks

Daniel Rodriguez Davila

student•

¡Amigo, Gracias por tu aporte, porque con "function" no me funcionaba, pero con "const" sí que me renderizo!

Josué Ramírez Hernández

student•

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";

Tulio Junior Rangel Nuñez

student•

Intenté todas las opciones de los comentarios, esta fue la única que me sirvió, muchas gracias... Por cierto, cómo llegaste a esa respuesta?

Julian Alexis Novoa Lujan

student•

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.

Francisco Corvalán

student•

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

César López

student•

Gracias, tu solución tambien me funcionó

Juan José Sanchez choquecallata

student•

No me funciona .... ya intente todos los comentarios

Vladimir Farrera Vera

student•

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

Danilo Moreno

student•

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

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

Gustavo Pú

student•

Exelente 💚

Hector Ibarra

student•

que tema de vs code e iconos usan?

Omar Daniel Centeno

student•

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

Julian Lozano

student•

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.

Agustín Navarro Galdon

teacher•

Intenta limpiar el directorio que te está indicando en el error.

Jorge Gonzalez Grez

student•

A alguien más le pasa que la pokebola no se muestra?, no tuve problemas con los iconos

Xavier Medina Veintimilla

student•

¡Hola! :D

Muéstranos por favor tu código para poder ayudarte, es probable que te esté faltando algo. 👌

¡Nunca pares de aprender! 💚

Jorge Gonzalez Grez

student•

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

Armando Robertis

student•

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

Rafael Antonio Pimienta López

student•

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?

Alfonso Andres Zapata Guzman

student•

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.

Alfonso Andres Zapata Guzman

student•

Aqui ven los demas iconos en esa libreria por medio de un buscador:

https://oblador.github.io/react-native-vector-icons/

Freddy Alexander Barragan Rico

student•

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

José Manuel Cisneros Castro

student•

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!

Maico Paul RZ

student•

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

Roni Oyardo

student•

yarn add react-native-vector-icons

faltaba

//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"); 

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

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

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

 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"

Diseñando la Tab navigation con iconos

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación