Pestañas Nativas

app/
├── _layout.tsx              # raíz de NativeTabs
├── index.tsx                # primera pestaña
├── explore.tsx
└── settings/
    ├── _layout.tsx          # Stack dentro de la pestaña
    └── index.tsx

// app/_layout.tsx - SDK 57 (API compuesta SDK 55+)
import { NativeTabs } from "expo-router/unstable-native-tabs";
 
export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Inicio</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: "house", selected: "house.fill" }}
          md="home"
        />
      </NativeTabs.Trigger>
 
      <NativeTabs.Trigger name="explore">
        <NativeTabs.Trigger.Label>Explorar</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon sf="safari" md="explore" />
      </NativeTabs.Trigger>
 
      <NativeTabs.Trigger name="settings">
        <NativeTabs.Trigger.Label>Configuración</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon sf="gear" md="settings" />
        <NativeTabs.Trigger.Badge>2</NativeTabs.Trigger.Badge>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

// app/settings/_layout.tsx - stack por pestaña (encabezados + push)
import { Stack } from "expo-router";
 
export default function SettingsStack() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Configuración" }} />
      <Stack.Screen name="account" options={{ title: "Cuenta" }} />
    </Stack>
  );
}

// app/_layout.tsx
import { DynamicColorIOS } from "react-native";
import { NativeTabs } from "expo-router/unstable-native-tabs";
import { useUnreadCount } from "@/features/inbox";
 
export default function TabLayout() {
  const unread = useUnreadCount();
  const showInbox = true; // bandera de característica - establecer antes de montar, no alternar en vivo
 
  return (
    <NativeTabs
      labelStyle={{
        color: DynamicColorIOS({ dark: "white", light: "black" }),
      }}
      tintColor={DynamicColorIOS({ dark: "white", light: "#007AFF" })}
    >
      <NativeTabs.Trigger name="index" disablePopToTop={false}>
        <NativeTabs.Trigger.Label>Inicio</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: "house", selected: "house.fill" }}
          md={{ default: "home", selected: "home" }}
        />
      </NativeTabs.Trigger>
 
      <NativeTabs.Trigger name="inbox" hidden={!showInbox}>
        <NativeTabs.Trigger.Label>Bandeja de entrada</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon sf="tray" md="inbox" />
        {unread > 0 && <NativeTabs.Trigger.Badge>{unread > 9 ? "9+" : unread}</NativeTabs.Trigger.Badge>}
      </NativeTabs.Trigger>
 
      <NativeTabs.Trigger name="settings">
        <NativeTabs.Trigger.Label hidden />
        <NativeTabs.Trigger.Icon sf="gear" md="settings" />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

// app/inbox/_layout.tsx
import { Stack } from "expo-router";
 
export default function InboxStack() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Bandeja de entrada" }} />
      <Stack.Screen name="[id]" options={{ title: "Mensaje" }} />
    </Stack>
  );
}

// Ocultando la barra de pestañas en la pantalla enfocada (SDK 55+ propiedad hidden en NativeTabs)
import { createContext, use, useState } from "react";
import { NativeTabs } from "expo-router/unstable-native-tabs";
import { useFocusEffect } from "expo-router";
 
export const TabBarContext = createContext({
  setTabBarHidden: (_hidden: boolean) => {},
});
 
export default function TabLayout() {
  const [hidden, setTabBarHidden] = useState(false);
 
  return (
    <TabBarContext value={{ setTabBarHidden }}>
      <NativeTabs hidden={hidden}>
        <NativeTabs.Trigger name="index">
          <NativeTabs.Trigger.Label>Inicio</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>
      </NativeTabs>
    </TabBarContext>
  );
}
 
// En pantalla inmersiva:
export function useHideTabBarOnFocus() {
  const { setTabBarHidden } = use(TabBarContext);
  useFocusEffect(() => {
    setTabBarHidden(true);
    return () => setTabBarHidden(false);
  });
}

<NativeTabs.Trigger.Icon
  sf={{ default: "star", selected: "star.fill" }}  // SF Symbols (iOS)
  md={{ default: "star", selected: "star" }}     // Material Symbols (Android)
  src={require("@/assets/icon.png")}             // Imagen personalizada
  xcasset="home-icon"                            // Catálogo de activos de iOS (SDK 55+)
  renderingMode="template"                       // Matiz de iOS frente a colores originales
/>

// app/_layout.tsx en la raíz del proyecto es a menudo un Stack, no NativeTabs
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(tabs)" />
      <Stack.Screen name="compose" options={{ presentation: "modal" }} />
    </Stack>
  );
}
 
// app/(tabs)/_layout.tsx - NativeTabs viven un nivel abajo