Cómo agregar un Menú Hamburguesa a las pantallas del Tab Navigator en React Native

En este artículo, aprenderás cómo implementar un menú hamburguesa en las pantallas del Tab Navigator utilizando React Navigation. Nos basaremos en el componente HamburguerMenu previamente creado, el cual se encuentra en src/presentation/components/shared. También configuraremos cada pantalla (Tab1Screen, Tab2Screen y Tab3Screen) para mostrar el menú hamburguesa.

Paso 1: Entendiendo el componente HamburguerMenu

El componente HamburguerMenu utiliza useNavigation y DrawerActions de React Navigation para manejar la apertura y cierre del menú lateral (drawer). Este componente actualiza la configuración del encabezado (headerLeft) para agregar un botón de menú.

import React, { useEffect } from 'react';
import { Pressable } from 'react-native';
import { Text } from 'react-native-paper';

import { DrawerActions, useNavigation } from '@react-navigation/native';

export const HamburguerMenu = () => {
  const navigation = useNavigation();

  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <Pressable onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
          <Text>Menu</Text>
        </Pressable>
      ),
    });
  });

  return <></>;
};

¿Qué hace este código?

1. useNavigation: Permite acceder al objeto de navegación de React Navigation.
2. navigation.setOptions: Configura las opciones del encabezado para incluir un botón personalizado (el menú hamburguesa).
3. DrawerActions.toggleDrawer: Alterna entre abrir y cerrar el drawer.

El botón del menú está representado por un simple componente de texto <Text>Menu</Text>.

Paso 2: Configurando Tab1Screen

En la pantalla Tab1Screen, solo necesitamos importar y usar el componente HamburguerMenu dentro del componente principal.

import React from 'react';
import { View } from 'react-native';
import { Text } from 'react-native-paper';
import { HamburguerMenu } from '../../components/shared/HamburguerMenu';

export const Tab1Screen = () => {
  return (
    <View>
      <HamburguerMenu />
      <Text>Tab1Screen</Text>
    </View>
  );
};

Paso 3: Replicando la configuración en Tab2Screen y Tab3Screen

Para las demás pantallas (Tab2Screen y Tab3Screen), el proceso es exactamente el mismo. Solo necesitas importar y agregar el componente HamburguerMenu. Aquí tienes los códigos para ambas pantallas:

Tab2Screen

import React from 'react';
import { View } from 'react-native';
import { Text } from 'react-native-paper';
import { HamburguerMenu } from '../../components/shared/HamburguerMenu';

export const Tab2Screen = () => {
  return (
    <View>
      <HamburguerMenu />
      <Text>Tab2Screen</Text>
    </View>
  );
};

Tab3Screen

import React from 'react';
import { View } from 'react-native';
import { Text } from 'react-native-paper';
import { HamburguerMenu } from '../../components/shared/HamburguerMenu';

export const Tab3Screen = () => {
  return (
    <View>
      <HamburguerMenu />
      <Text>Tab3Screen</Text>
    </View>
  );
};

Paso 4: Verifica la navegación y el menú hamburguesa

Cuando ejecutes la aplicación y navegues a cualquiera de las pantallas (Tab1Screen, Tab2Screen, Tab3Screen), deberías ver el botón de menú en la esquina izquierda del encabezado. Al presionarlo, se abrirá o cerrará el drawer.