81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import type { ComponentProps } from 'react';
|
|
import { Tabs } from 'expo-router';
|
|
import { useTranslation } from 'react-i18next';
|
|
import FontAwesome from '@expo/vector-icons/FontAwesome';
|
|
import { useAppearance } from '@/src/context/AppearanceContext';
|
|
|
|
function TabIcon(props: { name: ComponentProps<typeof FontAwesome>['name']; color: string }) {
|
|
return <FontAwesome size={22} style={{ marginBottom: -2 }} name={props.name} color={props.color} />;
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
const { t } = useTranslation();
|
|
const { colors } = useAppearance();
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: colors.brand,
|
|
tabBarInactiveTintColor: colors.textMuted,
|
|
tabBarStyle: {
|
|
backgroundColor: colors.surface,
|
|
borderTopColor: colors.border,
|
|
},
|
|
headerStyle: { backgroundColor: colors.surface },
|
|
headerTintColor: colors.text,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: t('nav.dashboard'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="home" color={String(color)} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="meals"
|
|
options={{
|
|
title: t('nav.allMeals'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="list" color={String(color)} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="diet"
|
|
options={{
|
|
title: t('nav.dietTracker'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="heartbeat" color={String(color)} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="planner"
|
|
options={{
|
|
title: t('nav.planner'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="calendar" color={String(color)} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="shopping"
|
|
options={{
|
|
title: t('nav.shopping'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="shopping-cart" color={String(color)} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="manage"
|
|
options={{
|
|
title: t('nav.manageMeals'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="plus-square" color={String(color)} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="settings"
|
|
options={{
|
|
title: t('nav.settings'),
|
|
tabBarIcon: ({ color }) => <TabIcon name="cog" color={String(color)} />,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|