Cursos Empresas Blog Live Conf Eventos Precios

0:004:56

Maquetación del Pokemon: barra de navegación

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

Clase 17 / 17

Ver clases

Maquetación del Pokemon: barra de navegación

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

Clase 17 de 17

Clase 17 / 17

Maquetación del Pokemon: barra de navegación

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

Clase 17 / 17

Ver clases

Comentarios (30)30 comentarios

Daniel Rodriguez Davila

Hace 5 años

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

Agustín Navarro Galdon

Profesor

Me alegro muchísimo que te guste =)

Facundo Ernesto Serna

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

Paúl Terán

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

Gran aporte, gracias.

Kevin Parra Lopez

Hace 4 años

Asi vamos

David Rangel

Hace un año

Excelente diseño!

Vladimir Hener Steve Sanchez Astoray

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

Guillermo Navarro

Comparto tu comentario 🤣

Rafael Antonio Pimienta López

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

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.

Igualmente estaba buscando lo mismo que tu. excelente curso.

Andres Montaño Paez

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

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

Stiven Jiménez

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ú

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

Beto Martinez

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

Marcelo Vargas Avila

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/

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

Luciano Cavallo

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

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

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

Rafael Abraham Duarte Méndez

Hace 2 años

A mi tambien me parecio muy bueno.

Daniel Alejandro Eslava Herrera

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

Roger Natividad Pantoja

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

Hace 3 años

Excelente curso mi estimado Agustín Navarro Galdon.

Jhonntan Andres Castaño Rojas

lo unico que falto es como generar el APK

Ricardo David

Excelente curso!! espero seguir en estos tutoriales.

Alejandro Chavez

Excelente curso

Tulio Junior Rangel Nuñez

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

Maquetación del Pokemon: barra de navegación

Maquetación del Pokemon: barra de navegación

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Maquetación del Pokemon: barra de navegación

Maquetación del Pokemon: barra de navegación

Comentarios

Asi vamos

Comentarios

Asi vamos