Cómo Personalizar y Configurar un Bottom Tab Navigator en React Navigation

En este artículo, aprenderemos cómo configurar un Bottom Tab Navigator en React Navigation y, además, personalizaremos su diseño para que se ajuste a nuestras necesidades. Vamos a desglosar cada paso, desde la instalación inicial hasta la personalización de los estilos y funcionalidades.

Configuración Inicial del Bottom Tab Navigator

1. Instalación del paquete necesario

Primero, necesitamos instalar el paquete específico para usar navegadores con pestañas en React Navigation. Ejecuta el siguiente comando en tu terminal:

npm install @react-navigation/bottom-tabs

Este paquete nos permite crear navegadores con pestañas en la parte inferior de nuestra aplicación.

2. Crear el archivo del navegador

Navega a la carpeta de rutas (src > presentation > routes) y crea un archivo llamado BottomTabNavigation.tsx con el siguiente contenido:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Tab1Screen } from '../screens/tabs/Tab1Screen';
import { Tab2Screen } from '../screens/tabs/Tab2Screen';
import { Tab3Screen } from '../screens/tabs/Tab3Screen';

const Tab = createBottomTabNavigator();

export const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Tab1Screen} />
      <Tab.Screen name="Tab2" component={Tab2Screen} />
      <Tab.Screen name="Tab3" component={Tab3Screen} />
    </Tab.Navigator>
  );
};

En este código:

  • Tab.Navigator: Es el contenedor principal para las pestañas.
  • Tab.Screen: Define cada pantalla asociada a una pestaña.

SideMenuNavigation debe qudar asi para usar BottomTabNavigator:

import React from 'react';
import { DrawerContentComponentProps, DrawerContentScrollView, DrawerItemList, createDrawerNavigator } from '@react-navigation/drawer';
import { ProfileScreen } from '../screens/profile/ProfileScreen';
import { View, useWindowDimensions } from 'react-native';
import { BottomTabNavigator } from './BottomTabNavigator';

const Drawer = createDrawerNavigator();
const CustomDrawerContent = (props: DrawerContentComponentProps) => {
  return (
    <DrawerContentScrollView>
      <View style={{
        height: 200,
        backgroundColor: '#000',
        margin: 30,
        borderRadius: 50,
      }} />
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
};
export const SideMenuNavigator = () => {
  const dimensions = useWindowDimensions();
  return (
    <Drawer.Navigator
      drawerContent={props => <CustomDrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerType: dimensions.width >= 758 ? 'permanent' : 'slide',
        drawerActiveBackgroundColor: 'pink',
        drawerActiveTintColor: 'black',
        drawerInactiveTintColor: 'red',
        drawerItemStyle: {
          borderRadius: 100,
          paddingHorizontal: 20,
        },
      }}
    >
      <Drawer.Screen name="Tabs" component={BottomTabNavigator} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
};

3. Probar el navegador

Si ya tienes tu configuración básica de navegación en React Navigation, puedes importar y usar BottomTabNavigator en tu componente principal. Si no lo has hecho, consulta la documentación oficial para configurar React Navigation correctamente.

Personalización del Bottom Tab Navigator

1. Personalizando el diseño general

Podemos agregar opciones globales para personalizar el diseño general del navegador. Actualizamos el código de BottomTabNavigation.tsx con la propiedad screenOptions:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Tab1Screen } from '../screens/tabs/Tab1Screen';
import { Tab2Screen } from '../screens/tabs/Tab2Screen';
import { Tab3Screen } from '../screens/tabs/Tab3Screen';
import { Text } from 'react-native-paper';

const Tab = createBottomTabNavigator();

export const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true, // Muestra el encabezado en cada pantalla.
        headerStyle: {
          elevation: 0, // Elimina la sombra del encabezado en Android.
          shadowColor: 'transparent', // Elimina la sombra del encabezado en iOS.
        },
        tabBarStyle: {
          borderTopWidth: 0, // Elimina la línea superior de la barra de pestañas.
          elevation: 0, // Elimina la sombra de la barra en Android.
        },
      }}
    >
      <Tab.Screen 
        name="Tab1" 
        options={{
          title: 'Tab1', 
          tabBarIcon: ({ color }) => (<Text style={{ color }}>Tab11</Text>),
        }} 
        component={Tab1Screen} 
      />
      <Tab.Screen 
        name="Tab2" 
        options={{
          title: 'Tab2', 
          tabBarIcon: ({ color }) => (<Text style={{ color }}>Tab22</Text>),
        }} 
        component={Tab2Screen} 
      />
      <Tab.Screen 
        name="Tab3" 
        options={{
          title: 'Tab3', 
          tabBarIcon: ({ color }) => (<Text style={{ color }}>Tab33</Text>),
        }} 
        component={Tab3Screen} 
      />
    </Tab.Navigator>
  );
};

Cambios importantes:

  1. headerStyle:

    • elevation: 0: Elimina la sombra en el encabezado (Android).
    • shadowColor: 'transparent': Elimina la sombra (iOS).

  2. tabBarStyle:

    • borderTopWidth: 0: Elimina la línea superior de la barra de pestañas.
    • elevation: 0: Elimina la sombra de la barra de pestañas.

  3. tabBarIcon:

    • Permite personalizar los iconos de cada pestaña. En este caso, usamos el componente Text para mostrar texto con color dinámico basado en la pestaña seleccionada.

2. Personalizando los títulos y estilos de las pestañas

Podemos configurar opciones individuales para cada pestaña utilizando la propiedad options en cada Tab.Screen. Estas opciones incluyen:

  • title: Cambia el título que aparece en la barra superior.
  • tabBarIcon: Permite agregar un icono o texto personalizado en la barra de pestañas.

Ejemplo:

<Tab.Screen 
  name="Tab1" 
  options={{
    title: 'Inicio', 
    tabBarIcon: ({ color }) => (<Text style={{ color }}>Inicio</Text>),
  }} 
  component={Tab1Screen} 
/>

3. Eliminando líneas y sombras no deseadas

En algunos casos, las líneas o sombras predeterminadas en las barras pueden no coincidir con el diseño de nuestra aplicación. Para resolver esto:

  1. Encabezado (headerStyle):

    • Configura elevation (Android) o shadowColor (iOS) a 0 o 'transparent'.

  2. Barra de pestañas (tabBarStyle):

    • Configura borderTopWidth: 0 para eliminar la línea superior.
    • Configura elevation: 0 y shadowColor: 'transparent' para eliminar sombras.

4. Agregar colores dinámicos a los textos/iconos

Podemos personalizar el color del texto o icono de las pestañas basándonos en si están activas o no. Esto se logra utilizando las propiedades que nos proporciona React Navigation en tabBarIcon.

Ejemplo:

tabBarIcon: ({ color }) => (<Text style={{ color }}>Tab11</Text>)