complated project

app/(dashboard)/_layout.tsx

@@ -1,10 +1,13 @@
+import Logo from '@/assets/images/logo.png';
 import { useTheme } from '@/components/ThemeContext';
 import { RefreshProvider } from '@/components/ui/RefreshContext';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
 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 { Platform, StyleSheet, Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function TabsLayout() {
@@ -13,37 +16,53 @@ export default function TabsLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <RefreshProvider>
-        <BottomSheetModalProvider>
+      <BottomSheetModalProvider>
+        <RefreshProvider>
           <Tabs
             screenOptions={{
               headerShown: false,
+              headerStyle: {
+                backgroundColor: isDark ? '#0f172a' : '#ffffff',
+                borderBottomWidth: 0.5,
+                borderBottomColor: isDark ? '#334155' : '#e2e8f0',
+              },
+              headerTitleStyle: {
+                fontSize: 24,
+                fontWeight: '700',
+                color: isDark ? '#f1f5f9' : '#0f172a',
+              },
+              headerShadowVisible: false,
               tabBarStyle: {
                 position: 'absolute',
                 left: 16,
                 right: 16,
-                bottom: 0,
+                bottom: 4,
                 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',
+                paddingTop: 8,
+                paddingBottom: 12,
+                borderTopLeftRadius: 24,
+                borderTopRightRadius: 24,
+                backgroundColor: isDark ? 'rgba(15, 23, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)', // #0f172a mos fon
+                borderWidth: 0.5,
+                borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(226, 232, 240, 0.8)', // quyuq fon uchun yengil oq
+                ...Platform.select({
+                  ios: {
+                    shadowColor: isDark ? '#0f172a' : '#0f172a', // shadow qora emas #0f172a bilan uyg‘un
+                    shadowOffset: { width: 0, height: 8 },
+                    shadowOpacity: isDark ? 0.5 : 0.15,
+                    shadowRadius: 24,
+                  },
+                  android: {
+                    elevation: 10,
+                  },
+                }),
+                overflow: 'visible',
               },
-              tabBarActiveTintColor: '#3b82f6',
-              tabBarInactiveTintColor: isDark ? '#64748b' : '#94a3b8',
-              tabBarLabelStyle: { fontSize: 12, fontWeight: '600' },
+              tabBarActiveTintColor: isDark ? '#3b82f6' : '#3b82f6', // active ko‘k
+              tabBarInactiveTintColor: isDark ? '#94a3b8' : '#64748b', // inactive ochiq kulrang
               tabBarItemStyle: {
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'flex-start',
-                alignContent: 'center',
+                flex: 1,
+                paddingVertical: 4,
               },
               tabBarLabelPosition: 'below-icon',
             }}
@@ -51,93 +70,236 @@ export default function TabsLayout() {
             <Tabs.Screen
               name="index"
               options={{
-                tabBarLabel: ({ color }) => (
+                title: 'Bosh sahifa',
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginLeft: 10,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
                     {t('Bosh sahifa')}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      {
+                        marginLeft: 10,
+                      },
+                    ]}
+                  >
+                    <Home color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
               }}
             />
 
             <Tabs.Screen
               name="create-announcements"
               options={{
-                tabBarLabel: ({ focused, color }) => (
+                title: "Qo'shish",
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginRight: 10,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
-                    {t("E'lon joylashtirish")}
+                    {t("Qo'shish")}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <PlusCircle color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      {
+                        marginRight: 10,
+                      },
+                    ]}
+                  >
+                    <PlusCircle color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
+              }}
+            />
+
+            <Tabs.Screen
+              name="e-services"
+              options={{
+                title: 'Davlat xizmatlari',
+                tabBarLabel: () => null,
+                tabBarItemStyle: {
+                  flex: 1.2,
+                  top: -10,
+                },
+                tabBarIcon: ({ focused }) => (
+                  <View style={styles.centerTabContainer}>
+                    <LinearGradient
+                      colors={focused ? ['#3b82f6', '#2563eb'] : ['#1e40af', '#1e3a8a']} // dark mod uchun quyuq ko‘k
+                      start={{ x: 0, y: 0 }}
+                      end={{ x: 1, y: 1 }}
+                      style={styles.centerTabGradient}
+                    >
+                      <View style={styles.centerTabInner}>
+                        <Image source={Logo} style={{ width: 60, height: 60 }} />
+                      </View>
+                    </LinearGradient>
+                    <Text
+                      numberOfLines={1} // 1 qatorda
+                      adjustsFontSizeToFit
+                      minimumFontScale={0.85}
+                      style={[
+                        styles.centerTabLabel,
+                        {
+                          color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
+                          fontWeight: focused ? '700' : '600',
+                          fontSize: 13, // kattalashtirildi
+                          width: 100, // kenglik oshirildi
+                          textAlign: 'center',
+                        },
+                      ]}
+                    >
+                      {t('Davlat xizmatlari')}
+                    </Text>
+                  </View>
+                ),
               }}
             />
 
             <Tabs.Screen
               name="announcements"
               options={{
-                tabBarLabel: ({ focused, color }) => (
+                title: "E'lonlar",
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginLeft: 20,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
                     {t("E'lonlar")}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <Megaphone color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      {
+                        marginLeft: 20,
+                      },
+                    ]}
+                  >
+                    <Megaphone color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
               }}
             />
 
             <Tabs.Screen
               name="profile"
               options={{
-                tabBarLabel: ({ focused, color }) => (
+                title: 'Profil',
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginRight: 20,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
                     {t('Profil')}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      { marginRight: 20 },
+                    ]}
+                  >
+                    <User color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
               }}
             />
           </Tabs>
