89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { View, Text } from "react-native";
|
|
import { Tabs } from "expo-router";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { useTheme } from "../../components/theme";
|
|
|
|
function TabBarIcon({ name, color, size }: { name: string; color: string; size: number }) {
|
|
return <Ionicons name={name as any} size={size} color={color} />;
|
|
}
|
|
|
|
export default function TabLayout() {
|
|
const theme = useTheme();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: theme.colors.primary,
|
|
tabBarInactiveTintColor: theme.colors.tabInactive,
|
|
tabBarStyle: {
|
|
backgroundColor: theme.colors.surface,
|
|
borderTopWidth: 1,
|
|
borderTopColor: theme.colors.borderLight,
|
|
elevation: 0,
|
|
height: 64 + insets.bottom,
|
|
paddingBottom: insets.bottom + 6,
|
|
paddingTop: 8,
|
|
shadowColor: theme.colors.shadow,
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowOpacity: 0.04,
|
|
shadowRadius: 4,
|
|
},
|
|
tabBarLabelStyle: {
|
|
fontSize: 11,
|
|
fontWeight: "500",
|
|
marginTop: 2,
|
|
},
|
|
tabBarHideOnKeyboard: true,
|
|
tabBarItemStyle: {
|
|
marginHorizontal: 2,
|
|
marginVertical: 2,
|
|
},
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="(home)"
|
|
options={{
|
|
title: "Почетна",
|
|
tabBarIcon: ({ color, size }) => <TabBarIcon name="home" color={color} size={size} />,
|
|
tabBarAccessibilityLabel: "Почетна",
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(explore)"
|
|
options={{
|
|
title: "Категории",
|
|
tabBarIcon: ({ color, size }) => <TabBarIcon name="grid" color={color} size={size} />,
|
|
tabBarAccessibilityLabel: "Категории",
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(posts)"
|
|
options={{
|
|
title: "Побарувања",
|
|
tabBarIcon: ({ color, size }) => <TabBarIcon name="document-text" color={color} size={size} />,
|
|
tabBarAccessibilityLabel: "Побарувања",
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(chat)"
|
|
options={{
|
|
title: "Чат",
|
|
tabBarIcon: ({ color, size }) => <TabBarIcon name="chatbubbles" color={color} size={size} />,
|
|
tabBarAccessibilityLabel: "Чат",
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="(profile)"
|
|
options={{
|
|
title: "Профил",
|
|
tabBarIcon: ({ color, size }) => <TabBarIcon name="person" color={color} size={size} />,
|
|
tabBarAccessibilityLabel: "Профил",
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|