Maquetación del Pokemon: barra de navegación

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

Clase anteriorSiguiente clase

Daniel Rodriguez Davila

student•

Me encanto el curso, ahora si te luciste Platzi!!

Agustín Navarro Galdon

teacher•

Me alegro muchísimo que te guste =)

Facundo Ernesto Serna

student•

Estoy de acuerdo, excelente curso y Agustín muy buen profesor !!

Paúl Terán

student•

Hola Devs!

Por aquí les dejo un repo de una app hecha con React Native CLI y TypeScript que lleva la mayoría de componentes de este Framework. En esta app he utilizado custom hooks, componentes, librerías de terceros y por supuesto context para el manejo del tema light y dark.

react-native-components

Luis Fernando Pedroza Taborda

student•

Gran aporte, gracias.

Kevin Parra Lopez

student•

Asi vamos

David Rangel

student•

Excelente diseño!

Vladimir Hener Steve Sanchez Astoray

student•

Increibleee curso... quiero seguir aprendiendo más de React Native parece como unas drogas 😂😂🤣🤣😎

Guillermo Navarro

student•

Comparto tu comentario 🤣

Rafael Antonio Pimienta López

student•

Hace mucho no me sentía tan motivado y entusiasmado por aprender algo nuevo.

Que buen proyecto, que buen curso y que buen profesor!

Pablo Marino

student•

Hace mucho que estaba buscando un curso de React Native con Expo asi que estoy contento de haber terminado esta etapa. Gracias Profe por el esfuerzo.

Luis Fernando Pedroza Taborda

student•

Igualmente estaba buscando lo mismo que tu. excelente curso.

Andres Montaño Paez

student•

Cual es la respuesta a la pregunta del examen ¿Qué función de React Navigation nos permite modificar el header de un Stack.Screen?, pues ya he probado todas las respuesta y ninguna es, por lo tanto no puedo aprobar el curso, gracias.!

Luzan Muga

student•

Hola! Esto podría ayudarte :) https://reactnavigation.org/docs/navigation-prop/#setoptions

Stiven Jiménez

student•

No sé por qué los cursos de React Native con Agustín me engancharon tanto ✨ llevo dos en menos de 1 semana, seguro termino la trilogía de cursos mañana

Gustavo Pú

student•

Este es el siguiente Curso https://platzi.com/cursos/react-native-formularios-almacenamiento/

Beto Martinez

student•

Muy buen curso, lo ultimo no queda bien claro que va haber otro curso jajaja

Marcelo Vargas Avila

student•

Para los que les sale 2 headers en la app y solo pueden deshacerse de uno... Tengan en cuenta que el "<Tab.Navigator />" y el "<Stack.Navigator />" agregan un header por defecto para deshacernos de estos hay que llamar a la propiedad que tienen "screenOptions = {{headerShown: false}}

<Tab.Navigator screenOptions={{ headerShown: false }}>

<Stack.Navigator
      screenOptions={{ headerShown: false, headerTransparent: true }}
    >

Les dejo la documentación, busquen la sección "customizing the apperence" https://reactnavigation.org/docs/tab-based-navigation/

Marcelo Vargas Avila

student•

me equivoqué de link xD https://reactnavigation.org/docs/bottom-tab-navigator/

Luciano Cavallo

student•

Muy bueno el curso!! 👍 "Sube para arriba"!! 😃

David Rangel

student•

Para lograr navegar una pestaña atrás en la ruta, basta con hacer esto en el layout en React Native de Julio del 2025: <Stack.Screen name='pokemon/[id]' options={{ headerShown: false, title: '', headerTransparent: true, }} />

        <Stack.Screen
          name='pokemon/[id]'
          options={{
            headerShown: true,
            title: '',
            headerTransparent: true,
          }}
        />

David Rangel

student•

Les comparto mi repo con el código de esta clase:

https://github.com/dr1602/poke-native/tree/feat/class17

Rafael Abraham Duarte Méndez

student•

A mi tambien me parecio muy bueno.

Daniel Alejandro Eslava Herrera

student•

A alguien mas los iconos no le funcionan? alguna sugerencia?

Roger Natividad Pantoja

student•

Primero importa esta libreria, luego lo usas.

import`` MaterialCommunityIcons ``from`` 'react-native-vector-icons/MaterialCommunityIcons';

useEffect(() => { navigation.setOptions({ ``// title: id,`` headerLeft: () => ( <MaterialCommunityIcons ``name``="arrow-left" ``size``={30} ``color``="white" ``// style={{ marginLeft: 20 }}`` ``onPress``={() => navigation.goBack()} /> ), headerRight: () => null, headerTitleStyle: { fontSize: 35, fontWeight: 'bold', marginTop: 10, } }); }, [navigation, route.params]);

Mario Peña

student•

Excelente curso mi estimado Agustín Navarro Galdon.

Jhonntan Andres Castaño Rojas

student•

lo unico que falto es como generar el APK

Ricardo David

student•

Excelente curso!! espero seguir en estos tutoriales.

Alejandro Chavez

student•

Excelente curso

Tulio Junior Rangel Nuñez

student•

Excelente curso, sigo prefiriendo Flutter, pero este curso está muchísimo mejor que el de Flutter de Platzi

Maquetación del Pokemon: barra de navegación

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