Configuración de React Navigation

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

Lucas Durán

student•

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

student•

Gracias, funciona

Luis Fernando Pedroza Taborda

student•

Excelente aporte, funciono perfectamente.

José Gregorio Estrada Meneses

student•

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

student•

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

Diego Aurelio Landa Torres

student•

sí

Wilson Fabian Pérez Sucuzhañay

student•

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

student•

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

student•

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

David Donneys

student•

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

Yessica Rios

student•

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

Luis Fernando Pedroza Taborda

student•

Buen dato, gracias.

Andres Ramirez Restrepo

student•

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

student•

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

Joseph Peña Quino

student•

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

student•

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

Yosnier Macuare

student•

No es por nada pero, lo haces ser sencillo!

Luis Fernando Pedroza Taborda

student•

Pienso lo mismo.

David Rangel

student•

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

student•

Se puede utilizar jsx en vez de js?

Agustín Navarro Galdon

teacher•

Si, seria lo mismo.

Jhonntan Andres Castaño Rojas

student•

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

Jhonntan Andres Castaño Rojas

student•

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 (

Luis Magallanes

student•

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

student•

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

Roger Fernandes

student•

Hola hay alguna alternativa a Xcode para Windows ?

Raphael Bravo

student•

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

Jhonntan Andres Castaño Rojas

student•

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

Horus Sinhue Camacho Avila

student•

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

student•

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/

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

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"

Configuración de React Navigation

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