theme

src/navigation/BottomTabs.tsx

@@ -1,6 +1,15 @@
-import React from "react";
-import { BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { View, Text, StyleSheet, Platform, AccessibilityInfo } from "react-native";
+import React, { useState, useEffect } 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";
@@ -8,8 +17,12 @@ 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 {
+  responsiveFontSize,
+  responsiveHeight,
+} from "react-native-responsive-dimensions";
+import { useTheme } from "../theme/ThemeProvider";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const TAB_CONFIG = {
   activeColor: "#000",
@@ -19,60 +32,72 @@ const TAB_CONFIG = {
   iconSize: 28,
 };
 
-// Background (tab highlight) colors
 const activeTabColors: { [key: string]: string } = {
-  Home: colors.pastelPink,     // Soft pink
-  Profile: colors.pastelBlue,  // Light sky blue
-  Group: colors.pastelGreen,    // Gentle mint green
-  Management: colors.pastelOrange, // Warm pastel yellow
+  Home: colors.pastelPink,
+  Profile: colors.pastelBlue,
+  Group: colors.pastelGreen,
+  Management: colors.pastelOrange,
 };
 
-// Icon/Text colors on active tabs
 const activeIconColors: { [key: string]: string } = {
   Home: "#333",
   Profile: "#333",
   Group: "#333",
   Management: "#333",
-}
-
+};
 
 export type RootTabParamList = {
   Home: undefined;
   Profile: undefined;
   Group: undefined;
-  Management: { actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests" };
+  Management: {
+    actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
+  };
 };
-// Define the navigation prop type for screens within the tab navigator
+
 export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
 const Tab = createBottomTabNavigator<RootTabParamList>();
 
 const BottomTabs: React.FC = () => {
+  const { theme } = useTheme();
+  const insets = useSafeAreaInsets();
 
-  const [isReduceMotionEnabled, setIsReduceMotionEnabled] = React.useState<boolean>(false);
-  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = React.useState<boolean>(false);
+  const [isReduceMotionEnabled, setIsReduceMotionEnabled] =
+    useState<boolean>(false);
+  const [isScreenReaderEnabled, setIsScreenReaderEnabled] =
+    useState<boolean>(false);
 
-  React.useEffect(() => {
-    // Check for accessibility settings
+  useEffect(() => {
     AccessibilityInfo.isScreenReaderEnabled().then(setIsScreenReaderEnabled);
     AccessibilityInfo.isReduceMotionEnabled().then(setIsReduceMotionEnabled);
 
     const screenReaderSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
+      "screenReaderChanged",
       setIsScreenReaderEnabled
     );
 
     return () => screenReaderSubscription.remove();
   }, []);
 
-
-
-  // console.log("isReduceMotionEnabled : ", isReduceMotionEnabled)
-  // console.log("isScreenReaderEnabled : ", isScreenReaderEnabled)
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarStyle: [styles.tabBar, {marginVertical:isReduceMotionEnabled ? responsiveHeight(0.5) : responsiveHeight(3.5) || isScreenReaderEnabled ? responsiveHeight(0.5) : responsiveHeight(3.5)}],
+        tabBarStyle: [
+          [styles.tabBar,{ backgroundColor: theme.colors.reverseBackground }],
+          {
+            bottom: insets.bottom + 10
+          },
+        ],
+
+        // Make each tab item occupy the full bar height and center its content
+        tabBarItemStyle: {
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: 0,
+          margin: 0,
+        },
 
         tabBarLabel: ({ focused, color }) =>
           !focused ? (
@@ -82,32 +107,33 @@ const BottomTabs: React.FC = () => {
         tabBarIcon: ({ focused }) => {
           let iconName: IoniconsIconName = "home-outline";
 
-          // Determine icon based on route
-          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";
+          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";
 
-          // 3. Get the active background color and icon color from the maps
-          const activeBackgroundColor = activeTabColors[route.name];
+          const activeBackgroundColor = theme.colors.background;
           const activeIconColor = activeIconColors[route.name];
 
           return (
             <View
               style={[
                 styles.iconContainer,
-                // 4. Apply the dynamic background color when focused
                 focused && [
                   styles.activeIconContainer,
                   { backgroundColor: activeBackgroundColor },
                 ],
               ]}
             >
-              (route.name === "Management"{<Ionicons
+              <Ionicons
                 name={iconName}
                 size={TAB_CONFIG.iconSize}
                 color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
-              />}:null)
+              />
             </View>
           );
         },
@@ -119,7 +145,7 @@ const BottomTabs: React.FC = () => {
       <Tab.Screen name="Management" component={ManagementScreen} />
     </Tab.Navigator>
   );
-}
+};
 
 const styles = StyleSheet.create({
   screen: {
@@ -135,19 +161,16 @@ const styles = StyleSheet.create({
   },
   tabBar: {
     position: "absolute",
-    bottom: 20,
     left: 20,
     right: 20,
     height: TAB_CONFIG.height,
-    // backgroundColor: TAB_CONFIG.backgroundColor,
     borderRadius: 20,
     shadowColor: "#000",
     shadowOpacity: 0.1,
     shadowOffset: { width: 0, height: 5 },
     shadowRadius: 8,
     elevation: 10,
-    paddingBottom: Platform.OS === "ios" ? 25 : 10,
-    paddingTop: 10,
+    paddingTop: 0,
     marginHorizontal: 10,
   },
   label: {
@@ -155,19 +178,18 @@ const styles = StyleSheet.create({
     fontSize: responsiveFontSize(1.2),
   },
   iconContainer: {
+    width: 60,
+    height: 50,
     justifyContent: "center",
     alignItems: "center",
-    width: 80, // Reduced size for a sleeker look
-    height: 60, // Reduced size
-    marginTop: 10,
     borderRadius: 15,
   },
   activeIconContainer: {
-    // The default active style, background color is now applied dynamically
     elevation: 2,
-    shadowColor: '#000',
+    shadowColor: "#000",
     shadowOpacity: 0.1,
     shadowRadius: 5,
   },
 });
-export default BottomTabs
+
+export default BottomTabs;