POWR/app/(tabs)/_layout.tsx

78 lines
2.0 KiB
TypeScript
Raw Normal View History

2025-02-09 20:38:38 -05:00
// app/(tabs)/_layout.tsx
import React from 'react';
import { Platform } from 'react-native';
import { Tabs } from 'expo-router';
2025-02-12 12:55:51 -05:00
import { useTheme } from '@react-navigation/native';
2025-02-15 14:03:42 -05:00
import { Dumbbell, Library, Users, History, User, } from 'lucide-react-native';
import type { CustomTheme } from '@/lib/theme';
2025-02-09 20:38:38 -05:00
export default function TabLayout() {
2025-02-15 14:03:42 -05:00
const theme = useTheme() as CustomTheme;
2025-02-09 20:38:38 -05:00
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: {
2025-02-15 14:03:42 -05:00
backgroundColor: theme.colors.background,
borderTopColor: theme.colors.border,
2025-02-09 20:38:38 -05:00
borderTopWidth: Platform.OS === 'ios' ? 0.5 : 1,
elevation: 0,
shadowOpacity: 0,
},
2025-02-15 14:03:42 -05:00
tabBarActiveTintColor: theme.colors.tabActive,
tabBarInactiveTintColor: theme.colors.tabInactive,
2025-02-09 20:38:38 -05:00
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>
);
}