beenvoice-app/app/(app)/_layout.tsx

import { Platform } from "react-native";
import { NativeTabs } from "expo-router/unstable-native-tabs";

import { AppLockOverlay } from "@/components/AppLockOverlay";
import { useAppTheme } from "@/contexts/ThemeContext";
import { AppLockProvider } from "@/contexts/AppLockContext";

export default function AppLayout() {
  const { colors, isDark } = useAppTheme();

  const tintColor = colors.primary;
  const labelColor = colors.mutedForeground;
  const tabContentStyle = { backgroundColor: colors.background };
  const tabBarBlur =
    Platform.OS === "ios"
      ? isDark
        ? "systemChromeMaterialDark"
        : "systemChromeMaterialLight"
      : undefined;

  return (
    <AppLockProvider>
      <NativeTabs
        tintColor={tintColor}
        iconColor={{
          default: labelColor,
          selected: tintColor,
        }}
        labelStyle={{ color: labelColor }}
        blurEffect={tabBarBlur}
        disableTransparentOnScrollEdge
        backgroundColor={Platform.OS === "android" ? colors.background : undefined}
      >
        <NativeTabs.Trigger name="index" disableAutomaticContentInsets contentStyle={tabContentStyle}>
          <NativeTabs.Trigger.Icon
            sf={{ default: "square.grid.2x2", selected: "square.grid.2x2.fill" }}
            md="grid_view"
          />
          <NativeTabs.Trigger.Label>Dashboard</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>

        <NativeTabs.Trigger name="timer" disableAutomaticContentInsets contentStyle={tabContentStyle}>
          <NativeTabs.Trigger.Icon
            sf={{ default: "timer", selected: "timer" }}
            md="timer"
          />
          <NativeTabs.Trigger.Label>Timer</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>

        <NativeTabs.Trigger name="entities" disableAutomaticContentInsets contentStyle={tabContentStyle}>
          <NativeTabs.Trigger.Icon
            sf={{ default: "square.stack.3d.up", selected: "square.stack.3d.up.fill" }}
            md="corporate_fare"
          />
          <NativeTabs.Trigger.Label>Entities</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>

        <NativeTabs.Trigger name="invoices" disableAutomaticContentInsets contentStyle={tabContentStyle}>
          <NativeTabs.Trigger.Icon
            sf={{ default: "doc.text", selected: "doc.text.fill" }}
            md="description"
          />
          <NativeTabs.Trigger.Label>Invoices</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>

        <NativeTabs.Trigger name="settings" disableAutomaticContentInsets contentStyle={tabContentStyle}>
          <NativeTabs.Trigger.Icon
            sf={{ default: "gearshape", selected: "gearshape.fill" }}
            md="settings"
          />
          <NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>
      </NativeTabs>
      <AppLockOverlay />
    </AppLockProvider>
  );
}