Pestañas y Cajones

Barras de pestañas, gestos de cajón y composición de layout anidado. Tabs y Drawer de expo-router envuelven navegadores de React Navigation - los nombres de archivo bajo la carpeta de layout se convierten en destinos automáticamente.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

npx expo install expo-router
# Cajón solamente:
npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

app/
├── _layout.tsx
└── (tabs)/
    ├── _layout.tsx       → Tabs
    ├── index.tsx         → Pestaña de inicio
    ├── explore.tsx       → Pestaña de exploración
    └── orders/
        ├── _layout.tsx     → Stack anidado en pestaña de órdenes
        ├── index.tsx
        └── [id].tsx

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
 
export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#2563eb",
        headerShown: true,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Inicio",
          tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Exploración",
          tabBarIcon: ({ color, size }) => <Ionicons name="compass" size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="orders"
        options={{
          title: "Órdenes",
          headerShown: false,
          tabBarIcon: ({ color, size }) => <Ionicons name="list" size={size} color={color} />,
        }}
      />
    </Tabs>
  );
}

Cuándo usarlo:

• Tabs - 3-5 destinos pares entre los que los usuarios cambian constantemente (inicio, búsqueda, perfil)
• Drawer - 6+ secciones, layouts de tablet, o IA hamburguer-primero
• Stack anidado - una pestaña tiene flujos de profundización mientras los hermanos permanecen planos

Ejemplo funcional

Tabs con una orden de stack anidada y un shell de cajón opcional para navegación más amplia.

// app/_layout.tsx
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(drawer)" />
      <Stack.Screen name="(auth)" options={{ presentation: "modal" }} />
    </Stack>
  );
}

// app/(drawer)/_layout.tsx
import { Drawer } from "expo-router/drawer";
import { GestureHandlerRootView } from "react-native-gesture-handler";
 
export default function DrawerLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer screenOptions={{ headerShown: false }}>
        <Drawer.Screen name="(tabs)" options={{ title: "Principal" }} />
        <Drawer.Screen name="settings" options={{ title: "Configuración" }} />
      </Drawer>
    </GestureHandlerRootView>
  );
}

// app/(drawer)/(tabs)/orders/_layout.tsx
import { Stack } from "expo-router";
 
export default function OrdersStack() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Órdenes" }} />
      <Stack.Screen name="[id]" options={{ title: "Detalle de Orden" }} />
    </Stack>
  );
}

// Oculta una pantalla de la barra de pestañas pero la mantiene navegable
// app/(tabs)/_layout.tsx (extracto)
<Tabs.Screen
  name="hidden-settings"
  options={{
    href: null,
    title: "Oculto",
  }}
/>

// app/(tabs)/hidden-settings.tsx - accesible vía router.push("/hidden-settings")
import { Text, View } from "react-native";
 
export default function HiddenSettingsScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>No se muestra en la barra de pestañas</Text>
    </View>
  );
}

Profundización

Reglas de layout de pestañas

app/(tabs)/_layout.tsx
├── index.tsx      → pestaña 1 (a menudo inicio)
├── explore.tsx    → pestaña 2
└── profile.tsx    → pestaña 3

• Todo hijo inmediato de (tabs)/ se convierte en una pestaña a menos que href: null
• Las carpetas se convierten en una pestaña única - el _layout.tsx de la carpeta elige stack/drawer dentro de esa pestaña
• tabBarButton personaliza el comportamiento del pulso - usa para pestañas FAB del centro especial
• lazy: true (predeterminado) difiere el montaje hasta el primer enfoque - mejora el inicio en frío

Reglas de layout del cajón

import { Drawer } from "expo-router/drawer";

• Importa desde expo-router/drawer, no desde expo-router - el cajón tiene dependencias nativas adicionales
• Envuelve el árbol en GestureHandlerRootView en el layout del cajón o raíz
• drawerPosition, drawerType, y overlayColor coinciden con las opciones del cajón de React Navigation
• En teléfonos, muchos equipos usan tabs primario + cajón para secundario - no ambos compitiendo por el alcance del pulgar

Patrones de composición

Profundidad máxima recomendada:
 
Stack raíz
  └── Cajón (opcional)
        └── Pestañas
              └── Stack (por pestaña pesada)

Estilo de la barra de pestañas

<Tabs
  screenOptions={{
    tabBarStyle: { backgroundColor: "#0f172a" },
    tabBarLabelStyle: { fontSize: 12 },
    tabBarHideOnKeyboard: true,
  }}
/>

• tabBarHideOnKeyboard evita que la barra cubra entradas de texto en Android
• Los insertos de área segura se aplican automáticamente - prueba en iPhone con indicador de inicio
• tabBarBadge para conteos de no leído - mantén insignias en sincronía con el estado de notificación push

Errores comunes

• Cada archivo en (tabs)/ se muestra como una pestaña - las rutas auxiliares se filtran en la barra. Corrección: href: null o mueve pantallas que no son pestañas a una carpeta de stack anidada.

• Cajón sin raíz del manejador de gestos - los deslizamientos fallan silenciosamente. Corrección: GestureHandlerRootView envolviendo el layout del cajón; asegúrate de que el complemento Babel de react-native-reanimated está configurado (predeterminado en la plantilla SDK 57).

• Encabezados dobles (pestañas + stack) - tanto el layout de pestañas como el stack anidado muestran encabezados. Corrección: headerShown: false en pestañas para carpetas que poseen un stack anidado (patrón de pestaña orders).

• El estado de la pestaña sobrevive al cierre de sesión - el stack del usuario anterior permanece en memoria. Corrección: Remontar (tabs) con key={userId} en el layout o router.replace a auth.

• Enlace profundo a /orders/5 con la pestaña incorrecta enfocada - el usuario aterriza en detalle pero la pestaña incorrecta se destaca. Corrección: Asegúrate de que la ruta vive bajo la carpeta de pestaña correcta; prueba enlaces universales por pestaña.

• Demasiadas pestañas (6+) - la barra de pestañas de iOS trunca las etiquetas. Corrección: Mueve destinos raros al cajón, menú de perfil, o stack de "Más".

• Cajón en iPhone como navegación primaria - el alcance del pulgar y la capacidad de descubrimiento sufren vs pestañas inferiores. Corrección: Reserva el cajón para tablet o 6+ destinos.

Alternativas

Preguntas frecuentes

npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

<Tabs.Screen name="secret" options={{ href: null }} />

import { router } from "expo-router";
 
router.push("/(tabs)/explore");

<Tabs.Screen
  name="create"
  options={{
    tabBarButton: (props) => (
      <Pressable {...props} style={[props.style, styles.fab]}>
        <Ionicons name="add" size={28} color="#fff" />
      </Pressable>
    ),
  }}
/>

<Tabs.Screen
  name="inbox"
  options={{
    tabBarBadge: 3,
    tabBarBadgeStyle: { backgroundColor: "#ef4444" },
  }}
/>

Relacionado

• Navegación de Stack - stacks anidados dentro de pestañas
• Grupos de ruta y organización de app/ - grupos (tabs) y (drawer)
• Conceptos básicos de Expo Router - modelo mental de layout
• Link y href - conmutación de pestaña y prefetch
• ../expo-rules/navigation-and-routing-rules/navigation-and-routing-rules.md - reglas de revisión de layout
• ../architecture-design/feature-sliced-design-for-rn/feature-sliced-design-for-rn.md - dónde viven las pantallas de característica vs app/

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).