Drawer Navigation en React Native

Contenido del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:41

Drawer Navigation en React Native

Curso de Introducción a React Native

Clase 16 de 16

Clase 16 / 16

Comentarios (40)40 comentarios

Raycris Maldonado

Luciano Cavallo

Eliezer Mas Y Rubi

José Luis Lemos

Cristhian Camilo Suarez Vanegas

Hace 5 años

Luciana Durand

Hace 5 años

Paúl Terán

Hace 5 años

Luis Fernando Pedroza Taborda

Hace 5 años

Andrés Felipe Eslava Zuluaga

Hace 4 años

Lucia Dias

Hace 4 años

Jairo Rafael Chacón Córdova

Hace 4 años

David Rodriguez

Hace 5 años

Raycris Maldonado

Hace 5 años

Luis Fernando Pedroza Taborda

Hace 5 años

Jorge Bou-saad

Hace 4 años

Nicolas Betancur Pavas

Hace 4 años

Eliezer Mas Y Rubi

Hace 5 años

Laura Natalia Castro Villanueva

Hace 3 años

Juan José Sanchez choquecallata

Hace 4 años

Alejandro Mejia Escobar

Hace 4 años

David Antonio Garcia Saaib

Hace 4 años

Karliana Suarez

Hace 5 años

Fabrizio André Angulo Arce

Hace 5 años

Kevin Acevedo

Hace 5 años

Santiago Perea Murillo

Hace un año

JOHN JAIRO SOTO PERLAZA

Hace un año

Felipe Castañeda Caicedo

Josue David

Nicolas Valdez

Jaime Bustamante

Agustín Navarro Galdon

Profesor

Minería Datos

Adrian Diaz

Kevin Parra Lopez

Recursos

Aprender a crear un Drawer Navigation en React Native permite organizar de manera eficiente la navegación entre pantallas en aplicaciones móviles. Esta funcionalidad muestra un menú lateral desde el cual el usuario puede seleccionar el destino deseado fácilmente, optimizando así la experiencia del usuario.

¿Qué es Drawer Navigation en React Native?

El Drawer Navigation es un tipo de menú que aparece desde un lateral del dispositivo móvil, facilitando la accesibilidad a diferentes pantallas o screens. Es especialmente útil en aplicaciones móviles donde se requiera una navegación fluida entre múltiples vistas.

¿Cómo configurar un Drawer Navigation paso a paso?

Para realizar esta configuración, sigue estos sencillos pasos:

Crear un archivo para Drawer Navigation

Es necesario crear un nuevo fichero denominado navigationDrawer.js dentro de la carpeta de navegación:

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from '../screens/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Drawer = createDrawerNavigator();

export default function NavigationDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

Integrar el Drawer Navigation en App.js

Una vez creado el fichero anterior, debes integrarlo en tu componente principal:

import NavigationDrawer from './src/navigation/navigationDrawer';

export default function App() {
  return <NavigationDrawer />;
}

Ventajas prácticas del Drawer Navigation

Utilizar este tipo de navegación trae consigo beneficios, tales como:

Fácil acceso a las distintas pantallas desde cualquier lugar de la aplicación.
Mejor organización del contenido visual.
Mayor comodidad para los usuarios al desplazarse entre páginas.

Además, el Drawer Navigation permite opciones avanzadas como incorporar botones personalizados para abrir el menú y diversas configuraciones adicionales.

Te invito a probar esta configuración por ti mismo y explorar más funcionalidades avanzadas que optimizarán aún más tus aplicaciones en React Native. ¿Te gustaría implementar esta característica en algún proyecto específico? ¡Compártelo en los comentarios!

Para solucionar el problema con el Drawer debemos de hacer lo siguiente:

Añadir la siguiente linea en el archivo de babel.config.js plugins: ['react-native-reanimated/plugin']
y luego correr el siguiente comando para borrar el cache de la app: expo r -c

La informacion la saque de este foro de Github: https://github.com/software-mansion/react-native-reanimated/issues/2793

Muy buen aporte!, funciona bien de esta manera! 👍

Perfecto, me funciono. muchas gracias amigo!

La forma de solucionar el error del Drawer es la siguiente:

ejecutar la línea de comando: "expo install react-native-reanimated". Con esto vas a tener el recurso para utilizar el plugin en la configuración de babel.
En el archivo "babel.config.js":
- Agregar la línea de código: "plugins: [‘react-native-reanimated/plugin’]", seguido del atributo "presets"
Por último, con la instalación del recurso de react y la configuración del plugin en babel hecha:
- Ejecutar la línea de comando: "expo start --clear".
- Una vez que el servidor está corriendo, entrar a localhost:19002, eso te llevará a la página del servidor local.
- Entrar desde el celular a la aplicación Expo Go y tomar la captura del código QR de la página.

Listo!! Siguiendo estos pasos lo solucioné, también me basé en los comentarios/aportes hechos anteriormente por otros usuarios.

