144 lines
4.9 KiB
TypeScript
144 lines
4.9 KiB
TypeScript
import { useTheme } from '@/components/ThemeContext';
|
||
import { RefreshProvider } from '@/components/ui/RefreshContext';
|
||
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
|
||
import { Tabs } from 'expo-router';
|
||
import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Text } from 'react-native';
|
||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||
|
||
export default function TabsLayout() {
|
||
const { isDark } = useTheme();
|
||
const { t } = useTranslation();
|
||
|
||
return (
|
||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||
<RefreshProvider>
|
||
<BottomSheetModalProvider>
|
||
<Tabs
|
||
screenOptions={{
|
||
headerShown: false,
|
||
tabBarStyle: {
|
||
position: 'absolute',
|
||
left: 16,
|
||
right: 16,
|
||
bottom: 0,
|
||
height: 70,
|
||
borderTopLeftRadius: 16,
|
||
borderTopRightRadius: 16,
|
||
backgroundColor: isDark ? '#0f172a' : '#fff',
|
||
borderWidth: 1,
|
||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||
shadowColor: '#000',
|
||
shadowOpacity: isDark ? 0.5 : 0.1,
|
||
shadowOffset: { width: 0, height: -3 },
|
||
shadowRadius: isDark ? 12 : 10,
|
||
elevation: 8,
|
||
overflow: 'hidden',
|
||
},
|
||
tabBarActiveTintColor: '#3b82f6',
|
||
tabBarInactiveTintColor: isDark ? '#64748b' : '#94a3b8',
|
||
tabBarLabelStyle: { fontSize: 12, fontWeight: '600' },
|
||
tabBarItemStyle: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'center',
|
||
alignItems: 'flex-start',
|
||
alignContent: 'center',
|
||
},
|
||
tabBarLabelPosition: 'below-icon',
|
||
}}
|
||
>
|
||
<Tabs.Screen
|
||
name="index"
|
||
options={{
|
||
tabBarLabel: ({ color }) => (
|
||
<Text
|
||
style={{
|
||
color: color,
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
textAlign: 'center',
|
||
flexWrap: 'wrap',
|
||
width: 80, // yetarli joy berish
|
||
}}
|
||
numberOfLines={2} // 2 qatorga sig‘adi
|
||
>
|
||
{t('Bosh sahifa')}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
name="create-announcements"
|
||
options={{
|
||
tabBarLabel: ({ focused, color }) => (
|
||
<Text
|
||
style={{
|
||
color: color,
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
textAlign: 'center',
|
||
flexWrap: 'wrap',
|
||
width: 80, // yetarli joy berish
|
||
}}
|
||
numberOfLines={2} // 2 qatorga sig‘adi
|
||
>
|
||
{t("E'lon joylashtirish")}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, size }) => <PlusCircle color={color} size={size} />,
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
name="announcements"
|
||
options={{
|
||
tabBarLabel: ({ focused, color }) => (
|
||
<Text
|
||
style={{
|
||
color: color,
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
textAlign: 'center',
|
||
flexWrap: 'wrap',
|
||
width: 80, // yetarli joy berish
|
||
}}
|
||
numberOfLines={2} // 2 qatorga sig‘adi
|
||
>
|
||
{t("E'lonlar")}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, size }) => <Megaphone color={color} size={size} />,
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
name="profile"
|
||
options={{
|
||
tabBarLabel: ({ focused, color }) => (
|
||
<Text
|
||
style={{
|
||
color: color,
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
textAlign: 'center',
|
||
flexWrap: 'wrap',
|
||
width: 80, // yetarli joy berish
|
||
}}
|
||
numberOfLines={2} // 2 qatorga sig‘adi
|
||
>
|
||
{t('Profil')}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
|
||
}}
|
||
/>
|
||
</Tabs>
|
||
</BottomSheetModalProvider>
|
||
</RefreshProvider>
|
||
</GestureHandlerRootView>
|
||
);
|
||
}
|