Cómo Configurar Stack Navigation en React Native con React Navigation

Si estás desarrollando una aplicación en React Native y necesitas implementar navegación entre pantallas, React Navigation es tu mejor aliado. Este artículo te guiará paso a paso para configurar Stack Navigation, permitiéndote moverte entre diferentes vistas dentro de tu aplicación.

¿Qué es Stack Navigation?

Stack Navigation es un tipo de navegación que organiza las pantallas de tu aplicación en una estructura de “pila” (stack). Cada pantalla nueva se coloca encima de la anterior, y puedes regresar a la pantalla previa con un simple gesto o acción.

Por ejemplo:

1. Inicias en la pantalla Home.
2. Navegas a la pantalla Products.
3. Desde Products, puedes volver fácilmente a Home utilizando el botón de retroceso.

Ahora que sabes qué es, ¡vamos a configurarlo!

Pasos para Configurar Stack Navigation

1. Instalar las Dependencias Necesarias

Comienza instalando los paquetes principales para usar Stack Navigation:

npm install @react-navigation/stack react-native-gesture-handler @react-native-masked-view/masked-view

• @react-navigation/stack: Maneja la lógica de navegación basada en pilas.
• react-native-gesture-handler: Permite el uso de gestos como deslizamientos y toques en las pantallas.
• @react-native-masked-view/masked-view: Necesario para animaciones de transición suaves entre pantallas.

2. Configurar gesture-handler

Para evitar errores relacionados con los gestos en React Native, sigue estos pasos:

1. Importa el gestor de gestos en App.tsx:

   Abre tu archivo App.tsx y agrega esta línea al inicio:

   import './gesture-handler';
   

2. Crea archivos de configuración para gesture-handler:

   En el mismo nivel que tu archivo App.tsx, crea dos archivos con los siguientes contenidos:

   • gesture-handler.native.js:

     import 'react-native-gesture-handler';
     

   • gesture-handler.js: Este archivo debe estar vacío.

   Esto asegura la compatibilidad de gestos tanto en Android como en iOS.

3. Crear la Navegación en el Proyecto

Dentro de tu carpeta routes, crea un archivo llamado StackNavigator.tsx y configura tus pantallas:

import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from '../screens/home/HomeScreen';
import { ProductsScreen } from '../screens/products/ProductsScreen';
import { SettingsScreen } from '../screens/settings/SettingsScreen';

const Stack = createStackNavigator();

export const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Products" component={ProductsScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
};

Aquí:

• createStackNavigator crea la estructura de la pila.
• Cada pantalla es definida con Stack.Screen, donde name es el nombre de la pantalla y component es el componente que debe renderizarse.

4. Configurar App.tsx

Actualiza tu archivo App.tsx para usar la navegación:

import './gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { StackNavigator } from './presentation/routes/StackNavigator';

export const App = () => {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
};

• NavigationContainer: Envuelve toda tu navegación para que funcione correctamente.
• StackNavigator: Llama a tu archivo de navegación configurado previamente.

5. Reiniciar la Aplicación

Después de realizar los pasos anteriores, reinicia tu aplicación para que los cambios se apliquen:

npm start

Inicia tu aplicación en un emulador o dispositivo real usando:

npm run android    # Para Android
npm run ios        # Para iOS

¿Qué Verás al Ejecutar la Aplicación?

Si todo está configurado correctamente, verás la pantalla Home con un encabezado que muestra “Home” en el top bar. En la pantalla, deberías ver un texto simple que diga “HomeScreen”.

¡Felicidades! Has configurado con éxito la navegación basada en pilas.

Organización del Proyecto

Asegúrate de mantener tu proyecto organizado. Aquí tienes un ejemplo de cómo debería verse tu estructura de carpetas:

src/
├── presentation/
│   ├── components/          # Componentes reutilizables
│   ├── routes/              # Configuración de navegación
│   │   └── StackNavigator.tsx
│   ├── screens/             # Pantallas individuales
│   │   ├── home/            # Pantalla Home
│   │   │   └── HomeScreen.tsx
│   │   ├── products/        # Pantalla Products
│   │   │   └── ProductsScreen.tsx
│   │   └── settings/        # Pantalla Settings
│   │       └── SettingsScreen.tsx
├── gesture-handler.js
├── gesture-handler.native.js
├── App.tsx                  # Entrada principal de la app

Conclusión

React Navigation y su Stack Navigator son herramientas fundamentales para la navegación en aplicaciones React Native. Este tutorial te mostró cómo configurarlas correctamente, asegurándote de que todo funcione en Android e iOS. Con esta configuración básica, puedes expandir tu proyecto y agregar más pantallas o tipos de navegación según tus necesidades.