-        </BottomSheetModalProvider>
-      </RefreshProvider>
+        </RefreshProvider>
+      </BottomSheetModalProvider>
     </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  tabLabel: {
+    fontSize: 11,
+    textAlign: 'center',
+    marginTop: 4,
+  },
+  iconContainer: {
+    paddingVertical: 4,
+  },
+  iconContainerActive: {
+    transform: [{ scale: 1.05 }],
+  },
+  centerTabContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centerTabGradient: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#3b82f6',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.4,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 12,
+      },
+    }),
+  },
+  centerTabInner: {
+    width: 68,
+    height: 68,
+    borderRadius: 34,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  centerTabLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    textAlign: 'center',
+    maxWidth: 110,
+  },
+});

app/(dashboard)/announcements.tsx

@@ -2,7 +2,6 @@ import { useTheme } from '@/components/ThemeContext';
 import { FilterProvider } from '@/components/ui/FilterContext';
 import { CustomHeader } from '@/components/ui/Header';
 import DashboardScreen from '@/screens/announcements/ui/AnnouncementsList';
-import { Stack } from 'expo-router';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function Announcements() {
@@ -10,10 +9,9 @@ export default function Announcements() {
   return (
     <FilterProvider>
       <SafeAreaView
-        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 50 }}
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 80 }}
       >
         <CustomHeader />
-        <Stack.Screen options={{ title: "E'lonlar" }} />
         <DashboardScreen />
       </SafeAreaView>
     </FilterProvider>

app/(dashboard)/create-announcements.tsx

@@ -8,7 +8,9 @@ export default function CreateAnnouncements() {
   const { isDark } = useTheme();
   return (
     <FilterProvider>
-      <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff' }}>
+      <SafeAreaView
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      >
         <CustomHeader />
         <CreateAdsScreens />
       </SafeAreaView>

app/(dashboard)/e-services.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from '@/components/ThemeContext';
+import { CustomHeader } from '@/components/ui/Header';
+import EServicesScreen from '@/screens/e-services/ui/EServices';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function EServices() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      edges={['top']}
+    >
+      <CustomHeader />
+      <EServicesScreen />
+    </SafeAreaView>
+  );
+}

app/(dashboard)/index.tsx

@@ -24,7 +24,9 @@ export default function Index() {
 
   return (
     <FilterProvider>
-      <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff' }}>
+      <SafeAreaView
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 85 }}
+      >
         <CustomHeader />
         <HomeScreen />
       </SafeAreaView>

app/(dashboard)/profile.tsx

@@ -7,10 +7,10 @@ export default function ProfileScreen() {
   const { isDark } = useTheme();
   return (
     <SafeAreaView
-      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 70 }}
       edges={['top']}
     >
-      <CustomHeader logoutbtn={true} />
+      <CustomHeader logoutbtn={true} notif={false} />
       <Profile />
     </SafeAreaView>
   );