Guía Completa: Navegación en React Native con React Navigation

Documentacion oficial

En este artículo, exploraremos cómo implementar la navegación en React Native utilizando el paquete React Navigation. Además, explicaremos los cuatro tipos principales de navegación disponibles y cómo configurar tu proyecto para Android. También usaremos la estructura de proyecto mostrada en la imagen para mantener el código organizado.

¿Qué es React Navigation?

React Navigation es una biblioteca de navegación popular para React Native. Proporciona una manera intuitiva y flexible de implementar navegación en tus aplicaciones móviles. Permite crear experiencias de usuario complejas mediante diferentes estilos de navegación, como pilas, cajones y pestañas.

Tipos de Navegación en React Navigation

1. Stack Navigation

   • Modelo de navegación basado en pilas (stack).
   • Ideal para mover entre pantallas en forma secuencial, como “pila de páginas”.
   • Los componentes se apilan y puedes volver atrás fácilmente.
   • Ejemplo de uso:

     import { createStackNavigator } from '@react-navigation/stack';
     
     const Stack = createStackNavigator();
     
     function AppStack() {
       return (
         <Stack.Navigator>
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Profile" component={ProfileScreen} />
         </Stack.Navigator>
       );
     }
     

2. Drawer Navigation

   • Crea un menú deslizable desde el lado izquierdo o derecho de la pantalla.
   • Ideal para aplicaciones con varias secciones principales.
   • Ejemplo de uso:

     import { createDrawerNavigator } from '@react-navigation/drawer';
     
     const Drawer = createDrawerNavigator();
     
     function AppDrawer() {
       return (
         <Drawer.Navigator>
           <Drawer.Screen name="Home" component={HomeScreen} />
           <Drawer.Screen name="Settings" component={SettingsScreen} />
         </Drawer.Navigator>
       );
     }
     

3. Bottom Tab Navigation

   • Navegación mediante pestañas en la parte inferior de la pantalla.
   • Usado comúnmente en aplicaciones con características principales que necesitan acceso rápido.
   • Ejemplo de uso:

     import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
     
     const Tab = createBottomTabNavigator();
     
     function AppTabs() {
       return (
         <Tab.Navigator>
           <Tab.Screen name="Home" component={HomeScreen} />
           <Tab.Screen name="Profile" component={ProfileScreen} />
         </Tab.Navigator>
       );
     }
     

4. Material Top Tab Navigation

   • Pestañas ubicadas en la parte superior de la pantalla.
   • Ideal para mostrar contenido categorizado dentro de una misma pantalla.
   • Ejemplo de uso:

     import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
     
     const Tab = createMaterialTopTabNavigator();
     
     function AppTopTabs() {
       return (
         <Tab.Navigator>
           <Tab.Screen name="Home" component={HomeScreen} />
           <Tab.Screen name="Profile" component={ProfileScreen} />
         </Tab.Navigator>
       );
     }
     

Configuración de React Navigation para Android

1. Instalación de Dependencias

Ejecuta los siguientes comandos para instalar las dependencias necesarias:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons @react-native-masked-view/masked-view

2. Configuración Adicional para Android

El paquete react-native-screens requiere una configuración adicional para funcionar correctamente en dispositivos Android.

1. Abre el archivo MainActivity.kt o MainActivity.java ubicado en android/app/src/main/java/<nombre de tu paquete>/.
2. Agrega el siguiente código dentro de la clase MainActivity:

import android.os.Bundle;

class MainActivity : ReactActivity {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
}

Esto asegura que la biblioteca maneje correctamente los ciclos de vida en Android.

3. Reinicia la Aplicación

Después de realizar los cambios, reinicia la aplicación para que React Native tome la configuración. Usa los siguientes comandos:

npm run android

Implementación en App.tsx

Asegúrate de estructurar tu archivo App.tsx de la siguiente manera, utilizando NavigationContainer para envolver tus componentes de navegación:

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { HomeScreen } from './presentation/screens/home/HomeScreen';

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

Estructura del Proyecto

Tu proyecto debe seguir una estructura organizada, como se muestra en la imagen:

src/
├── presentation/
│   ├── components/
│   ├── routes/
│   ├── screens/
│   │   ├── about/
│   │   ├── home/
│   │   ├── products/
│   │   ├── profile/
│   │   │   └── ProfileScreen.tsx
│   │   ├── settings/
│   │   └── tabs/
│   └── theme/
│       └── theme.ts
├── App.tsx

Conclusión

React Navigation es una herramienta poderosa para manejar la navegación en aplicaciones React Native. Con soporte para múltiples estilos de navegación y una configuración flexible, puedes crear aplicaciones con experiencias de usuario fluidas. Siguiendo esta guía, tendrás una base sólida para comenzar a implementar navegación en tu proyecto.