Configuración de React Navigation

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

Contenido del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:07

Configuración de React Navigation

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

Clase 2 de 17

Clase 2 / 17

Jhonntan Andres Castaño Rojas

Hace 3 años

en serio actualicen el curso literalmente no se puede hacer ```srandersj@srandersj-ubuntu:~/Escritorio/2Curso Práctico de React Native: Manejo de Listas y Consumo de APIs/pokedex$ yarn android yarn run v1.22.21 warning ../package.json: No license field $ expo start --android WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: -new-expo-cli-f4250d8e3421. ┌───────────────────────────────────────────────────────────────────────────┐ │ │ │ The global expo-cli package has been deprecated. │ │ │ │ The new Expo CLI is now bundled in your project in the expo package. │ │ Learn more: │ │ │ │ To use the local CLI instead (recommended in SDK 46 and higher), run: │ │ › npx expo <command> │ │ │ └───────────────────────────────────────────────────────────────────────────┘ Starting project at /home/srandersj/Escritorio/2Curso Práctico de React Native: Manejo de Listas y Consumo de APIs/p okedex Starting Metro Bundler Started Metro Bundler › Opening exp://192.168.100.188:19000 on Nexus_6_API_30-Para_desarrollo_movil_ANDROID_R ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ █ ▄▄▄▄▄ █▄▀ ▀ ████ ▄▄▄▄▄ █ █ █ █ █ █▀ █▀ █ █ █ █ █ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █ █▄▄▄▄▄▄▄█▄█ █ █▄█▄█▄▄▄▄▄▄▄█ █▄▄▄▄█▀▄▀▄█ ▄▀▀▀██▄██▄ ▄▀▄█ █▄▄ ▀█▀▄ ▄█▀▄█ █ ▀██▀███ █▄▄▄▄██▄ █▄▄██ █ ▄█ ▄ █ █▀█ █▀▄▀▄▀▀▄▀▀ ▀█▀▄██ ▀▀█▀▀█ ▀█ ███▄▄█▄▄█▀▄ ▄▄ ▄ ▄▄▄ ▀▄█▀█ █ ▄▄▄▄▄ ██▄█▀▄▄▀█ █▄█ █▄▄ █ █ █ █ █▀▀▄▀ █▀▀▄▄ █▀▀ █ █ █▄▄▄█ █ ▀▄▄▀ ▀▄▀▄█▄▄ ▄██ █▄▄▄▄▄▄▄█▄██▄█▄█▄██████▄▄▄█

› Metro waiting on exp://192.168.100.188:19000 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android › Press w │ open web

› Press r │ reload app › Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit. Android Bundling failed 170ms Unable to resolve module @react-navigation/native from /home/srandersj/Escritorio/2Curso Práctico de React Native: M anejo de Listas y Consumo de APIs/pokedex/App.js: @react-navigation/native could not be found within the project or in these directories: node_modules ../node_modules 1 | import "react-native-gesture-handler"; 2 | import { StyleSheet, Text, View } from "react-native"; > 3 | import { NavigationContainer } from "@react-navigation/native"; | ^ 4 | 5 | export default function App() { 6 | return (

Comentarios (33)33 comentarios

Lucas Durán

Hace 5 años

Si están probando con Android el SafeAreaView no funciona correctamente. Lo solucioné instalando: expo install react-native-safe-area-context

y luego importándolo: import { SafeAreaView } from "react-native-safe-area-context";

ERICK DAMIAN JIMENEZ MURCIA

Gracias, funciona

Luis Fernando Pedroza Taborda

Excelente aporte, funciono perfectamente.

José Gregorio Estrada Meneses

yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context

yarn add @react-navigation/native-stack

yarn add @react-navigation/bottom-tabs

yarn add react-native-vector-icons

yarn start

Javier Figueroa Montiel

Hace 4 años

siempre cuando es una version diferente se cambia los metodos de instalacion de cada paquete?

Diego Aurelio Landa Torres

Hace 2 años

sí

Wilson Fabian Pérez Sucuzhañay

Voy con la versión 6 los importadores cambian, por si algún loco como yo desea hacerlo (Lo estoy haciendo con Typescript)

import { createNativeStackNavigator } from “@react-navigation/native-stack”;

Edgar Ubaldo

Mejore la forma de implementar los Tabs, unificando en un componente llamado TabScreen pasandole por prop el nombre de titulo de cada Tab y no tener 3 componentes que la unica diferencia es el nombre, <3 si les gustó mi aporte !RN

Vinny Espitia

Que triste que los únicos cursos de React Native en todo Platzi estén tan desactualizados.

David Donneys

Aun sigue siendo útil para aprender, aun así yo recomiendo complementar con videos de YouTube

Yessica Rios

yarn add react-native-vector-icons
npm i react-native-vector-icons

Buen dato, gracias.

Andres Ramirez Restrepo

Use la versión 6, todo funciona bien y estable. Creo que 9 meses después es mejor ya utilizar la versión mas actualizada.

Candela Esquivel

Tienen que actualizar los cursos con la version x6 , porfavor.

Joseph Peña Quino

Hola! yo use estos comandos en 2024-06-02:

yarn create expo-app pokedex-app --template blank
cd pokedex-app
yarn add react-native-web react-dom @expo/metro-runtime
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context
yarn add @react-navigation/native-stack
yarn add react-native-vector-icons

```y el codigo segui igual a todo lo que el hizo pero no importe el "react-native-gesture-handler"

