Configuración de React Navigation

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”;

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”;

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

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

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

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.

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.

React Navigation V5.x

@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

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/

Reciclando la app anterior

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…

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.