POWR/app/(tabs)/_layout.tsx
2025-02-15 14:03:42 -05:00

78 lines
2.0 KiB
TypeScript

// app/(tabs)/_layout.tsx
import React from 'react';
import { Platform } from 'react-native';
import { Tabs } from 'expo-router';
import { useTheme } from '@react-navigation/native';
import { Dumbbell, Library, Users, History, User, } from 'lucide-react-native';
import type { CustomTheme } from '@/lib/theme';
export default function TabLayout() {
const theme = useTheme() as CustomTheme;
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: theme.colors.background,
borderTopColor: theme.colors.border,
borderTopWidth: Platform.OS === 'ios' ? 0.5 : 1,
elevation: 0,
shadowOpacity: 0,
},
tabBarActiveTintColor: theme.colors.tabActive,
tabBarInactiveTintColor: theme.colors.tabInactive,
tabBarShowLabel: true,
tabBarLabelStyle: {
fontSize: 12,
marginBottom: Platform.OS === 'ios' ? 0 : 4,
},
}}>
<Tabs.Screen
name="profile"
options={{
title: 'Profile',
tabBarIcon: ({ color, size }) => (
<User size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="library"
options={{
title: 'Library',
tabBarIcon: ({ color, size }) => (
<Library size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="index"
options={{
title: 'Workout',
tabBarIcon: ({ color, size }) => (
<Dumbbell size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="social"
options={{
title: 'Social',
tabBarIcon: ({ color, size }) => (
<Users size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="history"
options={{
title: 'History',
tabBarIcon: ({ color, size }) => (
<History size={size} color={color} />
),
}}
/>
</Tabs>
);
}