Gera Garcia

La documentación está espectacular! Te guía muy bien para crear botones con estilo

Yosnier Macuare

No es por nada pero, lo haces ser sencillo!

Pienso lo mismo.

David Rangel

Hace un año

El proyecto lo estoy haciendo en Junio de 2025 con React Native y Typescript, ya incluye expo.

Ya tiene carpetas definidas, y no necesitas instalar otras librerías para las rutas. Las rutas están en la carpeta App.

Las nuevas pestañas están dentro de la carpeta App/(tabs), todo estos componentes los tienen que hacer con export default (con la configuración que ya tiene React native).

Y para hacer el navegador al inferior de la pantalla que se muestra en la clase, tienen que editar el archivo App/(tabs)/_layout.tsx

Les dejo mi repo en la ruta app:

Samuel Miranda Martínez

Se puede utilizar jsx en vez de js?

Agustín Navarro Galdon

Profesor

Si, seria lo mismo.

este curso no se puede seguir porque esta muy desactualizado solo me la paso bregando porque no aparecen los mimos comandos porque las version 5 esta descontinuada ya y si los replico falla y no puede ejecutar yarn android no se que hacer

Luis Magallanes

SafeAreaView no me hizo falta al estar usando Android ya que se alineaba solo.. a tener en cuenta " Actualmente solo es aplicable a dispositivos iOS con iOS versión 11 o posterior" es lo que dice la Documentacion Oficial . Aclaro para las pruebas uso mi dispositivo Android, por eso me resultaba curioso que se aplicara esto solo.

Fernanda Simith Chávez Hinojosa

me funciona igual de bien sin el SafeAreaView en android 10 :)

Roger Fernandes

Hola hay alguna alternativa a Xcode para Windows ?

Raphael Bravo

Lastimosamente no, necesitaras una Mac si deseas correrlo en iOS. Puedes probar con Hackintosh, pero depende mucho de los recursos de tu pc.

soy el unico que le aparece que la version 5 esta descontinuada ?

Horus Sinhue Camacho Avila

Increíble que en la documentación claramente dice que ya esta deprecado el navigation 5.x y no lo haya hecho con la versión 6 que claramente debe tener muchos updates...

Angel Landkoer

Dos puntos:

Si gustan tambien pueden usar la desestructuración, en vez de utilizar el variable Tab, solo abre llaves { Screen, Navigator } = createNativeStackNavigator().
si instalaste con create-expo-app, puede usar los icons instalados por defecto de expo. https://docs.expo.dev/guides/icons/ - https://icons.expo.fyi/

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

Configuración de React Navigation

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon