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

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

import { AppLockOverlay } from "@/components/AppLockOverlay";
import { useAppTheme } from "@/contexts/ThemeContext";
import { mutedForeground, primary } from "@/lib/beenvoice-theme";
import { AppLockProvider } from "@/contexts/AppLockContext";

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

  const tintColor =
    Platform.OS === "ios"
      ? DynamicColorIOS({ light: primary, dark: "#FAFAFA" })
      : colors.primary;

  const labelColor =
    Platform.OS === "ios"
      ? DynamicColorIOS({ light: mutedForeground, dark: "#A1A1AA" })
      : colors.mutedForeground;

  const tabContentStyle = { backgroundColor: "transparent" as const };

  return (
    <AppLockProvider>
      <NativeTabs
        tintColor={tintColor}
        iconColor={{
          default: labelColor,
          selected: tintColor,
        }}
        labelStyle={{ color: labelColor }}
      >
        <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="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>
  );
}