Cómo Implementar un Top Tab Navigator con React Navigation

En esta guía, aprenderás a configurar un Top Tab Navigator utilizando React Navigation en tu proyecto de React Native. Este tipo de navegación es ideal para mostrar pestañas en la parte superior de la pantalla.

Paso 1: Instalación de Dependencias

Primero, necesitas instalar los paquetes necesarios para usar el Material Top Tab Navigator y el soporte para paginación.

1. Instala el paquete de las pestañas superiores:

   npm install @react-navigation/material-top-tabs
   

2. Instala el paquete para la paginación:

   npm install react-native-pager-view
   

Paso 2: Creando el Top Tab Navigator

A continuación, crea un nuevo componente llamado TopBarNavigation para configurar el Material Top Tab Navigator. En este ejemplo, incluiremos dos pestañas:

• Una pestaña que utiliza un StackNavigator.
• Una pestaña que apunta a la pantalla ProfileScreen.

El código del TopBarNavigation es el siguiente:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { StackNavigator } from './StackNavigator';
import { ProfileScreen } from '../screens/profile/ProfileScreen';

const Tab = createMaterialTopTabNavigator();

export const TopBarNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="stack" component={StackNavigator} />
      <Tab.Screen name="profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

¿Qué hace este código?

• createMaterialTopTabNavigator: Crea un navegador de pestañas superiores.
• Tab.Navigator: Es el contenedor principal de las pestañas.
• Tab.Screen: Define las pantallas individuales para cada pestaña. En este caso, usamos el StackNavigator y ProfileScreen.

Paso 3: Configurando el Stack Navigator

El StackNavigator se utiliza para manejar múltiples pantallas de navegación jerárquica. Aquí está la configuración del StackNavigator:

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

export type RootStackParams = {
  Home: undefined;
  Products: undefined;
  Product: { id: number; name: string };
  Settings: undefined;
};

const Stack = createStackNavigator<RootStackParams>();

export const StackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: true,
        headerStyle: {
          elevation: 0,
          shadowColor: 'transparent',
        },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Products" component={ProductsScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
      <Stack.Screen name="Product" component={ProductScreen} />
    </Stack.Navigator>
  );
};

¿Qué hace este código?

1. RootStackParams: Define los parámetros que se pueden pasar a las pantallas dentro del StackNavigator.
2. Pantallas del Stack:
   • HomeScreen
   • ProductsScreen
   • SettingsScreen
   • ProductScreen, que recibe parámetros como { id: number, name: string }.
3. screenOptions: Personaliza el encabezado del navegador, ocultando sombras o elevación.

Paso 4: Integra el Top Tab Navigator en tu Proyecto

Ahora que tienes configurado tanto el TopBarNavigation como el StackNavigator, asegúrate de incluir el TopBarNavigation en tu estructura de navegación principal (por ejemplo, en el App.js o Navigation.js).

Documentación Oficial

Para obtener más información sobre el Material Top Tab Navigator, puedes visitar la documentación oficial de React Navigation.