Gracias Jose, de igual manera lo solucioné con esos pasos.

Excelente aporte, bien explicado y detallado, pude solucionarlo!

Hola devs! Por aquí les dejo una pequeña práctica que hice con RN CLI y todos los tiposde navegación que ofrece React Navigation.

En esta aplicación podrán encontrar un CustomDrawerNavigator, BottomTabNavigator, TopTabNavigator y el Stack (en este hay cosas por pulir).

Repo:

react-native-navigations

Muchas gracias por ese gran aporte.

Muchas gracias, Paúl

Para arreglar el error con Drawer primero:

expo install react-native-reanimated
Añadir esta línea al archivo babel.config.js: plugins: ['react-native-reanimated/plugin'],
Limpiar cache: expo start --clear

Instrucciones en: https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

Actualización para arreglar el error con Drawer:

npx expo install react-native-reanimated
Añadir en archivo "babel.config.js" (despues de presets): plugins: ['react-native-reanimated/plugin'],
Limpiar cache con comando: npx expo start --clear

Link:

si, les llega a generar un error con el Drawer. a añadan lo siguiente ( plugins: ['react-native-reanimated/plugin'] ) en el objeto que retorna el archivo babel.config.js

Me aparece el error pero no me soluciona con eso que dices

Tambien me paso lo mismo pero no me basto con solo agregar esa linea en ese archivo, antes me toco ejecutar este comando "expo install react-native-gesture-handler react-native-reanimated" en mi caso que utlice Expo, luego agregue esa linea que dices y despues pare el servidor y ejecute "expo start --clear", con eso me corrigio el error.

No le dare 5 estrellas al curso porque siento que se pudo haber aprovechado mas porque al final se puso muy interesante. Se perdio mucho tiempo explicando sobre los props y cosas de react. Del resto todo bien, la explicacion fue muy buena.

Excelente Curso, aunque algunos errores de compatibilidad pero nada que una buena leída a la documentación no arregle

Esta son Mis notas del curso espero les sirva.

Hoy 11 de febrero del 2024 no funcionó la solución que ofrecen los compañeros en los anteriores comentarios, pero despues de mucho intentar se logró, forzando la actualización del NavigationDrawer a la versión 6 con npm install @react-navigation/drawer@6 --force o a la versión que este al momento de leer este mensaje.

Tengo un error con el drawer :

Error: Requiring module "src\navigation\NavigationDrawer.js", which threw an exception: Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Yo igual. ¿Alguien logró solucionarlo?

No sera que estas usando la version 6? si es asi, verifica la guia de instalacion

con solo escribir imr tienen el import React from "react" :)

Gracias :))

Que grande este profe. Nunca lo habia visto aca en platzi, es el primer curso que veo y tomo de el, pero que grande es. Buenisimo para transmitir conocimiento.

Me gusto mucho este curso, espero puedan realizar uno más avanzado con versiones más actuales del año 2025.

Te comento que ya lo hicieron hace 3 dias!

https://platzi.com/cursos/fundamentos-react-native/

Failed to initialize

Ya hice todo lo que dice la documentacion, tambien instale todo lo que pide, agregue el plugin al babel.json y no me funciono. En teoria no tengo errores, pero no entiendo que esta pasando y por que no funciona. Alguien podria decirme que puede ser lo que me esta faltando, ya que revise el codigo y esta igual al del profe.

A mi me pasa lo mismo, se crashea

Si los navigations son componentes, puedo usar un Navigation como component de un Screen de otro Navigation?

Claro.

2/11/2024. Para las personas que tenga el error ReanimatedError: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.16.1 vs 3.10.0). Simplemente debe diregisrse a su archivo package.json y cambiar la version de react-native-reanimated por 3.10.0.

Configuracion a dia de hoy para que funcione el Drawer.

babel.config.js

module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'] }; }; module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'] }; };

Luego Limpiar el Caché

yarn start --reset-cache

Con esto lo solucione

npx expo start --clear

Configuración del entorno de desarrollo

Desarrollo de Apps Móviles con React Native y Expo

Instalación de Visual Studio Code para React Native

Configuración de Visual Studio Code para React Native

Instalación de Node JS y creación de proyectos React Native con Expo

Instalación del emulador de Xcode para aplicaciones iOS

Instalación de Android Studio y creación de emulador

Ejecutar aplicaciones React Native en dispositivos físicos con Expo Go

Primeros pasos con React Native

Estructura de un proyecto React Native con Expo

Creación de componentes de React Native con Expo

Props en React Native: envío de datos entre componentes

Asignación de default props en componentes React

Validación de Props con PropTypes en React

React Navigation

Instalación de React Navigation versión 5 en React Native con Expo

Cómo crear un stack de navegación en React Native

Creación de menú de pestañas en React Navigation

Drawer Navigation en React Native

Drawer Navigation en React Native

Progreso del curso

Configuración del entorno de desarrollo

Primeros pasos con React Native

React Navigation

Recursos

Recursos