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

Crear un eficiente sistema de navegación en React Native es fundamental para ofrecer a los usuarios una experiencia fluida e intuitiva al desplazarse por distintas pantallas o screens. React Navigation es una biblioteca que permite configurar fácilmente diferentes tipos de navegación, como navegación tipo pestaña (tab navigation) y navegación lateral mediante menús tipo drawer navigation. Con un sencillo procedimiento de instalación y configuración, esta clase muestra cómo integrar estos elementos en una aplicación.

¿Qué es React Navigation y cómo funciona?

React Navigation es una biblioteca clave en React Native que facilita la implementación de distintos métodos de navegación entre pantallas. Gracias a esta herramienta, se pueden crear múltiples páginas o screens y desplazarse cómodamente entre ellas. Las principales modalidades de navegación contempladas son:

• Tab Navigation: permite situar un menú en la parte inferior para cambiar rápidamente entre pantallas.
• Drawer Navigation: un menú desplegable lateral que ofrece acceso directo a diversas secciones o pantallas.
• Stack Navigation: organiza pantallas relacionadas en pilas o grupos, facilitando mantener estructuradas áreas del proyecto como sesiones o cuentas de usuario.

¿Cómo instalar correctamente React Navigation en React Native con Expo?

La instalación y configuración inicial de React Navigation versión 5, especialmente indicada para evitar inconvenientes en proyectos que no utilizan TypeScript, es bastante sencilla. Los pasos clave resumidos son:

1. Ir a la página oficial navigation.org, seleccionar la versión 5.x y acceder a Get Started.
2. Instalar los paquetes básicos mediante Expo, copiando el comando provisto por la documentación:

expo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

1. Añadir al archivo App.js la importación básica solicitada en la documentación oficial:

import 'react-native-gesture-handler';

¿Qué instalaciones adicionales requiere React Navigation?

Para sacar el máximo provecho a Reactive Navigation, es necesario instalar paquetes específicos para cada tipo de navegación:

• Stack Navigation: Maneja la navegación a través de apilado o pilas de pantallas relacionadas. bash yarn add @react-navigation/stack
• Tab Navigation: Gestiona la navegación por pestañas situadas generalmente en la parte inferior de la aplicación. bash yarn add @react-navigation/bottom-tabs
• Drawer Navigation: Para habilitar un menú desplegable lateral. bash yarn add @react-navigation/drawer

Estas instalaciones proporcionan las funcionalidades necesarias para cada tipo específico de navegación en aplicaciones React Native.

¿Cómo terminar la configuración inicial para usar navegación?

Resulta indispensable envolver la aplicación completa con el NavigationContainer. Este elemento permite que toda la aplicación acceda plenamente a los métodos, propiedades y hooks proporcionados por React Navigation. El procedimiento consiste en:

• Importar el contenedor en App.js:

import { NavigationContainer } from '@react-navigation/native';

• Encapsular toda la aplicación:

export default function App() {
  return (
    <NavigationContainer>
      {/* Tu aplicación va aquí */}
    </NavigationContainer>
  );
}

Este paso permite que React Navigation tome control sobre la navegación de la aplicación desde el primer renderizado.

Después de realizar todas las instalaciones y configuraciones mencionadas, se recomienda verificar que la aplicación corra sin errores ejecutando el servidor con:

expo start

Presiona la tecla correspondiente para comprobar en los emuladores de iOS y Android.

¿Has probado ya integrar React Navigation? ¿Hay algún detalle que te gustaría profundizar? ¡Comparte tu experiencia o dudas en los comentarios!