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