search
CursosEmpresasBlogLiveConfPrecios
Curso de React Native: Manejo de Listas y Consumo de APIs

Diseñando la Tab navigation con iconos

Curso de React Native: Manejo de Listas y Consumo de APIs

Contenido del curso

Inicializando la app

  • 1
    Creación del proyecto: PokeDex

    Creación del proyecto: PokeDex

    03:03 min
  • 2
    Configuración de React Navigation

    Configuración de React Navigation

    09:07 min
  • 3
    Diseñando la Tab navigation con iconos

    Diseñando la Tab navigation con iconos

    Viendo ahora
  • 4
    Stack de navegación para Pokedex

    Stack de navegación para Pokedex

    09:14 min

API y listado de Pokemon

  • 5
    Consumo de APIs con fetch: PokeApi

    Consumo de APIs con fetch: PokeApi

    10:21 min
  • 6
    Información de todos los Pokemon

    Información de todos los Pokemon

    12:34 min
  • 7
    Lista de Pokemon con FlatList

    Lista de Pokemon con FlatList

    08:12 min
  • 8
    Renderizando la PokemonCard

    Renderizando la PokemonCard

    15:14 min
  • 9
    Clasificación por colores y utilidades de Lodash

    Clasificación por colores y utilidades de Lodash

    09:48 min
  • 10
    Infinite scrolling con FlatList

    Infinite scrolling con FlatList

    11:44 min
  • 11
    Añadiendo StyleSheet a la lista

    Añadiendo StyleSheet a la lista

    03:38 min

Detalles del Pokemon

  • 12
    Vista y navegación al detalle del Pokemon

    Vista y navegación al detalle del Pokemon

    05:02 min
  • 13
    Consultando la API de detalles del Pokemon

    Consultando la API de detalles del Pokemon

    06:36 min
  • 14
    Maquetación del Pokemon: header

    Maquetación del Pokemon: header

    17:25 min
  • 15
    Maquetación del Pokemon: sección de tipos

    Maquetación del Pokemon: sección de tipos

    11:35 min
  • 16
    Maquetación del Pokemon: estadísticas

    Maquetación del Pokemon: estadísticas

    15:35 min
  • 17
    Maquetación del Pokemon: barra de navegación

    Maquetación del Pokemon: barra de navegación

    04:56 min
schoolTomar examen

Diseñando la Tab navigation con iconos

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Comentarios22

Rafa Anaya

Rafa Anaya

Estudiante
Hace 5 años
    Manuel Duarte

    Manuel Duarte

    Estudiante
    Hace 5 años
    Rafa Anaya

    Rafa Anaya

    Estudiante
    Hace 5 años
Script Dog

Script Dog

Estudiante
Hace 5 años
    Jorge Arteaga

    Jorge Arteaga

    Estudiante
    Hace 4 años
    Esteban Saxton

    Esteban Saxton

    Estudiante
    Hace 4 años
Arturo Soga

Arturo Soga

Estudiante
Hace 4 años
    Gustavo Pú

    Gustavo Pú

    Estudiante
    Hace 4 años
    Michael Nassee Buritica Ortega

    Michael Nassee Buritica Ortega

    Estudiante
    Hace 3 años
Wilmer David Cedeño Mendoza

Wilmer David Cedeño Mendoza

Estudiante
Hace 3 años
Luis Alejandro Nieto Ruth

Luis Alejandro Nieto Ruth

Estudiante
Hace 5 años
    Manuel Duarte

    Manuel Duarte

    Estudiante
    Hace 5 años
    Daniel Rodriguez Davila

    Daniel Rodriguez Davila

    Estudiante
    Hace 5 años
Josué Ramírez Hernández

Josué Ramírez Hernández

Estudiante
Hace 4 años
    Tulio Junior Rangel Nuñez

    Tulio Junior Rangel Nuñez

    Estudiante
    Hace 3 años
Julian Alexis Novoa Lujan

Julian Alexis Novoa Lujan

Estudiante
Hace 4 años
Francisco Corvalán

Francisco Corvalán

Estudiante
Hace 4 años
    César López

    César López

    Estudiante
    Hace 4 años
    Juan José Sanchez choquecallata

    Juan José Sanchez choquecallata

    Estudiante
    Hace 4 años
Vladimir Farrera Vera

Vladimir Farrera Vera

Estudiante
Hace 3 años
Danilo Moreno

Danilo Moreno

Estudiante
Hace 4 años
    Gustavo Pú

    Gustavo Pú

    Estudiante
    Hace 4 años
Hector Ibarra

Hector Ibarra

Estudiante
Hace 5 años
    Omar Daniel Centeno

    Omar Daniel Centeno

    Estudiante
    Hace 5 años
Julian Lozano

Julian Lozano

Estudiante
Hace 5 años
    Agustín Navarro Galdon

    Agustín Navarro Galdon

    Profesor
    Hace 5 años
Jorge Gonzalez Grez

Jorge Gonzalez Grez

Estudiante
Hace 4 años
    Xavier Medina Veintimilla

    Xavier Medina Veintimilla

    Estudiante
    Hace 4 años
    Jorge Gonzalez Grez

    Jorge Gonzalez Grez

    Estudiante
    Hace 4 años
Armando Robertis

Armando Robertis

Estudiante
Hace 4 años
Rafael Antonio Pimienta López

Rafael Antonio Pimienta López

Estudiante
Hace 4 años
Alfonso Andres Zapata Guzman

Alfonso Andres Zapata Guzman

Estudiante
Hace 3 años
    Alfonso Andres Zapata Guzman

    Alfonso Andres Zapata Guzman

    Estudiante
    Hace 3 años
Freddy Alexander Barragan Rico

Freddy Alexander Barragan Rico

Estudiante
Hace 3 años
José Manuel Cisneros Castro

José Manuel Cisneros Castro

Estudiante
Hace 4 años
Maico Paul RZ

Maico Paul RZ

Estudiante
Hace 4 años
Roni Edwin Oyardo Acuña

Roni Edwin Oyardo Acuña

Estudiante
Hace 4 años

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.

Screen Shot 2021-12-14 at 6.18.10 PM.png

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 LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.

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

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

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