government ui complated

app/(dashboard)/_layout.tsx

@@ -2,17 +2,33 @@ 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 { router, Tabs } from 'expo-router';
 import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { Animated, Easing, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function TabsLayout() {
   const { isDark } = useTheme();
   const { t } = useTranslation();
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 4000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
@@ -77,7 +93,7 @@ export default function TabsLayout() {
                     style={[
                       styles.tabLabel,
                       {
-                        marginLeft: 10,
+                        marginLeft: 0,
                         color,
                         fontWeight: focused ? '700' : '600',
                       },
@@ -92,7 +108,7 @@ export default function TabsLayout() {
                       styles.iconContainer,
                       focused && styles.iconContainerActive,
                       {
-                        marginLeft: 10,
+                        marginLeft: 0,
                       },
                     ]}
                   >
@@ -112,7 +128,8 @@ export default function TabsLayout() {
                     style={[
                       styles.tabLabel,
                       {
-                        marginRight: 10,
+                        // marginRight: 10,
+                        marginLeft: 0,
                         color,
                         fontWeight: focused ? '700' : '600',
                       },
@@ -127,7 +144,8 @@ export default function TabsLayout() {
                       styles.iconContainer,
                       focused && styles.iconContainerActive,
                       {
-                        marginRight: 10,
+                        // marginRight: 10,
+                        marginLeft: 0,
                       },
                     ]}
                   >
@@ -138,28 +156,41 @@ export default function TabsLayout() {
             />
 
             <Tabs.Screen
-              name="e-services"
+              key="e-service-tab"
+              name="e-service"
               options={{
-                title: 'Davlat xizmatlari',
+                title: '',
                 tabBarLabel: () => null,
                 tabBarItemStyle: {
                   flex: 1.2,
-                  top: -10,
+                  top: 8,
                 },
-                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}
+                tabBarIcon: () => (
+                  <TouchableOpacity
+                    style={styles.centerTabContainer}
+                    onPress={() => router.push('/(dashboard)/e-service/e-services')}
+                  >
+                    <View
+                      style={[
+                        styles.centerTabInner,
+                        {
+                          backgroundColor: isDark
+                            ? 'rgba(255, 255, 255, 0.1)'
+                            : 'rgba(15, 23, 42, 0.1)',
+                        },
+                      ]}
                     >
-                      <View style={styles.centerTabInner}>
-                        <Image source={Logo} style={{ width: 60, height: 60 }} />
-                      </View>
-                    </LinearGradient>
-                    <Text
-                      numberOfLines={1} // 1 qatorda
+                      <Animated.Image
+                        source={Logo}
+                        style={{
+                          width: 55,
+                          height: 55,
+                          transform: [{ rotate }],
+                        }}
+                      />
+                    </View>
+                    {/* <Text
+                      numberOfLines={1}
                       adjustsFontSizeToFit
                       minimumFontScale={0.85}
                       style={[
@@ -167,15 +198,15 @@ export default function TabsLayout() {
                         {
                           color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
                           fontWeight: focused ? '700' : '600',
-                          fontSize: 13, // kattalashtirildi
-                          width: 100, // kenglik oshirildi
+                          fontSize: 13,
+                          width: 100,
                           textAlign: 'center',
                         },
                       ]}
                     >
                       {t('Davlat xizmatlari')}
-                    </Text>
-                  </View>
+                    </Text> */}
+                  </TouchableOpacity>
                 ),
               }}
             />
@@ -190,7 +221,8 @@ export default function TabsLayout() {
                     style={[
                       styles.tabLabel,
                       {
-                        marginLeft: 20,
+                        // marginLeft: 10,
+                        marginRight: 0,
                         color,
                         fontWeight: focused ? '700' : '600',
                       },
@@ -205,7 +237,8 @@ export default function TabsLayout() {
                       styles.iconContainer,
                       focused && styles.iconContainerActive,
                       {
-                        marginLeft: 20,
+                        // marginLeft: 10,
+                        marginRight: 0,
                       },
                     ]}
                   >
@@ -225,7 +258,7 @@ export default function TabsLayout() {
                     style={[
                       styles.tabLabel,
                       {
-                        marginRight: 20,
+                        marginRight: 0,
                         color,
                         fontWeight: focused ? '700' : '600',
                       },
@@ -239,7 +272,7 @@ export default function TabsLayout() {
                     style={[
                       styles.iconContainer,
                       focused && styles.iconContainerActive,
-                      { marginRight: 20 },
+                      { marginRight: 0 },
                     ]}
                   >
                     <User color={color} size={30} strokeWidth={2} />
@@ -270,29 +303,10 @@ const styles = StyleSheet.create({
     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,
+    width: 65,
+    height: 65,
     borderRadius: 34,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
     justifyContent: 'center',
     alignItems: 'center',
   },