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”;
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
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
14 Días
7 Hrs
8 Min
57 Seg
Configuración de React Navigation
2/17Recursos
Aportes 24
Preguntas 8
Ordenar por:
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
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”;
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, ❤️ si les gustó mi aporte
yarn add react-native-vector-icons
npm i react-native-vector-icons
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.
Tienen que actualizar los cursos con la version x6 , porfavor.
Que triste que los únicos cursos de React Native en todo Platzi estén tan desactualizados.
Hola! yo use estos comandos en 2024-06-02:
```js
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"
No es por nada pero, lo haces ser sencillo!
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.
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…
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: <https://blog.expo.dev/the>
-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: <https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.> │
│ │
│ 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 (
```
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
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/
@AugustinNavarro en el examen aparece una pregunta referente sobre un DrawerNavigation y en ninguno de los videos del curso que escuche con plena atencion y seguí de izquierda a derecha lo mencionas, podrias quitar esa pregunta o explicar a que hace referencia el DrawerNavigation
En esta ocasión les comento: realice la instalación con la versión 6, estoy utilizando npm, ya que al instalar el yarn en forma global, me genero dificultades, no se me presento dificultad con el SafeAreaView, como no soy ingenieor de sistemas, me logre asesorar del ingeniero Andres Rojas, el cual me da mucho soprte técnico. Finalmente al terminar de instalar todos los paquetes, aplique npx expo-doctor, para que corrigiera algunos conflictos. y también me apoyo en ChatGPT (el curso de platzi es bueno), version 2021
Reciclando la app anterior
me encanta este curso
Me voy por la versión 6.
para poder usar el cel, desde la aplicacion de expo es necesario crear el proyecto con la version 6 de react navigataion para no tener ningun problema: https://reactnavigation.org/docs/getting-started/
Me encanta.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?