Creación de menú de pestañas en React Navigation

Aprender cómo crear un menú de pestañas o tab menú en aplicaciones React es esencial para ofrecer una navegación intuitiva y fácilmente accesible a los usuarios. Utilizando React Navigation, podrás incluir un menú ubicado en la parte inferior para moverte fácilmente entre diferentes pantallas de tu app.

¿Cómo preparar el proyecto para la navegación por pestañas?

Primero, accede a tu carpeta SRC y crea un nuevo archivo dentro de la carpeta navigation llamado tab.js. En este archivo, debes importar React y la función específica que genera esta navegación, importando desde @react-navigation/bottom-tabs. Utilizarás la siguiente estructura:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

Luego, defines la navegación con una constante:

const Tab = createBottomTabNavigator();

¿Cómo establecer pantallas dentro del menú inferior?

Dentro del componente exportado, llamado por ejemplo NavigationTab, especificas las pantallas que este menú desplegará:

export default function NavigationTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="home" component={HomeScreen} />
      <Tab.Screen name="settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Recuerda importar previamente los componentes HomeScreen y SettingsScreen desde tu carpeta de pantallas (screens).

¿De qué manera integrar esta navegación con la aplicación?

Para utilizar esta nueva navegación en tu aplicación, modifica el archivo app.js. Debes importar el componente NavigationTab, reemplazando la navegación que tengas definida previamente por esta nueva configuración:

import NavigationTab from './src/navigation/tab';

export default function App() {
  return (
    <NavigationTab />
  );
}

Cuando ejecutes tu app, verás un menú ubicado en la parte inferior que te permitirá cambiar la vista entre "Home" y "Settings", simplificando tu interacción y mejorando la experiencia visual.

¿Cómo solucionar problemas visuales comunes?

Si notas un desplazamiento o que los textos no quedan visibles adecuadamente, una pronta solución es utilizar SafeAreaView. Esto permitirá aprovechar de mejor manera el espacio en distintos dispositivos móviles, evitando situaciones incómodas como que tu texto quede oculto por los elementos de interfaz del teléfono.

La implementación es muy sencilla, cambia la vista (View) por:

import { SafeAreaView } from 'react-native';

export default function HomeScreen() {
  return (
    <SafeAreaView>
      {/* tu contenido aquí */}
    </SafeAreaView>
  );
}

Al realizar estos ajustes, mejorarás significativamente la visualización del contenido en diferentes modelos de teléfonos.

Te animamos a probar esta configuración en tu próximo proyecto o comentar cualquier inquietud o sugerencia sobre otras configuraciones de navegación que te gustaría explorar.