theme update latest project

src/navigation/BottomTabs.tsx

@@ -1,50 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import {
   BottomTabNavigationProp,
   createBottomTabNavigator,
 } from "@react-navigation/bottom-tabs";
 import {
   View,
-  Text,
   StyleSheet,
-  Platform,
-  AccessibilityInfo,
 } from "react-native";
-import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
-import GroupScreen from "../screens/GroupScreen";
-import Profile from "../screens/profile/Profile";
-import Home from "../screens/home/Home";
-import colors from "../components/colors";
-import Setting from "../screens/setting/Setting";
-import ManagementScreen from "../screens/management/ManagementScreen";
-import {
-  responsiveFontSize,
-  responsiveHeight,
-} from "react-native-responsive-dimensions";
-import { useTheme } from "../theme/ThemeProvider";
+import { Home, User, Settings, Users } from "lucide-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
-const TAB_CONFIG = {
-  activeColor: "#000",
-  inactiveColor: "#8e8e93",
-  backgroundColor: "#fff",
-  height: 70,
-  iconSize: 28,
-};
-
-const activeTabColors: { [key: string]: string } = {
-  Home: colors.pastelPink,
-  Profile: colors.pastelBlue,
-  Group: colors.pastelGreen,
-  Management: colors.pastelOrange,
-};
-
-const activeIconColors: { [key: string]: string } = {
-  Home: "#333",
-  Profile: "#333",
-  Group: "#333",
-  Management: "#333",
-};
+import HomeScreen from "../screens/home/Home";
+import Profile from "../screens/profile/Profile";
+import GroupScreen from "../screens/GroupScreen";
+import ManagementScreen from "../screens/management/ManagementScreen";
+import { useTheme } from "../hooks/ui/useTheme";
+import FontsFamily from "../constents/FontsFamily";
 
 export type RootTabParamList = {
   Home: undefined;
@@ -59,87 +31,72 @@ export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
 const Tab = createBottomTabNavigator<RootTabParamList>();
 
 const BottomTabs: React.FC = () => {
-  const { theme } = useTheme();
+  const theme = useTheme();
   const insets = useSafeAreaInsets();
 
-  const [isReduceMotionEnabled, setIsReduceMotionEnabled] =
-    useState<boolean>(false);
-  const [isScreenReaderEnabled, setIsScreenReaderEnabled] =
-    useState<boolean>(false);
-
-  useEffect(() => {
-    AccessibilityInfo.isScreenReaderEnabled().then(setIsScreenReaderEnabled);
-    AccessibilityInfo.isReduceMotionEnabled().then(setIsReduceMotionEnabled);
-
-    const screenReaderSubscription = AccessibilityInfo.addEventListener(
-      "screenReaderChanged",
-      setIsScreenReaderEnabled
-    );
-
-    return () => screenReaderSubscription.remove();
-  }, []);
-
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarStyle: [
-          [styles.tabBar,{ backgroundColor: theme.colors.reverseBackground }],
-          {
-            bottom: insets.bottom + 10
-          },
-        ],
-
-        // Make each tab item occupy the full bar height and center its content
+        tabBarShowLabel: true,
+        tabBarStyle: {
+          position: "absolute",
+          bottom: Math.max(insets.bottom, 8),
+          left: 12,
+          right: 12,
+          height: 64,
+          borderRadius: 18,
+          backgroundColor: theme.colors.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderTopWidth: 0,
+          elevation: 8,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.12,
+          shadowRadius: 8,
+          paddingBottom: 0,
+        },
         tabBarItemStyle: {
-          height: "100%",
+          height: 64,
           justifyContent: "center",
           alignItems: "center",
-          padding: 0,
-          margin: 0,
+          paddingVertical: 6,
         },
+        tabBarActiveTintColor: theme.colors.primary,
+        tabBarInactiveTintColor: theme.colors.textMuted,
+        tabBarLabelStyle: {
+          fontFamily: FontsFamily.nunitoBold,
+          fontSize: responsiveFontSize(1.2),
+          marginTop: -2,
+          marginBottom: 4,
+        },
+        tabBarIcon: ({ focused, color }) => {
+          const iconColor = focused ? theme.colors.primary : color;
+          const iconSize = 22;
+          let IconComponent: React.FC<any> = Home;
 
-        tabBarLabel: ({ focused, color }) =>
-          !focused ? (
-            <Text style={[styles.label, { color }]}>{route.name}</Text>
-          ) : null,
-
-        tabBarIcon: ({ focused }) => {
-          let iconName: IoniconsIconName = "home-outline";
-
-          if (route.name === "Home")
-            iconName = focused ? "home" : "home-outline";
-          else if (route.name === "Profile")
-            iconName = focused ? "person" : "person-outline";
-          else if (route.name === "Management")
-            iconName = focused ? "settings" : "settings-outline";
-          else if (route.name === "Group")
-            iconName = focused ? "people" : "people-outline";
-
-          const activeBackgroundColor = theme.colors.background;
-          const activeIconColor = activeIconColors[route.name];
+          if (route.name === "Home") IconComponent = Home;
+          else if (route.name === "Profile") IconComponent = User;
+          else if (route.name === "Management") IconComponent = Settings;
+          else if (route.name === "Group") IconComponent = Users;
 
           return (
-            <View
-              style={[
-                styles.iconContainer,
-                focused && [
-                  styles.activeIconContainer,
-                  { backgroundColor: activeBackgroundColor },
-                ],
-              ]}
-            >
-              <Ionicons
-                name={iconName}
-                size={TAB_CONFIG.iconSize}
-                color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
+            <View style={[
+              styles.iconWrapper,
+              focused && { backgroundColor: theme.colors.primarySoft }
+            ]}>
+              <IconComponent
+                size={iconSize}
+                color={iconColor}
+                strokeWidth={focused ? 2.5 : 2}
               />
             </View>
           );
         },
       })}
     >
-      <Tab.Screen name="Home" component={Home} />
+      <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Profile" component={Profile} />
       <Tab.Screen name="Group" component={GroupScreen} />
       <Tab.Screen name="Management" component={ManagementScreen} />
@@ -148,47 +105,13 @@ const BottomTabs: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
+  iconWrapper: {
+    width: 40,
+    height: 28,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#f5f7fa",
-  },
-  text: {
-    fontSize: responsiveFontSize(1.8),
-    fontWeight: "600",
-    color: "#111",
-  },
-  tabBar: {
-    position: "absolute",
-    left: 20,
-    right: 20,
-    height: TAB_CONFIG.height,
-    borderRadius: 20,
-    shadowColor: "#000",
-    shadowOpacity: 0.1,
-    shadowOffset: { width: 0, height: 5 },
-    shadowRadius: 8,
-    elevation: 10,
-    paddingTop: 0,
-    marginHorizontal: 10,
-  },
-  label: {
-    paddingVertical: 5,
-    fontSize: responsiveFontSize(1.2),
-  },
-  iconContainer: {
-    width: 60,
-    height: 50,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 15,
-  },
-  activeIconContainer: {
-    elevation: 2,
-    shadowColor: "#000",
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
+    borderRadius: 10,
+    marginBottom: 2,
   },
 });